From 5c863f13077ff91608e54f785d602bb40d9a0bd4 Mon Sep 17 00:00:00 2001 From: Nick Funk Date: Wed, 15 Jul 2020 12:20:25 -0600 Subject: [PATCH] [CORL-1155] Fix theming for rebranded stream/admin (#3012) * Repair theming and CSS variables for the rebrand This separates the CSS variables into three sections for admin, stream, as well as a shared set between them. This also adds injection of the raw colours from the design team into post css variables. Lastly, this re-maps the existing theme variables to a new consolidated set with fallbacks for compatibility. Since this is a singular commit from various WIP commits, I am crediting @cvle as well as myself for this work. Thank you all who helped make this rebrand with theming possible! CORL-1155 Co-authored-by: Chi Vinh Le * Convert old css variables in CallOut * Rename postive/negative => success/error CORL-1155 * Change some CSS Variable names * fix TextField/PasswordField colors Co-authored-by: Chi Vinh Le --- CSS_VARIABLES.md | 295 +++++++++ gatsby-node.js | 6 +- package-lock.json | 112 ++-- package.json | 4 + scripts/generateCSSVariablesDocs.ts | 306 +++++++++ src/core/build/paths.ts | 4 +- src/core/build/postcss.config.js | 26 +- src/core/client/account/App/MainLayout.css | 4 +- .../client/account/components/Loading.tsx | 2 +- src/core/client/account/index.tsx | 2 +- src/core/client/account/routes/NotFound.css | 10 +- .../download/Download/DownloadDescription.css | 32 +- .../download/Download/DownloadRoute.css | 4 +- .../download/Download/DownloadRoute.tsx | 2 +- .../account/routes/email/Confirm/Confirm.css | 52 +- .../notifications/Unsubscribe/Unsubscribe.css | 52 +- .../account/routes/password/Reset/Reset.css | 52 +- .../App/DecisionHistory/ApprovedIcon.css | 2 +- .../DecisionHistory/DecisionHistoryButton.css | 2 +- .../App/DecisionHistory/DecisionItem.css | 4 +- .../App/DecisionHistory/DecisionList.css | 2 +- .../admin/App/DecisionHistory/DotDivider.css | 8 +- .../admin/App/DecisionHistory/Empty.css | 8 +- .../admin/App/DecisionHistory/Footer.css | 2 +- .../App/DecisionHistory/GoToCommentLink.css | 12 +- .../client/admin/App/DecisionHistory/Info.css | 10 +- .../App/DecisionHistory/RejectedIcon.css | 2 +- .../App/DecisionHistory/ShowMoreButton.css | 18 +- .../admin/App/DecisionHistory/Timestamp.css | 10 +- .../admin/App/DecisionHistory/Title.css | 20 +- .../admin/App/DecisionHistory/Username.css | 10 +- .../NotificationContainer.tsx | 1 + src/core/client/admin/App/Main.tsx | 2 +- .../client/admin/App/UserMenu/UserMenu.css | 6 +- src/core/client/admin/App/Version.css | 4 +- src/core/client/admin/App/Version.tsx | 2 +- src/core/client/admin/components/AuthBox.css | 6 +- .../components/Comment/CommentContent.css | 20 +- .../admin/components/Comment/InReplyTo.css | 26 +- .../admin/components/Comment/Username.css | 10 +- .../components/Comment/UsernameButton.css | 10 +- .../components/Comment/UsernameButton.tsx | 1 + .../ConversationModal/ConversationModal.tsx | 2 +- .../ConversationModalCommentContainer.css | 22 +- .../ConversationModalContainer.css | 4 +- .../ConversationModalHeaderContainer.css | 14 +- .../ConversationModalQuery.css | 2 +- .../ConversationModalRepliesContainer.css | 4 +- .../client/admin/components/ModalBodyText.css | 10 +- .../client/admin/components/ModalHeader.css | 10 +- .../admin/components/ModalHeaderUsername.css | 6 +- .../components/ModerateCard/ApproveButton.css | 24 +- .../ModerateCard/CommentAuthorContainer.css | 2 +- .../components/ModerateCard/FeatureButton.css | 32 +- .../ModerateCard/FlagDetailsCategory.css | 10 +- .../ModerateCard/FlagDetailsContainer.css | 2 +- .../ModerateCard/FlagDetailsEntry.css | 35 +- .../ModerateCard/LinkDetailsContainer.css | 8 +- .../admin/components/ModerateCard/Markers.css | 9 +- .../admin/components/ModerateCard/Media.css | 12 +- .../components/ModerateCard/ModerateCard.css | 110 ++-- .../ModerateCardDetailsContainer.css | 2 +- .../ModerateCard/ModeratedByContainer.css | 20 +- .../components/ModerateCard/RejectButton.css | 22 +- .../components/ModerateCard/ToxicityLabel.css | 12 +- .../client/admin/components/NotAvailable.css | 2 +- .../client/admin/components/NotAvailable.tsx | 2 + .../PaginatedSelect/PaginatedSelect.css | 12 +- .../admin/components/Timeline/Circle.css | 4 +- .../client/admin/components/Timeline/Line.css | 4 +- .../UserHistoryDrawer/ModeratorNote.css | 44 +- .../UserHistoryDrawer/RecentHistory.css | 40 +- .../components/UserHistoryDrawer/Tabs.css | 10 +- .../UserDrawerAccountHistory.css | 2 +- .../UserDrawerAccountHistoryQuery.css | 2 +- .../UserDrawerNotesContainer.css | 6 +- .../UserDrawerNotesQuery.css | 6 +- .../UserHistoryDrawer/UserHistoryDrawer.css | 2 +- .../UserHistoryDrawer/UserHistoryDrawer.tsx | 3 +- .../UserHistoryDrawerAllComments.css | 4 +- .../UserHistoryDrawerAllCommentsQuery.css | 4 +- .../UserHistoryDrawerContainer.css | 34 +- .../UserHistoryDrawerQuery.css | 2 +- .../UserHistoryDrawerRejectedComments.css | 4 +- ...UserHistoryDrawerRejectedCommentsQuery.css | 4 +- .../UserStatusDetailsContainer.css | 14 +- .../UsernameChangeAction.css | 4 +- .../UserRole/SiteModeratorModal.css | 4 +- .../components/UserRole/UserRoleText.css | 8 +- .../admin/components/UserStatus/BanModal.css | 10 +- .../UserStatus/ChangeStatusModal.css | 4 +- .../components/UserStatus/SuspendForm.css | 11 + .../components/UserStatus/SuspendModal.css | 37 ++ .../components/UserStatus/UserStatus.css | 18 +- .../UserStatus/UserStatusChange.css | 4 +- src/core/client/admin/index.tsx | 2 +- .../admin/routes/AuthCheck/NetworkError.tsx | 2 +- .../admin/routes/AuthCheck/Restricted.css | 52 +- .../admin/routes/Community/EmptyMessage.css | 8 +- .../Community/InviteUsers/InviteUsers.css | 2 +- .../Community/InviteUsers/InviteUsersForm.css | 10 +- .../InviteUsers/InviteUsersModal.css | 14 +- .../Community/InviteUsers/RoleField.css | 9 + .../routes/Community/InviteUsers/Success.css | 10 +- .../routes/Community/InviteUsers/Success.tsx | 6 +- .../client/admin/routes/Community/UserRow.css | 10 +- .../routes/Community/UserTableFilter.tsx | 5 +- .../admin/routes/Configure/ConfigBox.css | 8 +- .../client/admin/routes/Configure/Header.css | 12 +- .../admin/routes/Configure/HelperText.css | 10 +- .../admin/routes/Configure/HorizontalRule.css | 2 +- .../client/admin/routes/Configure/Link.css | 26 +- .../admin/routes/Configure/SectionContent.css | 4 +- .../admin/routes/Configure/Subheader.css | 14 +- .../Configure/TextFieldWithValidation.tsx | 2 +- .../routes/Configure/ValidationMessage.tsx | 1 - .../Advanced/AdvancedConfigContainer.tsx | 2 +- .../sections/Auth/AccountFeaturesConfig.css | 2 +- .../SSOSigningSecretRotation/DateField.css | 10 +- .../RotationDropdown.css | 2 +- .../SSOSigningSecretCard.css | 8 +- .../SSOSigningSecretRotation/StatusField.css | 34 +- .../General/AnnouncementFormModal.css | 14 +- .../General/AnnouncementFormModal.tsx | 7 +- .../sections/General/CommentLengthConfig.css | 10 +- .../General/GeneralConfigContainer.css | 2 +- .../General/GeneralConfigContainer.tsx | 2 +- .../sections/General/MediaLinksConfig.css | 8 +- .../Configure/sections/General/RTEConfig.css | 10 +- .../sections/General/ReactionConfig.css | 2 +- .../Moderation/ModerationConfigContainer.tsx | 2 +- .../RotateSigningSecretModal.css | 8 +- .../ExternalModerationPhaseRow.css | 8 +- .../ModerationPhases/StatusMarker.css | 14 +- .../Configure/sections/Slack/SlackChannel.css | 24 +- .../sections/Slack/SlackConfigContainer.css | 4 +- .../sections/Slack/SlackConfigRoute.tsx | 5 +- .../RotateSigningSecretModal.css | 8 +- .../EventsSelectField.tsx | 2 +- .../WebhookEndpoints/StatusMarker.css | 14 +- .../WebhookEndpoints/WebhookEndpointRow.css | 8 +- .../WordList/WordListConfigContainer.tsx | 2 +- .../routes/Dashboard/DashboardContainer.css | 16 +- .../Dashboard/DashboardSiteContainer.css | 2 +- .../Dashboard/components/DashboardBox.css | 6 +- .../components/DashboardComponentHeading.css | 6 +- .../components/SiteDashboardTimestamp.css | 10 +- .../components/SiteDashboardTimestamp.tsx | 2 +- .../components/TodayCompareValue.css | 6 +- .../components/TodayDashboardBox.css | 16 +- .../Dashboard/components/TodayValue.css | 10 +- .../Dashboard/sections/CommentActivity.css | 18 +- .../sections/CommentActivityTooltip.css | 24 +- .../Dashboard/sections/SignupActivity.css | 8 +- .../admin/routes/Dashboard/sections/Today.css | 26 +- .../routes/ForgotPassword/CheckEmail.tsx | 2 +- .../ForgotPasswordContainer.css | 13 +- .../ForgotPasswordContainer.tsx | 2 +- .../ForgotPassword/ForgotPasswordForm.tsx | 4 +- .../routes/Invite/InviteCompleteForm.tsx | 6 +- .../admin/routes/Invite/InviteLayout.tsx | 4 +- .../admin/routes/Invite/InviteRoute.tsx | 2 +- .../admin/routes/Invite/SetPasswordField.tsx | 2 +- .../admin/routes/Invite/SetUsernameField.tsx | 2 +- src/core/client/admin/routes/Invite/Sorry.tsx | 2 +- .../client/admin/routes/Invite/Success.css | 4 +- .../client/admin/routes/Invite/Success.tsx | 2 +- .../admin/routes/Login/CompleteAccountBox.css | 34 +- .../admin/routes/Login/CompleteAccountBox.tsx | 15 +- .../CompleteAccountBox.spec.tsx.snap | 15 +- .../views/AddEmailAddress/AddEmailAddress.tsx | 15 +- .../AddEmailAddress/ConfirmEmailField.tsx | 2 +- .../views/AddEmailAddress/EmailField.tsx | 2 +- .../UnorderedList/ListItem.tsx | 2 +- .../views/CreatePassword/CreatePassword.tsx | 15 +- .../views/CreatePassword/SetPasswordField.tsx | 6 +- .../views/CreateUsername/CreateUsername.tsx | 15 +- .../views/CreateUsername/UsernameField.tsx | 2 +- .../views/LinkAccount/HorizontalSeparator.css | 8 +- .../views/LinkAccount/HorizontalSeparator.tsx | 2 +- .../LinkAccount/LinkAccountContainer.tsx | 14 +- .../views/SignIn/HorizontalSeparator.css | 10 +- .../routes/Login/views/SignIn/SignIn.css | 16 +- .../Login/views/SignIn/SignInWithEmail.css | 16 +- .../routes/Login/views/SignIn/Version.css | 22 +- .../admin/routes/Moderate/HotkeysModal.css | 40 +- .../client/admin/routes/Moderate/Moderate.css | 2 +- .../routes/Moderate/ModerateSearchBar/Bar.css | 4 +- .../Moderate/ModerateSearchBar/Field.css | 36 +- .../Moderate/ModerateSearchBar/Group.css | 8 +- .../ModerateSearchBar/ModerateAllOption.css | 14 +- .../Moderate/ModerateSearchBar/Option.css | 22 +- .../ModerateSearchBar/OptionDetail.css | 6 +- .../ModerateSearchBar/SeeAllOption.css | 13 +- .../Moderate/ModerateSearchBar/variables.css | 38 +- .../routes/Moderate/Queue/EmptyMessage.css | 8 +- .../routes/Moderate/Queue/QueueWrapper.tsx | 5 +- .../SectionSelectorSection.css | 16 +- .../SingleModerate/SingleModerate.css | 14 +- .../Moderate/SiteSelector/SiteSelector.css | 1 + .../SiteSelectorCurrentSiteQuery.tsx | 3 +- .../SiteSelector/SiteSelectorSite.css | 16 +- src/core/client/admin/routes/NotFound.css | 8 +- .../admin/routes/Stories/EmptyMessage.css | 8 +- .../admin/routes/Stories/NoMatchMessage.css | 8 +- .../routes/Stories/SiteFilter/SiteFilter.css | 4 +- .../Stories/SiteFilter/SiteFilterOption.css | 6 +- .../Stories/SiteFilter/SiteFilterSelected.css | 2 +- .../client/admin/routes/Stories/StoryRow.css | 6 +- .../Stories/StoryStatus/StoryStatusText.css | 8 +- .../admin/routes/Stories/StoryTable.css | 6 +- .../addEmailAddress.spec.tsx.snap | 132 ++-- .../createPassword.spec.tsx.snap | 122 ++-- .../createUsername.spec.tsx.snap | 122 ++-- .../__snapshots__/linkAccount.spec.tsx.snap | 35 +- .../__snapshots__/general.spec.tsx.snap | 36 +- .../invite/__snapshots__/invite.spec.tsx.snap | 275 +++++++- .../client/auth/components/Header/Bar.css | 2 +- .../client/auth/components/Header/Bar.tsx | 2 +- .../client/auth/components/Header/SubBar.tsx | 2 +- .../auth/components/Header/Subtitle.css | 2 +- .../auth/components/Header/Subtitle.tsx | 2 +- .../client/auth/components/Header/Title.css | 2 +- .../client/auth/components/Header/Title.tsx | 2 +- .../auth/components/HorizontalSeparator.css | 16 - .../components/HorizontalSeparator.spec.tsx | 10 - .../auth/components/HorizontalSeparator.tsx | 18 - .../client/auth/components/OrSeparator.css | 14 +- .../client/auth/components/OrSeparator.tsx | 4 +- .../auth/components/SetPasswordField.css | 10 +- .../client/auth/components/UsernameField.css | 10 +- .../HorizontalSeparator.spec.tsx.snap | 18 - src/core/client/auth/index.tsx | 2 +- .../addEmailAddress.spec.tsx.snap | 10 +- .../createUsername.spec.tsx.snap | 6 +- .../forgotPassword.spec.tsx.snap | 2 +- .../test/__snapshots__/signIn.spec.tsx.snap | 4 +- .../test/__snapshots__/signUp.spec.tsx.snap | 8 +- .../views/AddEmailAddress/AddEmailAddress.css | 52 +- .../UnorderedList/ListItem.tsx | 2 +- .../views/CreatePassword/CreatePassword.css | 32 +- .../views/CreateUsername/CreateUsername.css | 32 +- .../auth/views/ForgotPassword/CheckEmail.css | 48 +- .../ForgotPassword/ForgotPasswordForm.css | 46 +- .../LinkAccount/LinkAccountContainer.css | 52 +- src/core/client/auth/views/SignIn/SignIn.css | 40 +- .../auth/views/SignIn/SignInWithEmail.css | 16 +- .../SignIn/__snapshots__/SignIn.spec.tsx.snap | 12 +- src/core/client/auth/views/SignUp/SignUp.css | 40 +- .../auth/views/SignUp/SignUpWithEmail.css | 6 +- .../SignUp/__snapshots__/SignUp.spec.tsx.snap | 6 +- .../framework/components/DurationField.tsx | 2 +- .../framework/components/FacebookButton.css | 10 +- .../framework/components/GoogleButton.css | 10 +- .../framework/components/LocaleField.tsx | 2 +- .../client/framework/components/Markdown.css | 42 +- .../framework/components/OIDCButton.css | 20 +- .../FacebookButton.spec.tsx.snap | 4 +- .../__snapshots__/GoogleButton.spec.tsx.snap | 4 +- .../__snapshots__/OIDCButton.spec.tsx.snap | 4 +- .../MarkdownEditor/MarkdownEditor.css | 39 +- .../framework/helpers/getModerationLink.ts | 4 +- .../framework/helpers/potentiallyInjectAxe.ts | 1 + .../framework/lib/bootstrap/CoralContext.tsx | 2 +- .../framework/lib/bootstrap/createManaged.tsx | 2 +- src/core/client/framework/lib/events.ts | 1 + .../lib/form/components/ValidationMessage.tsx | 8 +- .../lib/i18n/components/ExternalLink.css | 2 +- .../framework/lib/i18n/generateBundles.ts | 2 +- .../framework/lib/router/withRouteConfig.ts | 1 + src/core/client/framework/lib/validation.tsx | 10 + .../client/framework/utils/parseHashQuery.ts | 1 - src/core/client/install/App/App.css | 4 +- src/core/client/install/App/App.tsx | 2 +- src/core/client/install/App/Header.tsx | 2 +- src/core/client/install/App/MainBar.css | 10 +- src/core/client/install/App/MainBar.tsx | 2 +- src/core/client/install/App/Wizard.tsx | 2 +- .../install/App/steps/AddOrganizationStep.tsx | 12 +- .../client/install/App/steps/BackButton.tsx | 7 +- .../App/steps/CreateYourAccountStep.tsx | 16 +- .../client/install/App/steps/FinalStep.tsx | 6 +- .../client/install/App/steps/InitialStep.tsx | 6 +- .../client/install/App/steps/NextButton.tsx | 7 +- .../App/steps/PermittedDomainsStep.tsx | 9 +- .../install/App/steps/SelectLanguageStep.tsx | 6 +- src/core/client/install/index.tsx | 2 +- src/core/client/stream/App/App.css | 1 + src/core/client/stream/App/App.tsx | 2 +- src/core/client/stream/App/TabBar.css | 16 +- src/core/client/stream/common/Counter.ts | 2 +- .../client/stream/common/Media/OEmbed.css | 4 +- .../stream/common/MessageBox/MessageBox.css | 8 +- .../common/MessageBox/MessageBoxContent.css | 10 +- .../common/MessageBox/MessageBoxIcon.css | 2 +- .../common/MessageBox/MessageBoxIcon.tsx | 2 +- src/core/client/stream/common/Spinner.ts | 2 +- .../common/UserBox/UserBoxAuthenticated.css | 30 +- .../common/UserBox/UserBoxContainer.tsx | 2 +- .../common/UserBox/UserBoxUnauthenticated.css | 18 +- .../UserBoxAuthenticated.spec.tsx.snap | 2 +- .../UserBoxUnauthenticated.spec.tsx.snap | 12 +- src/core/client/stream/index.tsx | 2 +- src/core/client/stream/shared/htmlContent.css | 24 +- .../tabs/Comments/Comment/AnsweredTag.css | 4 +- .../stream/tabs/Comments/Comment/Comment.css | 12 +- .../stream/tabs/Comments/Comment/Comment.tsx | 2 +- .../Comments/Comment/CommentContainer.css | 12 +- .../tabs/Comments/Comment/CommentToggle.css | 18 +- .../EditCommentForm/EditCommentForm.css | 4 +- .../EditCommentForm/EditCommentMutation.ts | 2 +- .../tabs/Comments/Comment/EditedMarker.css | 10 +- .../tabs/Comments/Comment/FeaturedTag.css | 2 +- .../tabs/Comments/Comment/InReplyTo.css | 22 +- .../tabs/Comments/Comment/IndentedComment.css | 10 +- .../tabs/Comments/Comment/IndentedComment.tsx | 41 +- .../MediaConfirmation/MediaConfirmPrompt.css | 22 +- .../MediaConfirmation/MediaConfirmation.css | 20 +- .../MediaConfirmation/MediaPreview.css | 18 +- .../ModerationDropdown/CaretContainer.css | 6 +- .../ModerationActionBanContainer.css | 16 +- .../ModerationActionBanContainer.tsx | 3 +- .../ModerationActionsContainer.css | 36 +- .../RejectedTombstoneContainer.css | 2 +- .../PermalinkButton/PermalinkButton.css | 3 + .../PermalinkButton/PermalinkButton.tsx | 28 +- .../PermalinkButton/PermalinkPopover.css | 32 +- .../CreateCommentReactionMutation.ts | 2 +- .../Comment/ReactionButton/ReactionButton.css | 14 +- .../Comment/ReactionButton/ReactionButton.tsx | 62 +- .../tabs/Comments/Comment/ReplyButton.css | 4 +- .../tabs/Comments/Comment/ReplyButton.tsx | 29 +- .../ReplyCommentForm/ReplyCommentForm.css | 8 +- .../Comment/ReplyCommentForm/ReplyTo.css | 26 +- .../Comment/ReportFlow/ReportButton.css | 12 +- .../Comment/ReportFlow/ReportButton.tsx | 2 +- .../Comment/ReportFlow/ReportCommentForm.css | 72 ++- .../Comment/ReportFlow/ReportCommentForm.tsx | 51 +- .../tabs/Comments/Comment/RootParent.tsx | 2 +- .../Comments/Comment/ShowConversationLink.css | 6 +- .../tabs/Comments/Comment/TopBarLeft.spec.tsx | 2 +- .../tabs/Comments/Comment/TopBarLeft.tsx | 2 +- .../UserBanPopoverContainer.css | 24 +- .../UserIgnorePopoverContainer.css | 24 +- .../UserPopoverOverviewContainer.css | 12 +- .../Comments/Comment/UserTagsContainer.css | 6 +- .../Comments/Comment/Username/Username.css | 6 +- .../IndentedComment.spec.tsx.snap | 19 - .../__snapshots__/ReplyButton.spec.tsx.snap | 39 +- .../__snapshots__/TopBarLeft.spec.tsx.snap | 2 +- .../tabs/Comments/GifSelector/GifPreview.css | 6 +- .../tabs/Comments/GifSelector/GifSelector.css | 20 +- .../IgnoredTombstoneOrHideContainer.css | 24 +- .../client/stream/tabs/Comments/Indent.css | 18 +- .../ConversationThreadContainer.css | 16 +- .../Comments/PermalinkView/PermalinkView.css | 24 +- .../PermalinkView/PermalinkViewQuery.tsx | 3 +- .../PermalinkView/Timeline/Circle.css | 12 +- .../Comments/PermalinkView/Timeline/Line.css | 6 +- .../__snapshots__/PermalinkView.spec.tsx.snap | 8 +- .../PermalinkViewQuery.spec.tsx.snap | 2 +- .../client/stream/tabs/Comments/RTE/RTE.css | 24 +- .../client/stream/tabs/Comments/RTE/RTE.tsx | 3 +- .../RTE/__snapshots__/RTE.spec.tsx.snap | 2 +- .../RemainingCharacters.tsx | 2 +- .../tabs/Comments/ReplyList/ReplyList.css | 2 +- .../tabs/Comments/ReplyList/ReplyList.tsx | 5 +- .../__snapshots__/ReplyList.spec.tsx.snap | 2 + .../AllCommentsTabContainer.tsx | 6 +- .../AllCommentsTab/AllCommentsTabQuery.tsx | 3 +- .../Stream/AllCommentsTab/NoComments.tsx | 2 +- .../AllCommentsTab/SpinnerWhileRendering.tsx | 3 +- .../Stream/Announcement/Announcement.css | 16 +- .../Stream/Announcement/Announcement.tsx | 10 +- .../AnsweredCommentContainer.css | 10 +- .../AnsweredCommentContainer.tsx | 2 +- .../AnsweredCommentsContainer.tsx | 4 +- .../AnsweredCommentsQuery.tsx | 3 +- .../tabs/Comments/Stream/BannedInfo.css | 2 +- .../Stream/CommentForm/CommentForm.css | 4 +- .../CommunityGuidelines.css | 12 +- .../StreamDeletionRequestCalloutContainer.css | 2 +- .../Stream/FeaturedCommentTooltip.css | 2 +- .../FeaturedCommentContainer.css | 32 +- .../FeaturedCommentsContainer.tsx | 4 +- .../FeaturedCommentsQuery.tsx | 3 +- .../PostCommentForm/PostCommentForm.css | 10 +- .../PostCommentForm/PostCommentFormFake.css | 11 +- .../PostCommentForm/PostCommentFormFake.tsx | 3 +- .../PostCommentForm/PostCommentInput.css | 6 +- .../PostCommentRejectedMessage.css | 7 - .../PostCommentRejectedMessage.tsx | 30 +- .../stream/tabs/Comments/Stream/SortMenu.css | 20 +- .../tabs/Comments/Stream/SortMenu.spec.tsx | 2 +- .../tabs/Comments/Stream/StreamContainer.css | 20 +- .../tabs/Comments/Stream/StreamQuery.tsx | 3 +- .../Stream/SuspendedInfo/SuspendedInfo.css | 8 +- .../SpinnerWhileRendering.tsx | 3 +- .../UnansweredCommentsTabContainer.css | 2 +- .../UnansweredCommentsTabContainer.tsx | 6 +- .../UnansweredCommentsTabQuery.tsx | 3 +- .../AddMessage/AddMessageContainer.css | 6 +- .../Configure/AddMessage/AddMessageOpen.css | 10 +- .../Configure/AddMessage/MessageBoxConfig.tsx | 12 +- .../tabs/Configure/AddMessage/shared.css | 32 +- .../stream/tabs/Configure/ConfigureQuery.tsx | 3 +- .../ConfigureStream/ConfigureStream.css | 22 +- .../ConfigureStream/ToggleConfig.css | 6 +- .../UpdateStorySettingsMutation.ts | 2 +- .../WidthLimitedDescription.css | 12 +- .../LiveUpdatesConfig/DisableLiveUpdates.css | 32 +- .../LiveUpdatesConfig/EnableLiveUpdates.css | 32 +- .../LiveUpdatesConfigContainer.css | 6 +- .../OpenOrCloseStream/CloseStream.css | 26 +- .../OpenOrCloseStreamContainer.css | 6 +- .../OpenOrCloseStreamContainer.tsx | 4 +- .../OpenOrCloseStream/OpenStream.css | 26 +- .../stream/tabs/Configure/Q&A/DisableQA.css | 32 +- .../stream/tabs/Configure/Q&A/EnableQA.css | 32 +- .../tabs/Configure/Q&A/ExpertListItem.css | 32 +- .../tabs/Configure/Q&A/ExpertSearchItem.css | 26 +- .../tabs/Configure/Q&A/ExpertSearchList.css | 21 +- .../Q&A/ExpertSelectionContainer.css | 66 +- .../Q&A/ExpertSelectionContainer.tsx | 2 +- .../Configure/Q&A/ExpertSelectionQuery.tsx | 2 +- .../tabs/Configure/Q&A/NoLongerAnExpert.css | 30 +- .../tabs/Configure/Q&A/QAConfigContainer.css | 6 +- .../DeletionRequestCalloutContainer.css | 14 +- .../Profile/MyComments/CommentHistory.css | 40 +- .../MyComments/DownloadCommentsContainer.css | 44 +- .../Profile/MyComments/HistoryComment.css | 72 +-- .../MyComments/MyCommentsContainer.css | 2 +- .../Preferences/IgnoreUserListItem.css | 42 +- .../IgnoreUserSettingsContainer.css | 42 +- .../NotificationSettingsContainer.css | 48 +- .../stream/tabs/Profile/ProfileQuery.tsx | 3 +- .../Settings/AccountSettingsContainer.tsx | 4 +- .../ChangeEmail/ChangeEmailContainer.css | 66 +- .../tabs/Profile/Settings/ChangePassword.css | 38 +- .../Settings/ChangePasswordContainer.tsx | 2 +- .../ChangeUsernameContainer.css | 78 +-- .../ChangeUsername/UpdateUsernameMutation.tsx | 2 +- .../DeleteAccount/DeleteAccountContainer.css | 32 +- .../DeleteAccount/DeleteAccountModal.tsx | 2 +- .../DeleteAccountModalContents.tsx | 2 +- .../DeleteAccount/Pages/Common/Page.css | 64 +- .../DeleteAccount/Pages/ConfirmPage.css | 6 +- .../stream/tabs/Profile/Settings/Username.css | 10 +- .../renderFeaturedStream.spec.tsx.snap | 41 +- .../__snapshots__/permalinkView.spec.tsx.snap | 356 +++++----- ...permalinkViewLoadMoreParents.spec.tsx.snap | 390 +++++------ .../__snapshots__/editComment.spec.tsx.snap | 248 +++---- .../__snapshots__/loadMore.spec.tsx.snap | 126 ++-- .../__snapshots__/postComment.spec.tsx.snap | 61 +- .../postLocalReply.spec.tsx.snap | 347 +++++----- .../__snapshots__/postReply.spec.tsx.snap | 122 ++-- .../__snapshots__/reaction.spec.tsx.snap | 42 +- .../renderCommunityGuidelines.spec.tsx.snap | 127 ++-- .../renderMessageBox.spec.tsx.snap | 5 +- .../__snapshots__/renderReplies.spec.tsx.snap | 244 +++---- .../__snapshots__/renderStream.spec.tsx.snap | 127 ++-- .../__snapshots__/reportComment.spec.tsx.snap | 73 ++- .../showAllReplies.spec.tsx.snap | 65 +- .../showConversation.spec.tsx.snap | 61 +- .../__snapshots__/sortStream.spec.tsx.snap | 122 ++-- .../comments/stream/reportComment.spec.tsx | 8 +- .../client/stream/test/helpers/waitForRTE.ts | 3 +- .../components/AbsoluteTime/AbsoluteTime.css | 2 - .../components/AbsoluteTime/AbsoluteTime.tsx | 31 - .../ui/components/AbsoluteTime/index.ts | 1 - .../client/ui/components/AppBar/AppBar.css | 18 - .../ui/components/AppBar/AppBar.spec.tsx | 18 - .../client/ui/components/AppBar/AppBar.tsx | 38 -- .../client/ui/components/AppBar/Begin.css | 3 - .../ui/components/AppBar/Begin.spec.tsx | 17 - .../client/ui/components/AppBar/Begin.tsx | 27 - .../client/ui/components/AppBar/Divider.css | 4 - .../ui/components/AppBar/Divider.spec.tsx | 10 - .../client/ui/components/AppBar/Divider.tsx | 17 - src/core/client/ui/components/AppBar/End.css | 4 - .../client/ui/components/AppBar/End.spec.tsx | 17 - src/core/client/ui/components/AppBar/End.tsx | 27 - .../ui/components/AppBar/Navigation.css | 11 - .../ui/components/AppBar/Navigation.spec.tsx | 15 - .../ui/components/AppBar/Navigation.tsx | 24 - .../ui/components/AppBar/NavigationItem.css | 23 - .../components/AppBar/NavigationItem.spec.tsx | 20 - .../ui/components/AppBar/NavigationItem.tsx | 41 -- .../client/ui/components/AppBar/README.mdx | 37 -- .../AppBar/__snapshots__/AppBar.spec.tsx.snap | 19 - .../AppBar/__snapshots__/Begin.spec.tsx.snap | 15 - .../__snapshots__/Divider.spec.tsx.snap | 11 - .../AppBar/__snapshots__/End.spec.tsx.snap | 15 - .../__snapshots__/Navigation.spec.tsx.snap | 14 - .../NavigationItem.spec.tsx.snap | 19 - src/core/client/ui/components/AppBar/index.ts | 6 - .../ui/components/AriaInfo/AriaInfo.css | 10 - .../ui/components/AriaInfo/AriaInfo.spec.tsx | 14 - .../ui/components/AriaInfo/AriaInfo.tsx | 36 -- .../client/ui/components/AriaInfo/README.mdx | 18 - .../client/ui/components/AriaInfo/index.ts | 1 - .../ui/components/Backdrop/Backdrop.css | 15 - .../ui/components/Backdrop/Backdrop.spec.tsx | 16 - .../ui/components/Backdrop/Backdrop.tsx | 34 - .../client/ui/components/Backdrop/README.mdx | 32 - .../__snapshots__/Backdrop.spec.tsx.snap | 24 - .../client/ui/components/Backdrop/index.ts | 1 - .../ui/components/BaseButton/BaseButton.css | 10 - .../components/BaseButton/BaseButton.spec.tsx | 24 - .../ui/components/BaseButton/BaseButton.tsx | 99 --- .../ui/components/BaseButton/README.mdx | 28 - .../__snapshots__/BaseButton.spec.tsx.snap | 29 - .../client/ui/components/BaseButton/index.ts | 1 - src/core/client/ui/components/Box/Box.css | 240 ------- src/core/client/ui/components/Box/Box.tsx | 164 ----- src/core/client/ui/components/Box/README.mdx | 30 - src/core/client/ui/components/Box/index.ts | 1 - .../client/ui/components/Brand/BrandMark.css | 12 - .../client/ui/components/Brand/BrandMark.tsx | 44 -- .../client/ui/components/Brand/BrandName.css | 15 - .../ui/components/Brand/BrandName.spec.tsx | 17 - .../client/ui/components/Brand/BrandName.tsx | 45 -- .../ui/components/Brand/LogoHorizontal.css | 14 - .../ui/components/Brand/LogoHorizontal.tsx | 33 - .../client/ui/components/Brand/README.mdx | 20 - .../__snapshots__/BrandName.spec.tsx.snap | 16 - src/core/client/ui/components/Brand/index.ts | 3 - .../client/ui/components/Brand/logo@2x.png | Bin 9319 -> 0 bytes .../client/ui/components/Button/Button.css | 612 ------------------ .../ui/components/Button/Button.spec.tsx | 62 -- .../client/ui/components/Button/Button.tsx | 126 ---- .../ui/components/Button/ButtonIcon.css | 8 - .../ui/components/Button/ButtonIcon.spec.tsx | 30 - .../ui/components/Button/ButtonIcon.tsx | 38 -- .../client/ui/components/Button/README.mdx | 206 ------ .../Button/__snapshots__/Button.spec.tsx.snap | 51 -- .../__snapshots__/ButtonIcon.spec.tsx.snap | 19 - src/core/client/ui/components/Button/index.ts | 2 - .../client/ui/components/CallOut/CallOut.css | 49 -- .../ui/components/CallOut/CallOut.spec.tsx | 16 - .../client/ui/components/CallOut/CallOut.tsx | 73 --- .../client/ui/components/CallOut/README.mdx | 23 - .../__snapshots__/CallOut.spec.tsx.snap | 13 - .../client/ui/components/CallOut/index.ts | 1 - src/core/client/ui/components/Card/Card.css | 18 - .../client/ui/components/Card/Card.spec.tsx | 15 - src/core/client/ui/components/Card/Card.tsx | 39 -- .../client/ui/components/Card/CloseButton.css | 13 - .../client/ui/components/Card/CloseButton.tsx | 38 -- src/core/client/ui/components/Card/README.mdx | 37 -- .../Card/__snapshots__/Card.spec.tsx.snap | 9 - src/core/client/ui/components/Card/index.ts | 2 - .../client/ui/components/Check/CheckIcon.css | 2 - .../client/ui/components/Check/CheckIcon.tsx | 35 - src/core/client/ui/components/Check/index.ts | 1 - .../ui/components/CheckBox/CheckBox.css | 84 --- .../ui/components/CheckBox/CheckBox.spec.tsx | 17 - .../ui/components/CheckBox/CheckBox.tsx | 90 --- .../client/ui/components/CheckBox/README.mdx | 19 - .../__snapshots__/CheckBox.spec.tsx.snap | 26 - .../client/ui/components/CheckBox/index.ts | 2 - .../ClickOutside/ClickOutside.spec.tsx | 122 ---- .../components/ClickOutside/ClickOutside.tsx | 80 --- .../ui/components/ClickOutside/README.mdx | 30 - .../__snapshots__/ClickOutside.spec.tsx.snap | 3 - .../ui/components/ClickOutside/index.ts | 1 - .../client/ui/components/Counter/Counter.css | 44 -- .../ui/components/Counter/Counter.spec.tsx | 10 - .../client/ui/components/Counter/Counter.tsx | 54 -- .../client/ui/components/Counter/README.mdx | 34 - .../__snapshots__/Counter.spec.tsx.snap | 21 - .../client/ui/components/Counter/index.ts | 1 - .../client/ui/components/Delay/Delay.spec.tsx | 22 - src/core/client/ui/components/Delay/Delay.tsx | 37 -- .../client/ui/components/Delay/README.mdx | 22 - .../Delay/__snapshots__/Delay.spec.tsx.snap | 5 - src/core/client/ui/components/Delay/index.ts | 1 - .../client/ui/components/Dropdown/Button.css | 53 -- .../ui/components/Dropdown/Button.spec.tsx | 32 - .../client/ui/components/Dropdown/Button.tsx | 77 --- .../client/ui/components/Dropdown/Divider.css | 5 - .../ui/components/Dropdown/Divider.spec.tsx | 10 - .../client/ui/components/Dropdown/Divider.tsx | 17 - .../ui/components/Dropdown/Dropdown.css | 3 - .../ui/components/Dropdown/Dropdown.spec.tsx | 30 - .../ui/components/Dropdown/Dropdown.tsx | 27 - .../client/ui/components/Dropdown/README.mdx | 58 -- .../__snapshots__/Button.spec.tsx.snap | 44 -- .../__snapshots__/Divider.spec.tsx.snap | 11 - .../__snapshots__/Dropdown.spec.tsx.snap | 32 - .../client/ui/components/Dropdown/index.ts | 3 - .../ui/components/FieldSet/FieldSet.css | 4 - .../ui/components/FieldSet/FieldSet.spec.tsx | 14 - .../ui/components/FieldSet/FieldSet.tsx | 26 - .../client/ui/components/FieldSet/README.mdx | 10 - .../__snapshots__/FieldSet.spec.tsx.snap | 9 - .../client/ui/components/FieldSet/index.ts | 1 - src/core/client/ui/components/Flex/Flex.css | 574 ---------------- .../client/ui/components/Flex/Flex.spec.tsx | 68 -- src/core/client/ui/components/Flex/Flex.tsx | 119 ---- src/core/client/ui/components/Flex/README.mdx | 60 -- .../Flex/__snapshots__/Flex.spec.tsx.snap | 51 -- src/core/client/ui/components/Flex/index.ts | 1 - .../ui/components/FormField/FormField.css | 2 - .../components/FormField/FormField.spec.tsx | 25 - .../ui/components/FormField/FormField.tsx | 33 - .../client/ui/components/FormField/README.mdx | 22 - .../__snapshots__/FormField.spec.tsx.snap | 35 - .../client/ui/components/FormField/index.ts | 1 - .../HorizontalGutter/HorizontalGutter.css | 85 --- .../HorizontalGutter.spec.tsx | 22 - .../HorizontalGutter/HorizontalGutter.tsx | 72 --- .../ui/components/HorizontalGutter/README.mdx | 36 -- .../HorizontalGutter.spec.tsx.snap | 13 - .../ui/components/HorizontalGutter/index.ts | 1 - src/core/client/ui/components/Icon/Icon.css | 60 -- .../client/ui/components/Icon/Icon.spec.tsx | 23 - src/core/client/ui/components/Icon/Icon.tsx | 60 -- src/core/client/ui/components/Icon/README.mdx | 21 - .../Icon/__snapshots__/Icon.spec.tsx.snap | 19 - src/core/client/ui/components/Icon/index.ts | 1 - .../InputDescription/InputDescription.css | 2 - .../InputDescription.spec.tsx.snap | 9 - .../ui/components/InputLabel/InputLabel.css | 4 - .../components/InputLabel/InputLabel.spec.tsx | 16 - .../ui/components/InputLabel/InputLabel.tsx | 42 -- .../ui/components/InputLabel/README.mdx | 19 - .../__snapshots__/InputLabel.spec.tsx.snap | 9 - .../client/ui/components/InputLabel/index.ts | 1 - .../client/ui/components/Marker/Count.css | 10 - .../ui/components/Marker/Count.spec.tsx | 15 - .../client/ui/components/Marker/Count.tsx | 29 - .../client/ui/components/Marker/Marker.css | 38 -- .../ui/components/Marker/Marker.spec.tsx | 17 - .../client/ui/components/Marker/Marker.tsx | 47 -- .../client/ui/components/Marker/README.mdx | 43 -- .../Marker/__snapshots__/Count.spec.tsx.snap | 9 - .../Marker/__snapshots__/Marker.spec.tsx.snap | 9 - src/core/client/ui/components/Marker/index.ts | 2 - .../components/MatchMedia/MatchMedia.spec.tsx | 60 -- .../ui/components/MatchMedia/MatchMedia.tsx | 75 --- .../ui/components/MatchMedia/README.mdx | 40 -- .../__snapshots__/MatchMedia.spec.tsx.snap | 35 - .../client/ui/components/MatchMedia/index.ts | 1 - .../client/ui/components/Message/Message.css | 46 -- .../ui/components/Message/Message.spec.tsx | 25 - .../client/ui/components/Message/Message.tsx | 59 -- .../ui/components/Message/MessageIcon.css | 8 - .../ui/components/Message/MessageIcon.tsx | 36 -- .../client/ui/components/Message/README.mdx | 38 -- .../__snapshots__/Message.spec.tsx.snap | 23 - .../client/ui/components/Message/index.ts | 2 - src/core/client/ui/components/Modal/Modal.css | 31 - .../client/ui/components/Modal/Modal.mdx.css | 3 - .../client/ui/components/Modal/Modal.spec.tsx | 92 --- src/core/client/ui/components/Modal/Modal.tsx | 140 ---- .../client/ui/components/Modal/README.mdx | 66 -- .../Modal/__snapshots__/Modal.spec.tsx.snap | 49 -- src/core/client/ui/components/Modal/index.ts | 1 - .../ui/components/NoScroll/NoScroll.css | 3 - .../ui/components/NoScroll/NoScroll.spec.tsx | 54 -- .../ui/components/NoScroll/NoScroll.tsx | 41 -- .../client/ui/components/NoScroll/README.mdx | 35 - .../client/ui/components/NoScroll/index.ts | 1 - .../PasswordField/PasswordField.css | 62 -- .../PasswordField/PasswordField.spec.tsx | 18 - .../PasswordField/PasswordField.tsx | 162 ----- .../ui/components/PasswordField/README.mdx | 25 - .../__snapshots__/PasswordField.spec.tsx.snap | 73 --- .../ui/components/PasswordField/index.ts | 2 - .../client/ui/components/Popover/Arrow.css | 142 ---- .../client/ui/components/Popover/Arrow.tsx | 25 - .../client/ui/components/Popover/Popover.css | 30 - .../client/ui/components/Popover/Popover.tsx | 202 ------ .../client/ui/components/Popover/README.mdx | 88 --- .../client/ui/components/Popover/index.ts | 1 - .../ui/components/RadioButton/README.mdx | 20 - .../ui/components/RadioButton/RadioButton.css | 76 --- .../RadioButton/RadioButton.spec.tsx | 18 - .../ui/components/RadioButton/RadioButton.tsx | 89 --- .../__snapshots__/RadioButton.spec.tsx.snap | 23 - .../client/ui/components/RadioButton/index.ts | 2 - .../ui/components/RelativeTime/README.mdx | 17 - .../components/RelativeTime/RelativeTime.css | 2 - .../RelativeTime/RelativeTime.spec.tsx | 42 -- .../components/RelativeTime/RelativeTime.tsx | 43 -- .../__snapshots__/RelativeTime.spec.tsx.snap | 31 - .../ui/components/RelativeTime/index.ts | 1 - .../components/SelectField/OptGroup.spec.tsx | 15 - .../ui/components/SelectField/OptGroup.tsx | 12 - .../ui/components/SelectField/Option.spec.tsx | 17 - .../ui/components/SelectField/Option.tsx | 14 - .../ui/components/SelectField/README.mdx | 55 -- .../ui/components/SelectField/SelectField.css | 64 -- .../SelectField/SelectField.spec.tsx | 22 - .../ui/components/SelectField/SelectField.tsx | 93 --- .../__snapshots__/OptGroup.spec.tsx.snap | 9 - .../__snapshots__/Option.spec.tsx.snap | 11 - .../__snapshots__/SelectField.spec.tsx.snap | 30 - .../client/ui/components/SelectField/index.ts | 3 - .../client/ui/components/Spinner/README.mdx | 15 - .../client/ui/components/Spinner/Spinner.css | 63 -- .../ui/components/Spinner/Spinner.spec.tsx | 9 - .../client/ui/components/Spinner/Spinner.tsx | 68 -- .../__snapshots__/Spinner.spec.tsx.snap | 21 - .../client/ui/components/Spinner/index.ts | 1 - .../client/ui/components/Steps/Circle.css | 23 - .../client/ui/components/Steps/Circle.tsx | 25 - src/core/client/ui/components/Steps/Line.css | 12 - src/core/client/ui/components/Steps/Line.tsx | 22 - .../client/ui/components/Steps/README.mdx | 19 - src/core/client/ui/components/Steps/Step.css | 11 - src/core/client/ui/components/Steps/Step.tsx | 49 -- .../client/ui/components/Steps/StepBar.css | 6 - .../client/ui/components/Steps/StepBar.tsx | 43 -- src/core/client/ui/components/Steps/index.ts | 2 - .../ui/components/SubBar/Navigation.css | 21 - .../ui/components/SubBar/Navigation.spec.tsx | 15 - .../ui/components/SubBar/Navigation.tsx | 24 - .../ui/components/SubBar/NavigationItem.css | 30 - .../components/SubBar/NavigationItem.spec.tsx | 20 - .../ui/components/SubBar/NavigationItem.tsx | 41 -- .../client/ui/components/SubBar/README.mdx | 40 -- .../client/ui/components/SubBar/SubBar.css | 19 - .../ui/components/SubBar/SubBar.spec.tsx | 18 - .../client/ui/components/SubBar/SubBar.tsx | 44 -- .../__snapshots__/Navigation.spec.tsx.snap | 14 - .../NavigationItem.spec.tsx.snap | 19 - .../SubBar/__snapshots__/SubBar.spec.tsx.snap | 19 - src/core/client/ui/components/SubBar/index.ts | 3 - .../client/ui/components/Table/README.mdx | 36 -- src/core/client/ui/components/Table/Table.css | 8 - .../client/ui/components/Table/Table.spec.tsx | 32 - src/core/client/ui/components/Table/Table.tsx | 36 -- .../client/ui/components/Table/TableBody.css | 2 - .../client/ui/components/Table/TableBody.tsx | 31 - .../client/ui/components/Table/TableCell.css | 23 - .../client/ui/components/Table/TableCell.tsx | 44 -- .../client/ui/components/Table/TableHead.css | 5 - .../client/ui/components/Table/TableHead.tsx | 35 - .../client/ui/components/Table/TableRow.css | 15 - .../client/ui/components/Table/TableRow.tsx | 36 -- .../Table/__snapshots__/Table.spec.tsx.snap | 51 -- src/core/client/ui/components/Table/index.ts | 5 - src/core/client/ui/components/Tabs/README.mdx | 85 --- src/core/client/ui/components/Tabs/Tab.css | 59 -- .../client/ui/components/Tabs/Tab.spec.tsx | 9 - src/core/client/ui/components/Tabs/Tab.tsx | 79 --- src/core/client/ui/components/Tabs/TabBar.css | 14 - .../client/ui/components/Tabs/TabBar.spec.tsx | 34 - src/core/client/ui/components/Tabs/TabBar.tsx | 82 --- .../ui/components/Tabs/TabContent.spec.tsx | 31 - .../client/ui/components/Tabs/TabContent.tsx | 33 - .../ui/components/Tabs/TabPane.spec.tsx | 9 - .../client/ui/components/Tabs/TabPane.tsx | 30 - .../Tabs/__snapshots__/Tab.spec.tsx.snap | 24 - .../Tabs/__snapshots__/TabBar.spec.tsx.snap | 72 --- .../__snapshots__/TabContent.spec.tsx.snap | 12 - .../Tabs/__snapshots__/TabPane.spec.tsx.snap | 11 - src/core/client/ui/components/Tabs/index.ts | 4 - src/core/client/ui/components/Tag/README.mdx | 35 - src/core/client/ui/components/Tag/Tag.css | 50 -- .../client/ui/components/Tag/Tag.spec.tsx | 15 - src/core/client/ui/components/Tag/Tag.tsx | 45 -- .../Tag/__snapshots__/Tag.spec.tsx.snap | 9 - src/core/client/ui/components/Tag/index.ts | 1 - .../client/ui/components/TextField/README.mdx | 43 -- .../ui/components/TextField/TextField.css | 68 -- .../components/TextField/TextField.spec.tsx | 16 - .../ui/components/TextField/TextField.tsx | 132 ---- .../__snapshots__/TextField.spec.tsx.snap | 19 - .../client/ui/components/TextField/index.ts | 2 - .../client/ui/components/TextLink/README.mdx | 19 - .../ui/components/TextLink/TextLink.css | 10 - .../ui/components/TextLink/TextLink.spec.tsx | 14 - .../ui/components/TextLink/TextLink.tsx | 39 -- .../__snapshots__/TextLink.spec.tsx.snap | 10 - .../client/ui/components/TextLink/index.ts | 1 - .../ui/components/TileSelector/TileOption.css | 27 - .../ui/components/Timestamp/Timestamp.css | 7 - .../components/Timestamp/Timestamp.spec.tsx | 15 - .../ui/components/Timestamp/Timestamp.tsx | 59 -- .../__snapshots__/Timestamp.spec.tsx.snap | 13 - .../client/ui/components/Timestamp/index.ts | 1 - .../ui/components/ToggleShow/README.mdx | 26 - .../components/ToggleShow/ToggleShow.spec.tsx | 35 - .../ui/components/ToggleShow/ToggleShow.tsx | 33 - .../__snapshots__/ToggleShow.spec.tsx.snap | 24 - .../client/ui/components/Tooltip/Tooltip.css | 13 - .../client/ui/components/Tooltip/Tooltip.tsx | 62 -- .../ui/components/Tooltip/TooltipButton.css | 5 - .../ui/components/Tooltip/TooltipButton.tsx | 42 -- .../client/ui/components/Tooltip/index.ts | 2 - .../client/ui/components/TrapFocus/README.mdx | 27 - .../components/TrapFocus/TrapFocus.spec.tsx | 94 --- .../ui/components/TrapFocus/TrapFocus.tsx | 59 -- .../__snapshots__/TrapFocus.spec.tsx.snap | 23 - .../client/ui/components/TrapFocus/index.ts | 1 - .../ui/components/Typography/Typography.css | 153 ----- .../ui/components/UIContext/UIContext.ts | 25 - .../client/ui/components/UIContext/index.ts | 1 - .../components/ValidationMessage/README.mdx | 20 - .../ValidationMessage.spec.tsx | 15 - .../ValidationMessage/ValidationMessage.tsx | 43 -- .../ValidationMessage.spec.tsx.snap | 15 - .../ui/components/ValidationMessage/index.ts | 1 - src/core/client/ui/components/index.ts | 68 -- .../client/ui/components/v2/AppBar/AppBar.css | 4 +- .../client/ui/components/v2/AppBar/AppBar.tsx | 2 +- .../client/ui/components/v2/AppBar/Begin.tsx | 2 +- .../ui/components/v2/AppBar/Divider.css | 2 +- .../client/ui/components/v2/AppBar/End.tsx | 2 +- .../components/v2/AppBar/NavigationItem.css | 24 +- .../v2/AppNotification/AppNotification.css | 10 +- src/core/client/ui/components/v2/Box/Box.css | 144 ++--- src/core/client/ui/components/v2/Box/Box.tsx | 2 +- .../ui/components/v2/Brand/BrandName.css | 6 +- .../client/ui/components/v2/Button/Button.css | 226 +++---- .../ui/components/v2/CallOut/CallOut.css | 32 +- .../client/ui/components/v2/Card/Card.css | 4 +- .../ui/components/v2/CheckBox/CheckBox.css | 36 +- .../ui/components/v2/CheckIcon/CheckIcon.css | 5 + .../ui/components/v2/CheckIcon/CheckIcon.tsx | 31 + .../{Check => v2/CheckIcon}/README.mdx | 0 .../ui/components/v2/CheckIcon/index.ts | 1 + .../ui/components/v2/Counter/Counter.css | 32 +- .../ui/components/v2/Divider/Divider.css | 10 +- .../ui/components/v2/Dropdown/Button.css | 26 +- .../ui/components/v2/Dropdown/Divider.css | 2 +- .../v2/DurationField/DurationField.css | 6 +- .../v2/DurationField/DurationField.tsx | 2 +- .../client/ui/components/v2/Flex/Flex.css | 144 ++--- .../client/ui/components/v2/Flex/Flex.tsx | 2 +- .../ui/components/v2/FormField/FormField.tsx | 3 +- .../FormFieldDescription.css | 10 +- .../v2/FormFieldFooter/FormFieldFooter.css | 10 +- .../v2/FormFieldFooter/FormFieldFooter.tsx | 3 +- .../v2/FormFieldHeader/FormFieldHeader.tsx | 3 +- .../components/v2/HelperText/HelperText.css | 10 +- .../v2/HorizontalGutter/HorizontalGutter.tsx | 2 +- .../v2/HorizontalRule/HorizontalRule.css | 2 +- .../client/ui/components/v2/Icon/Icon.css | 28 +- .../v2/InputDescription/InputDescription.css | 8 + .../InputDescription.spec.tsx | 0 .../InputDescription/InputDescription.tsx | 15 +- .../{ => v2}/InputDescription/README.mdx | 0 .../InputDescription.spec.tsx.snap} | 4 +- .../{ => v2}/InputDescription/index.ts | 0 .../components/v2/InputLabel/InputLabel.css | 10 +- .../client/ui/components/v2/Label/Label.css | 10 +- .../ui/components/v2/ListGroup/ListGroup.css | 2 +- .../components/v2/ListGroup/ListGroupRow.css | 4 +- .../client/ui/components/v2/Marker/Count.css | 4 +- .../client/ui/components/v2/Marker/Marker.css | 10 +- .../components/v2/MatchMedia/MatchMedia.tsx | 12 +- .../ui/components/v2/Message/Message.css | 30 +- .../ui/components/v2/Message/MessageIcon.tsx | 3 +- .../client/ui/components/v2/Modal/Modal.css | 2 +- .../ui/components/v2/Modal/ModalHeader.css | 4 +- .../v2/PasswordField/PasswordField.css | 83 +-- .../v2/PasswordField/PasswordField.tsx | 3 +- .../client/ui/components/v2/Popover/Arrow.css | 8 +- .../ui/components/v2/Popover/Popover.css | 12 +- .../ui/components/v2/Popover/Popover.tsx | 4 +- .../ui/components/{ => v2}/Popup/Popup.ts | 0 .../ui/components/{ => v2}/Popup/README.mdx | 0 .../ui/components/{ => v2}/Popup/index.ts | 0 .../components/v2/RadioButton/RadioButton.css | 30 +- .../components/v2/RadioButton/RadioButton.tsx | 2 +- .../v2/SelectField/OptGroup.spec.tsx | 1 + .../components/v2/SelectField/Option.spec.tsx | 1 + .../components/v2/SelectField/SelectField.css | 29 +- .../v2/SelectField/SelectField.spec.tsx | 1 + .../components/v2/SelectField/SelectField.tsx | 10 +- .../ui/components/v2/Spinner/Spinner.css | 6 +- .../client/ui/components/v2/Steps/Circle.css | 10 +- .../client/ui/components/v2/Steps/Line.css | 4 +- .../client/ui/components/v2/Steps/Step.css | 10 +- .../components/v2/SubBar/NavigationItem.css | 12 +- .../client/ui/components/v2/SubBar/SubBar.css | 4 +- .../client/ui/components/v2/SubBar/SubBar.tsx | 2 +- .../ui/components/v2/Table/Table.spec.tsx | 2 +- .../ui/components/v2/Table/TableCell.css | 22 +- .../ui/components/v2/Table/TableHead.css | 2 +- .../ui/components/v2/Table/TableRow.css | 4 +- src/core/client/ui/components/v2/Tabs/Tab.css | 88 +-- .../client/ui/components/v2/Tabs/TabBar.css | 6 +- src/core/client/ui/components/v2/Tag/Tag.css | 36 +- .../ui/components/v2/TextField/TextField.css | 44 +- .../ui/components/v2/TextField/TextField.tsx | 1 + .../TextFieldAdornment/TextFieldAdornment.css | 10 +- .../ui/components/v2/TextLink/TextLink.css | 2 +- .../ui/components/v2/TextLink/TextLink.tsx | 2 +- .../ui/components/v2/Textarea/Textarea.css | 27 +- .../{ => v2}/TileSelector/README.mdx | 2 +- .../components/v2/TileSelector/TileOption.css | 31 + .../{ => v2}/TileSelector/TileOption.tsx | 0 .../{ => v2}/TileSelector/TileSelector.css | 0 .../{ => v2}/TileSelector/TileSelector.tsx | 2 +- .../components/{ => v2}/TileSelector/index.ts | 0 .../ui/components/v2/Timestamp/Timestamp.css | 10 +- .../ui/components/v2/Tooltip/Tooltip.css | 20 +- .../ui/components/v2/Tooltip/Tooltip.tsx | 3 +- .../components/v2/Tooltip/TooltipButton.css | 2 +- .../components/v2/Tooltip/TooltipButton.tsx | 3 +- .../components/{ => v2}/Typography/README.mdx | 2 +- .../components/v2/Typography/Typography.css | 232 +++++++ .../{ => v2}/Typography/Typography.spec.tsx | 0 .../{ => v2}/Typography/Typography.tsx | 5 +- .../__snapshots__/Typography.spec.tsx.snap | 0 .../components/{ => v2}/Typography/index.ts | 0 src/core/client/ui/components/v2/index.ts | 7 +- .../client/ui/components/v3/Button/Button.css | 274 ++++---- .../client/ui/components/v3/Button/Button.tsx | 14 +- .../ui/components/v3/CallOut/CallOut.css | 74 +-- .../v3/ExperimentalTag/ExperimentalTag.css | 26 +- .../ui/components/v3/Tombstone/Tombstone.css | 14 +- .../ValidationMessage/ValidationMessage.css | 14 +- .../ValidationMessage/ValidationMessage.tsx | 23 +- src/core/client/ui/hooks/useDateTimeFormat.ts | 2 +- src/core/client/ui/shared/buttonReset.css | 37 -- src/core/client/ui/shared/typography.css | 384 ----------- src/core/client/ui/theme/admin.css.ts | 41 ++ src/core/client/ui/theme/adminVariables.ts | 22 + src/core/client/ui/theme/breakpoints.ts | 9 + src/core/client/ui/theme/colors.ts | 87 +++ src/core/client/ui/theme/compatibility.ts | 7 + src/core/client/ui/theme/mixins.css | 122 ---- src/core/client/ui/theme/sassLikeVariables.ts | 8 + src/core/client/ui/theme/sharedVariables.ts | 143 ++++ src/core/client/ui/theme/stream.css.ts | 41 ++ src/core/client/ui/theme/streamVariables.ts | 24 + src/core/client/ui/theme/typography.css | 154 +++++ src/core/client/ui/theme/variables.css.ts | 47 -- src/core/client/ui/theme/variables.ts | 156 ----- src/core/client/ui/theme/variables2.ts | 202 ------ src/core/client/ui/theme/zIndex.ts | 6 + src/core/common/utils/isBeforeDate.spec.ts | 1 + .../app/handlers/api/account/confirm.ts | 3 +- src/core/server/app/handlers/api/install.ts | 1 - src/core/server/app/handlers/api/version.ts | 3 +- src/core/server/app/helpers/entrypoints.ts | 3 +- .../middleware/graphql/graphqlMiddleware.ts | 5 +- .../graphql/persistedQueryMiddleware.ts | 3 +- .../middleware/passport/strategies/local.ts | 2 +- src/core/server/app/router/index.ts | 1 - src/core/server/app/url.spec.ts | 3 +- src/core/server/app/url.ts | 3 +- src/core/server/cron/notificationDigesting.ts | 3 +- src/core/server/errors/index.spec.ts | 2 +- .../server/events/listeners/slack/slack.ts | 4 +- .../extensions/ErrorWrappingExtension.ts | 1 + .../graph/loaders/CommentModerationActions.ts | 3 +- src/core/server/graph/loaders/Users.ts | 11 +- src/core/server/graph/mutators/Sites.ts | 5 +- src/core/server/graph/resolvers/BanStatus.ts | 3 +- .../graph/resolvers/BanStatusHistory.ts | 3 +- .../server/graph/resolvers/CloseCommenting.ts | 3 +- .../server/graph/resolvers/CommentRevision.ts | 3 +- .../graph/resolvers/DisableCommenting.ts | 3 +- src/core/server/graph/resolvers/Flag.ts | 3 +- src/core/server/graph/resolvers/Invite.ts | 3 +- .../server/graph/resolvers/ModerationQueue.ts | 1 + .../server/graph/resolvers/ModeratorNote.ts | 3 +- .../server/graph/resolvers/PremodStatus.ts | 3 +- .../graph/resolvers/PremodStatusHistory.ts | 3 +- src/core/server/graph/resolvers/Profile.ts | 3 +- .../graph/resolvers/SuspensionStatus.ts | 3 +- .../resolvers/SuspensionStatusHistory.ts | 3 +- src/core/server/graph/resolvers/Tag.ts | 3 +- src/core/server/graph/resolvers/UserStatus.ts | 3 +- .../server/graph/resolvers/UsernameHistory.ts | 3 +- .../server/graph/resolvers/UsernameStatus.ts | 3 +- src/core/server/graph/scalars/locale.ts | 3 +- src/core/server/logger/serializers.ts | 2 +- src/core/server/logger/streams/index.ts | 3 +- src/core/server/models/action/comment.ts | 19 +- .../models/action/moderation/comment.ts | 3 +- src/core/server/models/helpers/query.ts | 1 - src/core/server/models/invite.ts | 3 +- src/core/server/queue/tasks/mailer/content.ts | 2 +- src/core/server/services/comments/actions.ts | 1 + src/core/server/services/comments/comments.ts | 3 +- .../comments/moderation/counts.spec.ts | 1 + .../comments/pipeline/phases/detectLinks.ts | 9 +- .../comments/pipeline/phases/preModerate.ts | 9 +- .../pipeline/phases/preModerateUser.ts | 3 +- .../pipeline/phases/premodNewCommenter.ts | 9 +- .../pipeline/phases/recentCommentHistory.ts | 9 +- .../pipeline/phases/storyClosed.spec.ts | 3 +- .../comments/pipeline/pipeline.spec.ts | 3 +- .../server/services/i18n/translation.spec.ts | 2 +- src/core/server/services/jwt/index.ts | 1 - .../services/migrate/migration_sample.ts | 1 - .../server/services/notifications/context.ts | 3 +- src/core/server/services/users/auth/reset.ts | 4 +- src/index.ts | 9 +- src/locales/en-US/stream.ftl | 1 + src/types/postcss-js.d.ts | 1 + 999 files changed, 7189 insertions(+), 17786 deletions(-) create mode 100644 CSS_VARIABLES.md create mode 100644 scripts/generateCSSVariablesDocs.ts create mode 100644 src/core/client/admin/components/UserStatus/SuspendModal.css create mode 100644 src/core/client/admin/routes/Community/InviteUsers/RoleField.css delete mode 100644 src/core/client/auth/components/HorizontalSeparator.css delete mode 100644 src/core/client/auth/components/HorizontalSeparator.spec.tsx delete mode 100644 src/core/client/auth/components/HorizontalSeparator.tsx delete mode 100644 src/core/client/auth/components/__snapshots__/HorizontalSeparator.spec.tsx.snap create mode 100644 src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkButton.css delete mode 100644 src/core/client/stream/tabs/Comments/Stream/PostCommentForm/PostCommentRejectedMessage.css delete mode 100644 src/core/client/ui/components/AbsoluteTime/AbsoluteTime.css delete mode 100644 src/core/client/ui/components/AbsoluteTime/AbsoluteTime.tsx delete mode 100644 src/core/client/ui/components/AbsoluteTime/index.ts delete mode 100644 src/core/client/ui/components/AppBar/AppBar.css delete mode 100644 src/core/client/ui/components/AppBar/AppBar.spec.tsx delete mode 100644 src/core/client/ui/components/AppBar/AppBar.tsx delete mode 100644 src/core/client/ui/components/AppBar/Begin.css delete mode 100644 src/core/client/ui/components/AppBar/Begin.spec.tsx delete mode 100644 src/core/client/ui/components/AppBar/Begin.tsx delete mode 100644 src/core/client/ui/components/AppBar/Divider.css delete mode 100644 src/core/client/ui/components/AppBar/Divider.spec.tsx delete mode 100644 src/core/client/ui/components/AppBar/Divider.tsx delete mode 100644 src/core/client/ui/components/AppBar/End.css delete mode 100644 src/core/client/ui/components/AppBar/End.spec.tsx delete mode 100644 src/core/client/ui/components/AppBar/End.tsx delete mode 100644 src/core/client/ui/components/AppBar/Navigation.css delete mode 100644 src/core/client/ui/components/AppBar/Navigation.spec.tsx delete mode 100644 src/core/client/ui/components/AppBar/Navigation.tsx delete mode 100644 src/core/client/ui/components/AppBar/NavigationItem.css delete mode 100644 src/core/client/ui/components/AppBar/NavigationItem.spec.tsx delete mode 100644 src/core/client/ui/components/AppBar/NavigationItem.tsx delete mode 100644 src/core/client/ui/components/AppBar/README.mdx delete mode 100644 src/core/client/ui/components/AppBar/__snapshots__/AppBar.spec.tsx.snap delete mode 100644 src/core/client/ui/components/AppBar/__snapshots__/Begin.spec.tsx.snap delete mode 100644 src/core/client/ui/components/AppBar/__snapshots__/Divider.spec.tsx.snap delete mode 100644 src/core/client/ui/components/AppBar/__snapshots__/End.spec.tsx.snap delete mode 100644 src/core/client/ui/components/AppBar/__snapshots__/Navigation.spec.tsx.snap delete mode 100644 src/core/client/ui/components/AppBar/__snapshots__/NavigationItem.spec.tsx.snap delete mode 100644 src/core/client/ui/components/AppBar/index.ts delete mode 100644 src/core/client/ui/components/AriaInfo/AriaInfo.css delete mode 100644 src/core/client/ui/components/AriaInfo/AriaInfo.spec.tsx delete mode 100644 src/core/client/ui/components/AriaInfo/AriaInfo.tsx delete mode 100644 src/core/client/ui/components/AriaInfo/README.mdx delete mode 100644 src/core/client/ui/components/AriaInfo/index.ts delete mode 100644 src/core/client/ui/components/Backdrop/Backdrop.css delete mode 100644 src/core/client/ui/components/Backdrop/Backdrop.spec.tsx delete mode 100644 src/core/client/ui/components/Backdrop/Backdrop.tsx delete mode 100644 src/core/client/ui/components/Backdrop/README.mdx delete mode 100644 src/core/client/ui/components/Backdrop/__snapshots__/Backdrop.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Backdrop/index.ts delete mode 100644 src/core/client/ui/components/BaseButton/BaseButton.css delete mode 100644 src/core/client/ui/components/BaseButton/BaseButton.spec.tsx delete mode 100644 src/core/client/ui/components/BaseButton/BaseButton.tsx delete mode 100644 src/core/client/ui/components/BaseButton/README.mdx delete mode 100644 src/core/client/ui/components/BaseButton/__snapshots__/BaseButton.spec.tsx.snap delete mode 100644 src/core/client/ui/components/BaseButton/index.ts delete mode 100644 src/core/client/ui/components/Box/Box.css delete mode 100644 src/core/client/ui/components/Box/Box.tsx delete mode 100644 src/core/client/ui/components/Box/README.mdx delete mode 100644 src/core/client/ui/components/Box/index.ts delete mode 100644 src/core/client/ui/components/Brand/BrandMark.css delete mode 100644 src/core/client/ui/components/Brand/BrandMark.tsx delete mode 100644 src/core/client/ui/components/Brand/BrandName.css delete mode 100644 src/core/client/ui/components/Brand/BrandName.spec.tsx delete mode 100644 src/core/client/ui/components/Brand/BrandName.tsx delete mode 100644 src/core/client/ui/components/Brand/LogoHorizontal.css delete mode 100644 src/core/client/ui/components/Brand/LogoHorizontal.tsx delete mode 100644 src/core/client/ui/components/Brand/README.mdx delete mode 100644 src/core/client/ui/components/Brand/__snapshots__/BrandName.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Brand/index.ts delete mode 100644 src/core/client/ui/components/Brand/logo@2x.png delete mode 100644 src/core/client/ui/components/Button/Button.css delete mode 100644 src/core/client/ui/components/Button/Button.spec.tsx delete mode 100644 src/core/client/ui/components/Button/Button.tsx delete mode 100644 src/core/client/ui/components/Button/ButtonIcon.css delete mode 100644 src/core/client/ui/components/Button/ButtonIcon.spec.tsx delete mode 100644 src/core/client/ui/components/Button/ButtonIcon.tsx delete mode 100644 src/core/client/ui/components/Button/README.mdx delete mode 100644 src/core/client/ui/components/Button/__snapshots__/Button.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Button/__snapshots__/ButtonIcon.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Button/index.ts delete mode 100644 src/core/client/ui/components/CallOut/CallOut.css delete mode 100644 src/core/client/ui/components/CallOut/CallOut.spec.tsx delete mode 100644 src/core/client/ui/components/CallOut/CallOut.tsx delete mode 100644 src/core/client/ui/components/CallOut/README.mdx delete mode 100644 src/core/client/ui/components/CallOut/__snapshots__/CallOut.spec.tsx.snap delete mode 100644 src/core/client/ui/components/CallOut/index.ts delete mode 100644 src/core/client/ui/components/Card/Card.css delete mode 100644 src/core/client/ui/components/Card/Card.spec.tsx delete mode 100644 src/core/client/ui/components/Card/Card.tsx delete mode 100644 src/core/client/ui/components/Card/CloseButton.css delete mode 100644 src/core/client/ui/components/Card/CloseButton.tsx delete mode 100644 src/core/client/ui/components/Card/README.mdx delete mode 100644 src/core/client/ui/components/Card/__snapshots__/Card.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Card/index.ts delete mode 100644 src/core/client/ui/components/Check/CheckIcon.css delete mode 100644 src/core/client/ui/components/Check/CheckIcon.tsx delete mode 100644 src/core/client/ui/components/Check/index.ts delete mode 100644 src/core/client/ui/components/CheckBox/CheckBox.css delete mode 100644 src/core/client/ui/components/CheckBox/CheckBox.spec.tsx delete mode 100644 src/core/client/ui/components/CheckBox/CheckBox.tsx delete mode 100644 src/core/client/ui/components/CheckBox/README.mdx delete mode 100644 src/core/client/ui/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap delete mode 100644 src/core/client/ui/components/CheckBox/index.ts delete mode 100644 src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx delete mode 100644 src/core/client/ui/components/ClickOutside/ClickOutside.tsx delete mode 100644 src/core/client/ui/components/ClickOutside/README.mdx delete mode 100644 src/core/client/ui/components/ClickOutside/__snapshots__/ClickOutside.spec.tsx.snap delete mode 100644 src/core/client/ui/components/ClickOutside/index.ts delete mode 100644 src/core/client/ui/components/Counter/Counter.css delete mode 100644 src/core/client/ui/components/Counter/Counter.spec.tsx delete mode 100644 src/core/client/ui/components/Counter/Counter.tsx delete mode 100644 src/core/client/ui/components/Counter/README.mdx delete mode 100644 src/core/client/ui/components/Counter/__snapshots__/Counter.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Counter/index.ts delete mode 100644 src/core/client/ui/components/Delay/Delay.spec.tsx delete mode 100644 src/core/client/ui/components/Delay/Delay.tsx delete mode 100644 src/core/client/ui/components/Delay/README.mdx delete mode 100644 src/core/client/ui/components/Delay/__snapshots__/Delay.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Delay/index.ts delete mode 100644 src/core/client/ui/components/Dropdown/Button.css delete mode 100644 src/core/client/ui/components/Dropdown/Button.spec.tsx delete mode 100644 src/core/client/ui/components/Dropdown/Button.tsx delete mode 100644 src/core/client/ui/components/Dropdown/Divider.css delete mode 100644 src/core/client/ui/components/Dropdown/Divider.spec.tsx delete mode 100644 src/core/client/ui/components/Dropdown/Divider.tsx delete mode 100644 src/core/client/ui/components/Dropdown/Dropdown.css delete mode 100644 src/core/client/ui/components/Dropdown/Dropdown.spec.tsx delete mode 100644 src/core/client/ui/components/Dropdown/Dropdown.tsx delete mode 100644 src/core/client/ui/components/Dropdown/README.mdx delete mode 100644 src/core/client/ui/components/Dropdown/__snapshots__/Button.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Dropdown/__snapshots__/Divider.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Dropdown/__snapshots__/Dropdown.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Dropdown/index.ts delete mode 100644 src/core/client/ui/components/FieldSet/FieldSet.css delete mode 100644 src/core/client/ui/components/FieldSet/FieldSet.spec.tsx delete mode 100644 src/core/client/ui/components/FieldSet/FieldSet.tsx delete mode 100644 src/core/client/ui/components/FieldSet/README.mdx delete mode 100644 src/core/client/ui/components/FieldSet/__snapshots__/FieldSet.spec.tsx.snap delete mode 100644 src/core/client/ui/components/FieldSet/index.ts delete mode 100644 src/core/client/ui/components/Flex/Flex.css delete mode 100644 src/core/client/ui/components/Flex/Flex.spec.tsx delete mode 100644 src/core/client/ui/components/Flex/Flex.tsx delete mode 100644 src/core/client/ui/components/Flex/README.mdx delete mode 100644 src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Flex/index.ts delete mode 100644 src/core/client/ui/components/FormField/FormField.css delete mode 100644 src/core/client/ui/components/FormField/FormField.spec.tsx delete mode 100644 src/core/client/ui/components/FormField/FormField.tsx delete mode 100644 src/core/client/ui/components/FormField/README.mdx delete mode 100644 src/core/client/ui/components/FormField/__snapshots__/FormField.spec.tsx.snap delete mode 100644 src/core/client/ui/components/FormField/index.ts delete mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.css delete mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.spec.tsx delete mode 100644 src/core/client/ui/components/HorizontalGutter/HorizontalGutter.tsx delete mode 100644 src/core/client/ui/components/HorizontalGutter/README.mdx delete mode 100644 src/core/client/ui/components/HorizontalGutter/__snapshots__/HorizontalGutter.spec.tsx.snap delete mode 100644 src/core/client/ui/components/HorizontalGutter/index.ts delete mode 100644 src/core/client/ui/components/Icon/Icon.css delete mode 100644 src/core/client/ui/components/Icon/Icon.spec.tsx delete mode 100644 src/core/client/ui/components/Icon/Icon.tsx delete mode 100644 src/core/client/ui/components/Icon/README.mdx delete mode 100644 src/core/client/ui/components/Icon/__snapshots__/Icon.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Icon/index.ts delete mode 100644 src/core/client/ui/components/InputDescription/InputDescription.css delete mode 100644 src/core/client/ui/components/InputDescription/__snapshots__/InputDescription.spec.tsx.snap delete mode 100644 src/core/client/ui/components/InputLabel/InputLabel.css delete mode 100644 src/core/client/ui/components/InputLabel/InputLabel.spec.tsx delete mode 100644 src/core/client/ui/components/InputLabel/InputLabel.tsx delete mode 100644 src/core/client/ui/components/InputLabel/README.mdx delete mode 100644 src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap delete mode 100644 src/core/client/ui/components/InputLabel/index.ts delete mode 100644 src/core/client/ui/components/Marker/Count.css delete mode 100644 src/core/client/ui/components/Marker/Count.spec.tsx delete mode 100644 src/core/client/ui/components/Marker/Count.tsx delete mode 100644 src/core/client/ui/components/Marker/Marker.css delete mode 100644 src/core/client/ui/components/Marker/Marker.spec.tsx delete mode 100644 src/core/client/ui/components/Marker/Marker.tsx delete mode 100644 src/core/client/ui/components/Marker/README.mdx delete mode 100644 src/core/client/ui/components/Marker/__snapshots__/Count.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Marker/__snapshots__/Marker.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Marker/index.ts delete mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx delete mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.tsx delete mode 100644 src/core/client/ui/components/MatchMedia/README.mdx delete mode 100644 src/core/client/ui/components/MatchMedia/__snapshots__/MatchMedia.spec.tsx.snap delete mode 100644 src/core/client/ui/components/MatchMedia/index.ts delete mode 100644 src/core/client/ui/components/Message/Message.css delete mode 100644 src/core/client/ui/components/Message/Message.spec.tsx delete mode 100644 src/core/client/ui/components/Message/Message.tsx delete mode 100644 src/core/client/ui/components/Message/MessageIcon.css delete mode 100644 src/core/client/ui/components/Message/MessageIcon.tsx delete mode 100644 src/core/client/ui/components/Message/README.mdx delete mode 100644 src/core/client/ui/components/Message/__snapshots__/Message.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Message/index.ts delete mode 100644 src/core/client/ui/components/Modal/Modal.css delete mode 100644 src/core/client/ui/components/Modal/Modal.mdx.css delete mode 100644 src/core/client/ui/components/Modal/Modal.spec.tsx delete mode 100644 src/core/client/ui/components/Modal/Modal.tsx delete mode 100644 src/core/client/ui/components/Modal/README.mdx delete mode 100644 src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Modal/index.ts delete mode 100644 src/core/client/ui/components/NoScroll/NoScroll.css delete mode 100644 src/core/client/ui/components/NoScroll/NoScroll.spec.tsx delete mode 100644 src/core/client/ui/components/NoScroll/NoScroll.tsx delete mode 100644 src/core/client/ui/components/NoScroll/README.mdx delete mode 100644 src/core/client/ui/components/NoScroll/index.ts delete mode 100644 src/core/client/ui/components/PasswordField/PasswordField.css delete mode 100644 src/core/client/ui/components/PasswordField/PasswordField.spec.tsx delete mode 100644 src/core/client/ui/components/PasswordField/PasswordField.tsx delete mode 100644 src/core/client/ui/components/PasswordField/README.mdx delete mode 100644 src/core/client/ui/components/PasswordField/__snapshots__/PasswordField.spec.tsx.snap delete mode 100644 src/core/client/ui/components/PasswordField/index.ts delete mode 100644 src/core/client/ui/components/Popover/Arrow.css delete mode 100644 src/core/client/ui/components/Popover/Arrow.tsx delete mode 100644 src/core/client/ui/components/Popover/Popover.css delete mode 100644 src/core/client/ui/components/Popover/Popover.tsx delete mode 100644 src/core/client/ui/components/Popover/README.mdx delete mode 100644 src/core/client/ui/components/Popover/index.ts delete mode 100644 src/core/client/ui/components/RadioButton/README.mdx delete mode 100644 src/core/client/ui/components/RadioButton/RadioButton.css delete mode 100644 src/core/client/ui/components/RadioButton/RadioButton.spec.tsx delete mode 100644 src/core/client/ui/components/RadioButton/RadioButton.tsx delete mode 100644 src/core/client/ui/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap delete mode 100644 src/core/client/ui/components/RadioButton/index.ts delete mode 100644 src/core/client/ui/components/RelativeTime/README.mdx delete mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.css delete mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.spec.tsx delete mode 100644 src/core/client/ui/components/RelativeTime/RelativeTime.tsx delete mode 100644 src/core/client/ui/components/RelativeTime/__snapshots__/RelativeTime.spec.tsx.snap delete mode 100644 src/core/client/ui/components/RelativeTime/index.ts delete mode 100644 src/core/client/ui/components/SelectField/OptGroup.spec.tsx delete mode 100644 src/core/client/ui/components/SelectField/OptGroup.tsx delete mode 100644 src/core/client/ui/components/SelectField/Option.spec.tsx delete mode 100644 src/core/client/ui/components/SelectField/Option.tsx delete mode 100644 src/core/client/ui/components/SelectField/README.mdx delete mode 100644 src/core/client/ui/components/SelectField/SelectField.css delete mode 100644 src/core/client/ui/components/SelectField/SelectField.spec.tsx delete mode 100644 src/core/client/ui/components/SelectField/SelectField.tsx delete mode 100644 src/core/client/ui/components/SelectField/__snapshots__/OptGroup.spec.tsx.snap delete mode 100644 src/core/client/ui/components/SelectField/__snapshots__/Option.spec.tsx.snap delete mode 100644 src/core/client/ui/components/SelectField/__snapshots__/SelectField.spec.tsx.snap delete mode 100644 src/core/client/ui/components/SelectField/index.ts delete mode 100644 src/core/client/ui/components/Spinner/README.mdx delete mode 100644 src/core/client/ui/components/Spinner/Spinner.css delete mode 100644 src/core/client/ui/components/Spinner/Spinner.spec.tsx delete mode 100644 src/core/client/ui/components/Spinner/Spinner.tsx delete mode 100644 src/core/client/ui/components/Spinner/__snapshots__/Spinner.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Spinner/index.ts delete mode 100644 src/core/client/ui/components/Steps/Circle.css delete mode 100644 src/core/client/ui/components/Steps/Circle.tsx delete mode 100644 src/core/client/ui/components/Steps/Line.css delete mode 100644 src/core/client/ui/components/Steps/Line.tsx delete mode 100644 src/core/client/ui/components/Steps/README.mdx delete mode 100644 src/core/client/ui/components/Steps/Step.css delete mode 100644 src/core/client/ui/components/Steps/Step.tsx delete mode 100644 src/core/client/ui/components/Steps/StepBar.css delete mode 100644 src/core/client/ui/components/Steps/StepBar.tsx delete mode 100644 src/core/client/ui/components/Steps/index.ts delete mode 100644 src/core/client/ui/components/SubBar/Navigation.css delete mode 100644 src/core/client/ui/components/SubBar/Navigation.spec.tsx delete mode 100644 src/core/client/ui/components/SubBar/Navigation.tsx delete mode 100644 src/core/client/ui/components/SubBar/NavigationItem.css delete mode 100644 src/core/client/ui/components/SubBar/NavigationItem.spec.tsx delete mode 100644 src/core/client/ui/components/SubBar/NavigationItem.tsx delete mode 100644 src/core/client/ui/components/SubBar/README.mdx delete mode 100644 src/core/client/ui/components/SubBar/SubBar.css delete mode 100644 src/core/client/ui/components/SubBar/SubBar.spec.tsx delete mode 100644 src/core/client/ui/components/SubBar/SubBar.tsx delete mode 100644 src/core/client/ui/components/SubBar/__snapshots__/Navigation.spec.tsx.snap delete mode 100644 src/core/client/ui/components/SubBar/__snapshots__/NavigationItem.spec.tsx.snap delete mode 100644 src/core/client/ui/components/SubBar/__snapshots__/SubBar.spec.tsx.snap delete mode 100644 src/core/client/ui/components/SubBar/index.ts delete mode 100644 src/core/client/ui/components/Table/README.mdx delete mode 100644 src/core/client/ui/components/Table/Table.css delete mode 100644 src/core/client/ui/components/Table/Table.spec.tsx delete mode 100644 src/core/client/ui/components/Table/Table.tsx delete mode 100644 src/core/client/ui/components/Table/TableBody.css delete mode 100644 src/core/client/ui/components/Table/TableBody.tsx delete mode 100644 src/core/client/ui/components/Table/TableCell.css delete mode 100644 src/core/client/ui/components/Table/TableCell.tsx delete mode 100644 src/core/client/ui/components/Table/TableHead.css delete mode 100644 src/core/client/ui/components/Table/TableHead.tsx delete mode 100644 src/core/client/ui/components/Table/TableRow.css delete mode 100644 src/core/client/ui/components/Table/TableRow.tsx delete mode 100644 src/core/client/ui/components/Table/__snapshots__/Table.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Table/index.ts delete mode 100644 src/core/client/ui/components/Tabs/README.mdx delete mode 100644 src/core/client/ui/components/Tabs/Tab.css delete mode 100644 src/core/client/ui/components/Tabs/Tab.spec.tsx delete mode 100644 src/core/client/ui/components/Tabs/Tab.tsx delete mode 100644 src/core/client/ui/components/Tabs/TabBar.css delete mode 100644 src/core/client/ui/components/Tabs/TabBar.spec.tsx delete mode 100644 src/core/client/ui/components/Tabs/TabBar.tsx delete mode 100644 src/core/client/ui/components/Tabs/TabContent.spec.tsx delete mode 100644 src/core/client/ui/components/Tabs/TabContent.tsx delete mode 100644 src/core/client/ui/components/Tabs/TabPane.spec.tsx delete mode 100644 src/core/client/ui/components/Tabs/TabPane.tsx delete mode 100644 src/core/client/ui/components/Tabs/__snapshots__/Tab.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Tabs/__snapshots__/TabBar.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Tabs/__snapshots__/TabContent.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Tabs/__snapshots__/TabPane.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Tabs/index.ts delete mode 100644 src/core/client/ui/components/Tag/README.mdx delete mode 100644 src/core/client/ui/components/Tag/Tag.css delete mode 100644 src/core/client/ui/components/Tag/Tag.spec.tsx delete mode 100644 src/core/client/ui/components/Tag/Tag.tsx delete mode 100644 src/core/client/ui/components/Tag/__snapshots__/Tag.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Tag/index.ts delete mode 100644 src/core/client/ui/components/TextField/README.mdx delete mode 100644 src/core/client/ui/components/TextField/TextField.css delete mode 100644 src/core/client/ui/components/TextField/TextField.spec.tsx delete mode 100644 src/core/client/ui/components/TextField/TextField.tsx delete mode 100644 src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap delete mode 100644 src/core/client/ui/components/TextField/index.ts delete mode 100644 src/core/client/ui/components/TextLink/README.mdx delete mode 100644 src/core/client/ui/components/TextLink/TextLink.css delete mode 100644 src/core/client/ui/components/TextLink/TextLink.spec.tsx delete mode 100644 src/core/client/ui/components/TextLink/TextLink.tsx delete mode 100644 src/core/client/ui/components/TextLink/__snapshots__/TextLink.spec.tsx.snap delete mode 100644 src/core/client/ui/components/TextLink/index.ts delete mode 100644 src/core/client/ui/components/TileSelector/TileOption.css delete mode 100644 src/core/client/ui/components/Timestamp/Timestamp.css delete mode 100644 src/core/client/ui/components/Timestamp/Timestamp.spec.tsx delete mode 100644 src/core/client/ui/components/Timestamp/Timestamp.tsx delete mode 100644 src/core/client/ui/components/Timestamp/__snapshots__/Timestamp.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Timestamp/index.ts delete mode 100644 src/core/client/ui/components/ToggleShow/README.mdx delete mode 100644 src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx delete mode 100644 src/core/client/ui/components/ToggleShow/ToggleShow.tsx delete mode 100644 src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap delete mode 100644 src/core/client/ui/components/Tooltip/Tooltip.css delete mode 100644 src/core/client/ui/components/Tooltip/Tooltip.tsx delete mode 100644 src/core/client/ui/components/Tooltip/TooltipButton.css delete mode 100644 src/core/client/ui/components/Tooltip/TooltipButton.tsx delete mode 100644 src/core/client/ui/components/Tooltip/index.ts delete mode 100644 src/core/client/ui/components/TrapFocus/README.mdx delete mode 100644 src/core/client/ui/components/TrapFocus/TrapFocus.spec.tsx delete mode 100644 src/core/client/ui/components/TrapFocus/TrapFocus.tsx delete mode 100644 src/core/client/ui/components/TrapFocus/__snapshots__/TrapFocus.spec.tsx.snap delete mode 100644 src/core/client/ui/components/TrapFocus/index.ts delete mode 100644 src/core/client/ui/components/Typography/Typography.css delete mode 100644 src/core/client/ui/components/UIContext/UIContext.ts delete mode 100644 src/core/client/ui/components/UIContext/index.ts delete mode 100644 src/core/client/ui/components/ValidationMessage/README.mdx delete mode 100644 src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx delete mode 100644 src/core/client/ui/components/ValidationMessage/ValidationMessage.tsx delete mode 100644 src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap delete mode 100644 src/core/client/ui/components/ValidationMessage/index.ts delete mode 100644 src/core/client/ui/components/index.ts create mode 100644 src/core/client/ui/components/v2/CheckIcon/CheckIcon.css create mode 100644 src/core/client/ui/components/v2/CheckIcon/CheckIcon.tsx rename src/core/client/ui/components/{Check => v2/CheckIcon}/README.mdx (100%) create mode 100644 src/core/client/ui/components/v2/CheckIcon/index.ts create mode 100644 src/core/client/ui/components/v2/InputDescription/InputDescription.css rename src/core/client/ui/components/{ => v2}/InputDescription/InputDescription.spec.tsx (100%) rename src/core/client/ui/components/{ => v2}/InputDescription/InputDescription.tsx (70%) rename src/core/client/ui/components/{ => v2}/InputDescription/README.mdx (100%) rename src/core/client/ui/components/{AriaInfo/__snapshots__/AriaInfo.spec.tsx.snap => v2/InputDescription/__snapshots__/InputDescription.spec.tsx.snap} (58%) rename src/core/client/ui/components/{ => v2}/InputDescription/index.ts (100%) rename src/core/client/ui/components/{ => v2}/Popup/Popup.ts (100%) rename src/core/client/ui/components/{ => v2}/Popup/README.mdx (100%) rename src/core/client/ui/components/{ => v2}/Popup/index.ts (100%) rename src/core/client/ui/components/{ => v2}/TileSelector/README.mdx (98%) create mode 100644 src/core/client/ui/components/v2/TileSelector/TileOption.css rename src/core/client/ui/components/{ => v2}/TileSelector/TileOption.tsx (100%) rename src/core/client/ui/components/{ => v2}/TileSelector/TileSelector.css (100%) rename src/core/client/ui/components/{ => v2}/TileSelector/TileSelector.tsx (96%) rename src/core/client/ui/components/{ => v2}/TileSelector/index.ts (100%) rename src/core/client/ui/components/{ => v2}/Typography/README.mdx (99%) create mode 100644 src/core/client/ui/components/v2/Typography/Typography.css rename src/core/client/ui/components/{ => v2}/Typography/Typography.spec.tsx (100%) rename src/core/client/ui/components/{ => v2}/Typography/Typography.tsx (99%) rename src/core/client/ui/components/{ => v2}/Typography/__snapshots__/Typography.spec.tsx.snap (100%) rename src/core/client/ui/components/{ => v2}/Typography/index.ts (100%) delete mode 100644 src/core/client/ui/shared/buttonReset.css delete mode 100644 src/core/client/ui/shared/typography.css create mode 100644 src/core/client/ui/theme/admin.css.ts create mode 100644 src/core/client/ui/theme/adminVariables.ts create mode 100644 src/core/client/ui/theme/breakpoints.ts create mode 100644 src/core/client/ui/theme/colors.ts create mode 100644 src/core/client/ui/theme/compatibility.ts create mode 100644 src/core/client/ui/theme/sassLikeVariables.ts create mode 100644 src/core/client/ui/theme/sharedVariables.ts create mode 100644 src/core/client/ui/theme/stream.css.ts create mode 100644 src/core/client/ui/theme/streamVariables.ts create mode 100644 src/core/client/ui/theme/typography.css delete mode 100644 src/core/client/ui/theme/variables.css.ts delete mode 100644 src/core/client/ui/theme/variables.ts delete mode 100644 src/core/client/ui/theme/variables2.ts create mode 100644 src/core/client/ui/theme/zIndex.ts create mode 100644 src/types/postcss-js.d.ts diff --git a/CSS_VARIABLES.md b/CSS_VARIABLES.md new file mode 100644 index 000000000..9f77e28e5 --- /dev/null +++ b/CSS_VARIABLES.md @@ -0,0 +1,295 @@ + +# CSS Variables + +Coral defines a set of CSS Variables that you can use to broadly customize the +look and feel of your comment stream. For example you can easily redefine the colors +or fonts that are being used. + +To change the CSS Variables, use the following example in your custom CSS file: + +``` +:root { + --font-family-primary: 'Verdana'; + --round-corners: 0px; +} +``` + +The following list contains the CSS Variables that can be customized. + +**Info**: *Before 6.3.0 Coral uses a different set of CSS Variables. If you are still using +the old CSS Variables, please upgrade. Currently we have a compatibility layer to bridge the old CSS Variables to the new ones. This mechanism will be removed in the future.* + + + +### Index +- Variables + - palette + - palette-primary + - palette-background + - palette-text + - palette-grey + - palette-error + - palette-success + - palette-warning + - font-family + - font-weight + - font-weight-primary + - font-weight-secondary + - font-size + - line-height + - shadow + - spacing + - mini-unit + + +### Variables + +Use this to remove round corners or make them more round. + +`--round-corners: 3px;` + +### palette + +`--palette-divider: rgba(0, 0, 0, 0.12);` + +#### palette-primary + +Color palette that is used as the primary color. + +`--palette-primary-100: #EBF6FF; /* Before 6.3.0: --palette-primary-lightest */` + +`--palette-primary-200: #B7DCFF; /* Before 6.3.0: --palette-primary-lighter */` + +`--palette-primary-300: #61B3FF; /* Before 6.3.0: --palette-primary-light */` + +`--palette-primary-400: #2897FF; /* Before 6.3.0: --palette-primary-main */` + +`--palette-primary-500: #0070D9; /* Before 6.3.0: --palette-primary-main */` + +`--palette-primary-600: #0062BE; /* Before 6.3.0: --palette-primary-main */` + +`--palette-primary-700: #005AAE; /* Before 6.3.0: --palette-primary-main */` + +`--palette-primary-800: #004688; /* Before 6.3.0: --palette-primary-dark */` + +`--palette-primary-900: #00386D; /* Before 6.3.0: --palette-primary-darkest */` + +#### palette-background + +Color palette that is used for background colors. + +`--palette-background-body: #FFFFFF;` + +`--palette-background-popover: #FFFFFF;` + +`--palette-background-tooltip: #65696B;` + +`--palette-background-input: #FFFFFF;` + +`--palette-background-input-disabled: #EFEFEF;` + +#### palette-text + +Color palette that is used for text. + +`--palette-text-000: #FFFFFF; /* Before 6.3.0: --palette-text-light */` + +`--palette-text-100: #65696B; /* Before 6.3.0: --palette-text-secondary */` + +`--palette-text-500: #353F44; /* Before 6.3.0: --palette-text-primary */` + +`--palette-text-900: #14171A; /* Before 6.3.0: --palette-text-dark */` + +`--palette-text-placeholder: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */` + +`--palette-text-input-disabled: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */` + +#### palette-grey + +Color palette that is used for grey shades. + +`--palette-grey-100: #F4F7F7; /* Before 6.3.0: --palette-grey-lightest */` + +`--palette-grey-200: #EAEFF0; /* Before 6.3.0: --palette-grey-lightest */` + +`--palette-grey-300: #CBD1D2; /* Before 6.3.0: --palette-grey-lighter */` + +`--palette-grey-400: #9FA4A6; /* Before 6.3.0: --palette-grey-lighter */` + +`--palette-grey-500: #65696B; /* Before 6.3.0: --palette-grey-main */` + +`--palette-grey-600: #49545C; /* Before 6.3.0: --palette-grey-dark */` + +`--palette-grey-700: #32404D; /* Before 6.3.0: --palette-grey-darkest */` + +`--palette-grey-800: #202E3E; /* Before 6.3.0: --palette-grey-darkest */` + +`--palette-grey-900: #132033; /* Before 6.3.0: --palette-grey-darkest */` + +#### palette-error + +Color palette that is used for indicating something negative and is usually red. + +`--palette-error-100: #FCE5D9; /* Before 6.3.0: --palette-error-lightest */` + +`--palette-error-200: #FAC6B4; /* Before 6.3.0: --palette-error-lighter */` + +`--palette-error-300: #F29D8B; /* Before 6.3.0: --palette-error-lighter */` + +`--palette-error-400: #E5766C; /* Before 6.3.0: --palette-error-light */` + +`--palette-error-500: #D53F3F; /* Before 6.3.0: --palette-error-main */` + +`--palette-error-600: #B72E39; /* Before 6.3.0: --palette-error-main */` + +`--palette-error-700: #991F34; /* Before 6.3.0: --palette-error-dark */` + +`--palette-error-800: #7B142E; /* Before 6.3.0: --palette-error-darkest */` + +`--palette-error-900: #660C2B; /* Before 6.3.0: --palette-error-darkest */` + +#### palette-success + +Color palette that is used for indicating something positive and is usually green. + +`--palette-success-100: #D8F9D5; /* Before 6.3.0: --palette-success-lightest */` + +`--palette-success-200: #ADF3AD; /* Before 6.3.0: --palette-success-lighter */` + +`--palette-success-300: #7CDB85; /* Before 6.3.0: --palette-success-lighter */` + +`--palette-success-400: #54B767; /* Before 6.3.0: --palette-success-light */` + +`--palette-success-500: #268742; /* Before 6.3.0: --palette-success-main */` + +`--palette-success-600: #1B743D; /* Before 6.3.0: --palette-success-main */` + +`--palette-success-700: #136138; /* Before 6.3.0: --palette-success-dark */` + +`--palette-success-800: #0C4E32; /* Before 6.3.0: --palette-success-darkest */` + +`--palette-success-900: #07402E; /* Before 6.3.0: --palette-success-darkest */` + +#### palette-warning + +Color palette that is used for indicating a warning and is usually yellow. + +`--palette-warning-100: #FFFACC; /* Before 6.3.0: --palette-warning-main */` + +`--palette-warning-500: #FFE91F; /* Before 6.3.0: --palette-warning-main */` + +### font-family + +Different font families currently in use. + +`--font-family-primary: "Open Sans"; /* Before 6.3.0: --font-family-sans-serif */` + +`--font-family-secondary: "Nunito"; /* Before 6.3.0: --font-family-serif */` + +### font-weight + +Different font weights with matching values for the fonts. + +#### font-weight-primary + +`--font-weight-primary-bold: 700; /* Before 6.3.0: --font-weight-sans-bold */` + +`--font-weight-primary-semi-bold: 600; /* Before 6.3.0: --font-weight-sans-medium */` + +`--font-weight-primary-regular: 300; /* Before 6.3.0: --font-weight-sans-regular */` + +#### font-weight-secondary + +`--font-weight-secondary-bold: 700; /* Before 6.3.0: --font-weight-serif-bold */` + +`--font-weight-secondary-regular: 300; /* Before 6.3.0: --font-weight-serif-regular */` + +### font-size + +`--font-size-1: 0.75rem;` + +`--font-size-2: 0.875rem;` + +`--font-size-3: 1rem;` + +`--font-size-4: 1.125rem;` + +`--font-size-5: 1.25rem;` + +`--font-size-6: 1.5rem;` + +`--font-size-7: 1.75rem;` + +`--font-size-8: 2rem;` + +`--font-size-9: 2.25rem;` + +`--font-size-icon-xl: 2.25rem;` + +`--font-size-icon-lg: 1.5rem;` + +`--font-size-icon-md: 1.125rem;` + +`--font-size-icon-sm: 0.875rem;` + +`--font-size-icon-xs: 0.75rem;` + +### line-height + +`--line-height-comment-body: 1.45rem;` + +`--line-height-field-description: 1.3rem;` + +`--line-height-1: 0.75rem;` + +`--line-height-2: 0.875rem;` + +`--line-height-3: 1rem;` + +`--line-height-4: 1.125rem;` + +`--line-height-5: 1.25rem;` + +`--line-height-6: 1.5rem;` + +`--line-height-7: 1.75rem;` + +`--line-height-8: 2rem;` + +### shadow + +Different shadows that are currently used in Coral. + +`--shadow-popover: 1px 0px 4px rgba(0, 0, 0, 0.25); /* Before 6.3.0: --elevation-main */` + +### spacing + +Different spacing units currenty used in Coral. + +`--spacing-1: 4px;` + +`--spacing-2: 8px;` + +`--spacing-3: 12px;` + +`--spacing-4: 16px;` + +`--spacing-5: 24px;` + +`--spacing-6: 32px;` + +`--spacing-7: 44px;` + +`--spacing-8: 60px;` + +`--spacing-9: 84px;` + +### mini-unit + +Grid units for smaller and larger screens. + +`--mini-unit-small: 4;` + +`--mini-unit-large: 8;` + + diff --git a/gatsby-node.js b/gatsby-node.js index 4b87ad0e4..bf2214957 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -42,8 +42,8 @@ exports.onCreateWebpackConfig = ({ if (stage === "develop") { config.entry.commons.push( - // Add our global css variables file. - `${srcDir}/core/client/ui/theme/variables.css.ts` + // Add our stream css variables file. + `${srcDir}/core/client/ui/theme/stream.css.ts` ); } @@ -52,7 +52,7 @@ exports.onCreateWebpackConfig = ({ if (stage === "build-javascript") { config.entry.app = [ config.entry.app, - `${appDir}/core/client/ui/theme/variables.css.ts`, + `${appDir}/core/client/ui/theme/stream.css.ts`, ]; } */ diff --git a/package-lock.json b/package-lock.json index 52c5d5cdc..fbc04fc51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22020,28 +22020,28 @@ "dependencies": { "abbrev": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "dev": true, "optional": true }, "ansi-regex": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true, "optional": true }, "aproba": { "version": "1.2.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==", "dev": true, "optional": true }, "are-we-there-yet": { "version": "1.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", "dev": true, "optional": true, @@ -22052,14 +22052,14 @@ }, "balanced-match": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", "dev": true, "optional": true }, "brace-expansion": { "version": "1.1.11", - "resolved": false, + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, "optional": true, @@ -22077,35 +22077,35 @@ }, "code-point-at": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true, "optional": true }, "concat-map": { "version": "0.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true, "optional": true }, "console-control-strings": { "version": "1.1.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true, "optional": true }, "core-util-is": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true, "optional": true }, "debug": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "dev": true, "optional": true, @@ -22115,21 +22115,21 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==", "dev": true, "optional": true }, "delegates": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=", "dev": true, "optional": true }, "detect-libc": { "version": "1.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=", "dev": true, "optional": true @@ -22159,7 +22159,7 @@ }, "gauge": { "version": "2.7.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", "dev": true, "optional": true, @@ -22176,7 +22176,7 @@ }, "glob": { "version": "7.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.3.tgz", "integrity": "sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==", "dev": true, "optional": true, @@ -22191,14 +22191,14 @@ }, "has-unicode": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=", "dev": true, "optional": true }, "iconv-lite": { "version": "0.4.24", - "resolved": false, + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", "dev": true, "optional": true, @@ -22208,7 +22208,7 @@ }, "ignore-walk": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz", "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==", "dev": true, "optional": true, @@ -22218,7 +22218,7 @@ }, "inflight": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "dev": true, "optional": true, @@ -22229,21 +22229,21 @@ }, "inherits": { "version": "2.0.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "dev": true, "optional": true }, "ini": { "version": "1.3.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", "dev": true, "optional": true }, "is-fullwidth-code-point": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, "optional": true, @@ -22253,14 +22253,14 @@ }, "isarray": { "version": "1.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "dev": true, "optional": true }, "minimatch": { "version": "3.0.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, "optional": true, @@ -22308,7 +22308,7 @@ }, "ms": { "version": "2.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==", "dev": true, "optional": true @@ -22322,7 +22322,7 @@ }, "needle": { "version": "2.3.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/needle/-/needle-2.3.0.tgz", "integrity": "sha512-QBZu7aAFR0522EyaXZM0FZ9GLpq6lvQ3uq8gteiDUp7wKdy0lSd2hPlgFwVuW1CBkfEs9PfDQsQzZghLs/psdg==", "dev": true, "optional": true, @@ -22334,7 +22334,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -22353,7 +22353,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -22364,14 +22364,14 @@ }, "npm-bundled": { "version": "1.0.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.6.tgz", "integrity": "sha512-8/JCaftHwbd//k6y2rEWp6k1wxVfpFzB6t1p825+cUb7Ym2XQfhwIC5KwhrvzZRJu+LtDE585zVaS32+CGtf0g==", "dev": true, "optional": true }, "npm-packlist": { "version": "1.4.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.1.tgz", "integrity": "sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==", "dev": true, "optional": true, @@ -22382,7 +22382,7 @@ }, "npmlog": { "version": "4.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", "dev": true, "optional": true, @@ -22395,21 +22395,21 @@ }, "number-is-nan": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true, "optional": true }, "object-assign": { "version": "4.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "dev": true, "optional": true }, "once": { "version": "1.4.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, "optional": true, @@ -22419,21 +22419,21 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true, "optional": true }, "os-tmpdir": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true, "optional": true }, "osenv": { "version": "0.1.5", - "resolved": false, + "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", "dev": true, "optional": true, @@ -22444,21 +22444,21 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", "dev": true, "optional": true }, "process-nextick-args": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true, "optional": true }, "rc": { "version": "1.2.8", - "resolved": false, + "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "dev": true, "optional": true, @@ -22480,7 +22480,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": false, + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "optional": true, @@ -22496,7 +22496,7 @@ }, "rimraf": { "version": "2.6.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", "dev": true, "optional": true, @@ -22506,49 +22506,49 @@ }, "safe-buffer": { "version": "5.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "dev": true, "optional": true }, "safer-buffer": { "version": "2.1.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true, "optional": true }, "sax": { "version": "1.2.4", - "resolved": false, + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true }, "semver": { "version": "5.7.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==", "dev": true, "optional": true }, "set-blocking": { "version": "2.0.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", "dev": true, "optional": true }, "signal-exit": { "version": "3.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", "dev": true, "optional": true }, "string-width": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, "optional": true, @@ -22560,7 +22560,7 @@ }, "string_decoder": { "version": "1.1.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", "dev": true, "optional": true, @@ -22570,7 +22570,7 @@ }, "strip-ansi": { "version": "3.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "dev": true, "optional": true, @@ -22580,7 +22580,7 @@ }, "strip-json-comments": { "version": "2.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=", "dev": true, "optional": true @@ -22603,14 +22603,14 @@ }, "util-deprecate": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true, "optional": true }, "wide-align": { "version": "1.1.3", - "resolved": false, + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", "dev": true, "optional": true, @@ -22620,7 +22620,7 @@ }, "wrappy": { "version": "1.0.2", - "resolved": false, + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", "dev": true, "optional": true diff --git a/package.json b/package.json index fa579a0f6..24c4b1cad 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "build:server": "gulp server", "migration:create": "ts-node --transpile-only ./scripts/migration/create.ts", "docs:events": "ts-node ./scripts/generateEventDocs.ts ./src/core/client/stream/events.ts ./CLIENT_EVENTS.md", + "docs:css-variables": "ts-node ./scripts/generateCSSVariablesDocs.ts ./src/core/client/ui/theme/streamVariables.ts ./CSS_VARIABLES.md", "doctoc": "doctoc --maxlevel=3 --title '## Table of Contents' README.md CLIENT_EVENTS.md CONTRIBUTING.md WEBHOOKS.md EXTERNAL_MODERATION_PHASES.md", "generate": "npm-run-all generate:css-types generate:schema generate:relay", "generate-persist": "npm-run-all generate:css-types generate:schema generate:relay-persist", @@ -425,6 +426,9 @@ "{src/core/client/stream/events.ts,scripts/generateEventDocs.ts,CLIENT_EVENTS.md}": [ "npm run docs:events -- --verify" ], + "{src/core/client/ui/theme/sharedVariables.ts,src/core/client/ui/theme/streamVariables.ts,scripts/generateCSSVariablesDocs.ts,CSS_VARIABLES.md}": [ + "npm run docs:css-variables -- --verify" + ], "{README,CLIENT_EVENTS,CONTRIBUTING,WEBHOOKS,EXTERNAL_MODERATION_PHASES}.md": [ "npm run doctoc" ] diff --git a/scripts/generateCSSVariablesDocs.ts b/scripts/generateCSSVariablesDocs.ts new file mode 100644 index 000000000..1e9e79ea4 --- /dev/null +++ b/scripts/generateCSSVariablesDocs.ts @@ -0,0 +1,306 @@ +import { stripIndent } from "common-tags"; +import fs from "fs"; +import { kebabCase, trim } from "lodash"; +import path from "path"; +import ts from "typescript"; + +import colors from "../src/core/client/ui/theme/colors"; + +/** We collect inforamtion from the AST and put it into DocEntry */ +interface DocEntry { + /** Name of property */ + key: string; + /** Documentation if available */ + docs?: string; + /** Value if it is a leaf */ + value?: string; + /** Children if it is a node */ + children?: DocEntry[]; +} + +/** + * We use this regexp to find a previous block that we + * are going to update in the readme file. + */ +const BLOCK_REGEXP = /(.|\n)*/gm; + +/** Sort doc entries will sort childrenless entries first */ +function sortDocEntries(data: DocEntry[]) { + data.forEach((d) => { + if (d.children) { + d.children = sortDocEntries(d.children); + } + }); + return data.sort((a, b) => { + if (a.children && !b.children) { + return 1; + } + if (b.children && !a.children) { + return -1; + } + return 0; + }); +} + +/** Generate documentation for all classes in a set of .ts files */ +function gatherEntries( + fileName: string, + options: ts.CompilerOptions +): DocEntry[] { + // Build a program using the set of root file names in fileNames + const program = ts.createProgram([fileName], options); + + // Get the checker, we will use it to find more about classes + const checker = program.getTypeChecker(); + + const data: DocEntry[] = []; + const currentSourceFile = program.getSourceFile(fileName)!; + + ts.forEachChild(currentSourceFile, visit); + + return sortDocEntries(data); + + /** visit nodes finding css variables */ + function visit(node: ts.Node) { + if (ts.isVariableStatement(node)) { + // TODO (cvle) - Currently the variable name is hardcoded. We might want to change that. + if (!node.getFullText().includes("streamVariables")) { + return; + } + const firstChild = node.declarationList.declarations[0]; + if (ts.isVariableDeclaration(firstChild)) { + const symbol = checker.getSymbolAtLocation(firstChild.name); + if (symbol) { + const type = checker.getTypeOfSymbolAtLocation( + symbol, + symbol.valueDeclaration + ); + type.getProperties().forEach((property) => { + serializePropertySymbol(property); + }); + } + } + } + } + + /** This will evaluate `symbol` and addthe doc entries */ + function serializePropertySymbol(symbol: ts.Symbol, parent?: DocEntry) { + const entry: DocEntry = { key: symbol.name }; + const pt = checker.getTypeOfSymbolAtLocation( + symbol, + symbol.valueDeclaration + ); + if (pt.symbol?.name === "__object") { + pt.getProperties().forEach((p2) => { + serializePropertySymbol(p2, entry); + }); + } else { + entry.value = symbol.valueDeclaration + // Last child contains value. + .getChildAt(symbol.valueDeclaration.getChildCount() - 1)! + .getFullText(); + } + entry.docs = ts.displayPartsToString( + symbol.getDocumentationComment(checker) + ); + if (parent) { + if (parent.children) { + parent.children.push(entry); + } else { + parent.children = [entry]; + } + } else { + data.push(entry); + } + } +} + +/** + * Finds any references to `object` by `variableName` and replaces the text + * with the actual value. + * + * E.g. `replaceObjectVariablesInText("colors.teal100", colors, "colors") === "#E2FAF7"`; + */ +function replaceObjectVariablesInText( + text: string, + object: any, + variableName: string +) { + let result = text; + Object.keys(object).forEach((c: string) => { + if (typeof object[c] === "object") { + result = replaceObjectVariablesInText( + result, + object[c], + `${variableName}.${c}` + ); + } else { + result = result.replace(`${variableName}.${c}`, object[c]); + } + }); + return result; +} + +/** + * transforms value to be used in the documentation. + */ +function transformValue(value: string) { + let compat = ""; + value = trim(value); + // Detect compat value. + if (value.startsWith("compat")) { + const result = /compat\((.*), *"(.*)"\)/.exec(value); + if (!result) { + throw new Error("Unrecognized compat format"); + } + value = result[1]; + compat = result[2]; + } + // If it's a raw string, evaluate it to get rid of the initial quotes. + if (value[0] === '"' || value[0] === "'") { + // eslint-disable-next-line no-eval + value = eval(value); + } + // Replace all references to colors. + value = replaceObjectVariablesInText(value, colors, "colors"); + if (compat) { + // add compat information. + return `${value}; /* Before 6.3.0: --${compat} */`; + } + return `${value};`; +} + +function prefixLines(text: string, prefix: string) { + return text.split("\n").join(`\n${prefix}`); +} + +function entries2Summary( + entries: DocEntry[], + keyprefix = "", + nestprefix = "" +): string { + let doc = ""; + entries.forEach((entry) => { + if (!entry.children) { + return; + } + const header = kebabCase(keyprefix + entry.key); + doc += `${nestprefix}- ${header}\n`; + if (entry.children) { + doc += entries2Summary( + entry.children, + keyprefix + entry.key + "-", + nestprefix + " " + ); + } + }); + return doc; +} + +function entries2Doc(entries: DocEntry[], header = "###", prefix = ""): string { + let doc = ""; + entries.forEach((entry) => { + if (entry.children) { + doc += `\n${header} ${kebabCase(prefix + entry.key)}\n`; + if (entry.docs) { + doc += `\n${entry.docs}\n`; + } + doc += entries2Doc( + entry.children, + header + "#", + `${prefix}${entry.key}-` + ); + } else { + if (entry.docs) { + doc += `\n${entry.docs}\n`; + } + doc += `\n\`--${kebabCase(prefix + entry.key)}: ${transformValue( + entry.value! + )}\`\n`; + } + }); + return doc; +} + +/** + * Append or update previous documention in markdownFile. + * + * @param markdownFile The markdown file we want to inject the docs too. + * @param entries data as returned by gatherEntries. + */ +function emitDocs(markdownFile: string, entries: DocEntry[], verify = false) { + const previousContent = fs.existsSync(markdownFile) + ? fs.readFileSync(markdownFile).toString() + : ""; + + const summary = entries2Summary(entries, "", " "); + const list = entries2Doc(entries); + + const output = stripIndent` + + + ### Index + - Variables + ${prefixLines(summary, " ")} + + ### Variables + ${prefixLines(list, " ")} + + `; + + let newContent; + // Find previous block. + if (BLOCK_REGEXP.test(previousContent)) { + newContent = previousContent.replace(BLOCK_REGEXP, output); + } else { + newContent = previousContent + "\n" + output; + } + if (previousContent === newContent) { + // eslint-disable-next-line no-console + console.log(`${markdownFile} is up to date`); + return; + } + if (verify) { + // eslint-disable-next-line no-console + console.error( + `${markdownFile} is outdated, please run \`npm run docs:css-variables\`` + ); + process.exit(1); + } + + fs.writeFileSync(markdownFile, newContent); + // eslint-disable-next-line no-console + console.log(`Successfully injected documentation into ${markdownFile}`); +} + +function main() { + if (process.argv.length < 4) { + throw new Error("Must provide path to css variables and a markdown file."); + } + + const variableFile = process.argv[2]; + const markdownFile = process.argv[3]; + + // Find tsconfig file. + const configFile = ts.findConfigFile(variableFile, fs.existsSync); + if (!configFile) { + throw new Error("tsconfig file not found"); + } + const configText = fs.readFileSync(configFile).toString(); + const result = ts.parseConfigFileTextToJson(configFile, configText); + if (result.error) { + throw result.error; + } + + // Parse the JSON raw data into actual consumable compiler options. + const config = ts.parseJsonConfigFileContent( + result.config, + ts.sys, + path.dirname(configFile) + ); + + const entries = gatherEntries(variableFile, config.options); + emitDocs(markdownFile, entries, process.argv[4] === "--verify"); +} + +main(); diff --git a/src/core/build/paths.ts b/src/core/build/paths.ts index dfbe3d789..e593349d4 100644 --- a/src/core/build/paths.ts +++ b/src/core/build/paths.ts @@ -20,7 +20,9 @@ export default { appPublicPath: resolveSrc("core/build/publicPath.js"), appLocales: resolveSrc("locales"), appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"), - appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"), + appSassLikeVariables: resolveSrc("core/client/ui/theme/sassLikeVariables.ts"), + appThemeStreamCSS: resolveSrc("core/client/ui/theme/stream.css"), + appThemeAdminCSS: resolveSrc("core/client/ui/theme/admin.css"), appThemeMixinsCSS: resolveSrc("core/client/ui/theme/mixins.css"), appStreamHTML: resolveSrc("core/client/stream/index.html"), diff --git a/src/core/build/postcss.config.js b/src/core/build/postcss.config.js index 8b8b69804..969b681d6 100644 --- a/src/core/build/postcss.config.js +++ b/src/core/build/postcss.config.js @@ -3,7 +3,6 @@ require("ts-node/register"); const kebabCase = require("lodash/kebabCase"); const mapKeys = require("lodash/mapKeys"); const mapValues = require("lodash/mapValues"); -const pickBy = require("lodash/pickBy"); const flat = require("flat"); const paths = require("./paths").default; const autoprefixer = require("autoprefixer"); @@ -17,23 +16,28 @@ const postcssMixins = require("postcss-mixins"); const postcssPrependImports = require("postcss-prepend-imports"); const postcssAdvancedVariables = require("postcss-advanced-variables"); -delete require.cache[paths.appThemeVariables]; -const variables = require(paths.appThemeVariables).default; -const flatKebabVariables = mapKeys( - mapValues(flat(variables, { delimiter: "-" }), (v) => v.toString()), +delete require.cache[paths.appSassLikeVariables]; +const sassLikeVariables = require(paths.appSassLikeVariables).default; + +const kebabs = mapKeys( + mapValues(flat(sassLikeVariables, { delimiter: "-" }), (v) => v.toString()), (_, k) => kebabCase(k) ); -// These are sass style variables used in media queries. -const mediaQueryVariables = mapValues( - pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")), +// Generate sass-style variables to inject into css +const postCssVariables = mapValues(kebabs, (value, key) => { // Add unit to breakpoints. // Add 1 to support mobile first approach where we start // with the smallest screen and gradually add styling for the // next bigger screen. This is realized using `min-width` without // ever using `max-width`. - (v) => `${Number.parseInt(v, 10) + 1}px` -); + if (key.toString().startsWith("breakpoints-")) { + return `${Number.parseInt(value, 10) + 1}px`; + } + + // Default return the raw value + return value; +}); module.exports = { // Necessary for external CSS imports to work @@ -52,7 +56,7 @@ module.exports = { // Support nesting. postcssNested(), // Sass style variables to be used in media queries. - postcssAdvancedVariables({ variables: mediaQueryVariables }), + postcssAdvancedVariables({ variables: postCssVariables }), // Reduce some calc() postcssCalcFunction(), // Provides a modern CSS environment. diff --git a/src/core/client/account/App/MainLayout.css b/src/core/client/account/App/MainLayout.css index 9c0c33277..4d49b7852 100644 --- a/src/core/client/account/App/MainLayout.css +++ b/src/core/client/account/App/MainLayout.css @@ -1,10 +1,10 @@ .bar { height: calc(6 * var(--mini-unit)); - background-color: var(--palette-text-primary); + background-color: var(--palette-text-500); } .centered { margin: 10% auto; padding: 0 calc(0.5 * var(--mini-unit)); box-sizing: border-box; -} \ No newline at end of file +} diff --git a/src/core/client/account/components/Loading.tsx b/src/core/client/account/components/Loading.tsx index b59e92dac..e75c6dadb 100644 --- a/src/core/client/account/components/Loading.tsx +++ b/src/core/client/account/components/Loading.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Delay, Flex, Spinner } from "coral-ui/components"; +import { Delay, Flex, Spinner } from "coral-ui/components/v2"; const Loading: FunctionComponent = () => ( diff --git a/src/core/client/account/index.tsx b/src/core/client/account/index.tsx index 0d76d7884..e31c248d0 100644 --- a/src/core/client/account/index.tsx +++ b/src/core/client/account/index.tsx @@ -10,7 +10,7 @@ import { initLocalState } from "./local"; import localesData from "./locales"; // Import css variables. -import "coral-ui/theme/variables.css"; +import "coral-ui/theme/stream.css"; async function main() { await injectConditionalPolyfills(); diff --git a/src/core/client/account/routes/NotFound.css b/src/core/client/account/routes/NotFound.css index d4ff4b1ca..c2d433fe0 100644 --- a/src/core/client/account/routes/NotFound.css +++ b/src/core/client/account/routes/NotFound.css @@ -1,11 +1,11 @@ .content { - font-family: var(--v2-font-family-secondary); + font-family: var(--font-family-secondary); font-style: normal; - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-6); - line-height: var(--v2-line-height-7); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-6); + line-height: var(--line-height-7); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); text-align: center; } diff --git a/src/core/client/account/routes/download/Download/DownloadDescription.css b/src/core/client/account/routes/download/Download/DownloadDescription.css index 528a6529e..cf9cb0241 100644 --- a/src/core/client/account/routes/download/Download/DownloadDescription.css +++ b/src/core/client/account/routes/download/Download/DownloadDescription.css @@ -1,38 +1,38 @@ .title { - font-family: var(--v2-font-family-secondary); + font-family: var(--font-family-secondary); font-style: normal; - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-6); - line-height: var(--v2-line-height-7); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-6); + line-height: var(--line-height-7); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - padding-left: var(--v2-spacing-2); + padding-left: var(--spacing-2); } .content { - padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) var(--v2-spacing-3); + padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) var(--spacing-3); } .section { - margin-bottom: var(--v2-spacing-4); + margin-bottom: var(--spacing-4); } .sectionText { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-5); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-3); + line-height: var(--line-height-5); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-3); + margin-bottom: var(--spacing-3); } .list { list-style: none; - margin-left: calc(-1 * var(--v2-spacing-5)); + margin-left: calc(-1 * var(--spacing-5)); } .list li { @@ -46,5 +46,5 @@ .bullet { display: inline-block; min-width: 16px; - margin-right: var(--v2-spacing-2); + margin-right: var(--spacing-2); } diff --git a/src/core/client/account/routes/download/Download/DownloadRoute.css b/src/core/client/account/routes/download/Download/DownloadRoute.css index c34afdecf..e370d17c5 100644 --- a/src/core/client/account/routes/download/Download/DownloadRoute.css +++ b/src/core/client/account/routes/download/Download/DownloadRoute.css @@ -6,10 +6,10 @@ .root { display: inline-block; - max-width: calc(70 * var(--v2-spacing-2)); + max-width: calc(70 * var(--spacing-2)); @media (min-width: $breakpoints-xs) { - max-width: calc(60 * var(--v2-spacing-2)); + max-width: calc(60 * var(--spacing-2)); } text-align: left; diff --git a/src/core/client/account/routes/download/Download/DownloadRoute.tsx b/src/core/client/account/routes/download/Download/DownloadRoute.tsx index 01b03b440..986d183a4 100644 --- a/src/core/client/account/routes/download/Download/DownloadRoute.tsx +++ b/src/core/client/account/routes/download/Download/DownloadRoute.tsx @@ -6,7 +6,7 @@ import { useToken } from "coral-framework/hooks"; import { createFetch } from "coral-framework/lib/relay"; import { withRouteConfig } from "coral-framework/lib/router"; import { parseHashQuery } from "coral-framework/utils"; -import { HorizontalGutter } from "coral-ui/components"; +import { HorizontalGutter } from "coral-ui/components/v2"; import DownloadDescription from "./DownloadDescription"; import DownloadForm from "./DownloadForm"; diff --git a/src/core/client/account/routes/email/Confirm/Confirm.css b/src/core/client/account/routes/email/Confirm/Confirm.css index fd7f3063c..3216ddebc 100644 --- a/src/core/client/account/routes/email/Confirm/Confirm.css +++ b/src/core/client/account/routes/email/Confirm/Confirm.css @@ -1,52 +1,52 @@ .title { - font-family: var(--v2-font-family-secondary); + font-family: var(--font-family-secondary); font-style: normal; - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-6); - line-height: var(--v2-line-height-7); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-6); + line-height: var(--line-height-7); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .description { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-5); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-3); + line-height: var(--line-height-5); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-3); + margin-bottom: var(--spacing-3); } .label { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-3); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-3); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-1); + margin-bottom: var(--spacing-1); } .labelDescription { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-4); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-4); - color: var(--v2-colors-mono-100); + color: var(--palette-text-100); - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .submit { - margin-top: var(--v2-spacing-5); - margin-bottom: var(--v2-spacing-1); + margin-top: var(--spacing-5); + margin-bottom: var(--spacing-1); } diff --git a/src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css b/src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css index fd7f3063c..3216ddebc 100644 --- a/src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css +++ b/src/core/client/account/routes/notifications/Unsubscribe/Unsubscribe.css @@ -1,52 +1,52 @@ .title { - font-family: var(--v2-font-family-secondary); + font-family: var(--font-family-secondary); font-style: normal; - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-6); - line-height: var(--v2-line-height-7); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-6); + line-height: var(--line-height-7); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .description { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-5); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-3); + line-height: var(--line-height-5); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-3); + margin-bottom: var(--spacing-3); } .label { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-3); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-3); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-1); + margin-bottom: var(--spacing-1); } .labelDescription { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-4); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-4); - color: var(--v2-colors-mono-100); + color: var(--palette-text-100); - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .submit { - margin-top: var(--v2-spacing-5); - margin-bottom: var(--v2-spacing-1); + margin-top: var(--spacing-5); + margin-bottom: var(--spacing-1); } diff --git a/src/core/client/account/routes/password/Reset/Reset.css b/src/core/client/account/routes/password/Reset/Reset.css index fd7f3063c..3216ddebc 100644 --- a/src/core/client/account/routes/password/Reset/Reset.css +++ b/src/core/client/account/routes/password/Reset/Reset.css @@ -1,52 +1,52 @@ .title { - font-family: var(--v2-font-family-secondary); + font-family: var(--font-family-secondary); font-style: normal; - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-6); - line-height: var(--v2-line-height-7); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-6); + line-height: var(--line-height-7); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .description { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-5); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-3); + line-height: var(--line-height-5); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-3); + margin-bottom: var(--spacing-3); } .label { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-3); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-3); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-1); + margin-bottom: var(--spacing-1); } .labelDescription { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-4); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-4); - color: var(--v2-colors-mono-100); + color: var(--palette-text-100); - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .submit { - margin-top: var(--v2-spacing-5); - margin-bottom: var(--v2-spacing-1); + margin-top: var(--spacing-5); + margin-bottom: var(--spacing-1); } diff --git a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css index f9cae42f2..2c6a9b728 100644 --- a/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css +++ b/src/core/client/admin/App/DecisionHistory/ApprovedIcon.css @@ -1,3 +1,3 @@ .root { - color: var(--v2-palette-success-main); + color: var(--palette-success-500); } diff --git a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css index 91a29eff9..4629d0df8 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css +++ b/src/core/client/admin/App/DecisionHistory/DecisionHistoryButton.css @@ -3,6 +3,6 @@ } .historyIcon { - color: var(--v2-palette-text-secondary); + color: var(--palette-text-100); margin-right: 10px; } diff --git a/src/core/client/admin/App/DecisionHistory/DecisionItem.css b/src/core/client/admin/App/DecisionHistory/DecisionItem.css index de4a66b9f..85afd1539 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionItem.css +++ b/src/core/client/admin/App/DecisionHistory/DecisionItem.css @@ -1,5 +1,5 @@ .root { - padding: var(--v2-spacing-2) var(--v2-spacing-1); + padding: var(--spacing-2) var(--spacing-1); } .leftCol { @@ -8,5 +8,5 @@ flex-grow: 0; flex-shrink: 0; padding-top: 3px; - margin-right: var(--v2-spacing-2); + margin-right: var(--spacing-2); } diff --git a/src/core/client/admin/App/DecisionHistory/DecisionList.css b/src/core/client/admin/App/DecisionHistory/DecisionList.css index 852382c95..366875f51 100644 --- a/src/core/client/admin/App/DecisionHistory/DecisionList.css +++ b/src/core/client/admin/App/DecisionHistory/DecisionList.css @@ -1,4 +1,4 @@ -$decisionHistoryBorderColor: var(--v2-colors-grey-300); +$decisionHistoryBorderColor: var(--palette-grey-300); .root { margin: 0; diff --git a/src/core/client/admin/App/DecisionHistory/DotDivider.css b/src/core/client/admin/App/DecisionHistory/DotDivider.css index b2b104229..be47cc6fd 100644 --- a/src/core/client/admin/App/DecisionHistory/DotDivider.css +++ b/src/core/client/admin/App/DecisionHistory/DotDivider.css @@ -1,7 +1,7 @@ .root { height: 100%; - font-size: var(--v2-font-size-1); - line-height: var(--v2-line-height-reset); - color: var(--v2-colors-mono-100); - padding: 0 var(--v2-spacing-1); + font-size: var(--font-size-1); + line-height: var(--line-height-3); + color: var(--palette-text-100); + padding: 0 var(--spacing-1); } diff --git a/src/core/client/admin/App/DecisionHistory/Empty.css b/src/core/client/admin/App/DecisionHistory/Empty.css index 79dc92187..2d413e1f9 100644 --- a/src/core/client/admin/App/DecisionHistory/Empty.css +++ b/src/core/client/admin/App/DecisionHistory/Empty.css @@ -3,8 +3,8 @@ } .text { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-body-short); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-4); } diff --git a/src/core/client/admin/App/DecisionHistory/Footer.css b/src/core/client/admin/App/DecisionHistory/Footer.css index 0dbf825ea..23f5a062f 100644 --- a/src/core/client/admin/App/DecisionHistory/Footer.css +++ b/src/core/client/admin/App/DecisionHistory/Footer.css @@ -1,3 +1,3 @@ .root { - margin-top: var(--v2-spacing-1); + margin-top: var(--spacing-1); } diff --git a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css index 914577b73..5b7079999 100644 --- a/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css +++ b/src/core/client/admin/App/DecisionHistory/GoToCommentLink.css @@ -1,10 +1,10 @@ -$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700); +$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700; .root { - line-height: var(--v2-line-height-reset); - font-weight: var(--v2-font-weight-primary-bold); - font-family: var(--v2-font-family-primary); - font-size: var(--v2-font-size-1); + line-height: var(--line-height-3); + font-weight: var(--font-weight-primary-bold); + font-family: var(--font-family-primary); + font-size: var(--font-size-1); color: $moderateCardDecisionHistoryLinkTextColor; - font-style: var(--v2-font-style-underline); + font-style: var(--font-style-underline); } diff --git a/src/core/client/admin/App/DecisionHistory/Info.css b/src/core/client/admin/App/DecisionHistory/Info.css index 942637a82..b867c45f5 100644 --- a/src/core/client/admin/App/DecisionHistory/Info.css +++ b/src/core/client/admin/App/DecisionHistory/Info.css @@ -8,9 +8,9 @@ word-break: break-all; /* Fallback end */ word-break: break-word; - color: var(--v2-palette-text-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-body-short); - font-size: var(--v2-font-size-2); + color: var(--palette-text-500); + font-weight: var(--font-weight-primary-semi-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-4); + font-size: var(--font-size-2); } diff --git a/src/core/client/admin/App/DecisionHistory/RejectedIcon.css b/src/core/client/admin/App/DecisionHistory/RejectedIcon.css index c5bddba45..9b1a73195 100644 --- a/src/core/client/admin/App/DecisionHistory/RejectedIcon.css +++ b/src/core/client/admin/App/DecisionHistory/RejectedIcon.css @@ -1,3 +1,3 @@ .root { - color: var(--v2-palette-error-main); + color: var(--palette-error-500); } diff --git a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css index 96fec5916..a3f9619c4 100644 --- a/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css +++ b/src/core/client/admin/App/DecisionHistory/ShowMoreButton.css @@ -1,20 +1,20 @@ -$moderateCardDecisionHistoryLinkTextColor: var(--v2-colors-teal-700); -$moderateCardDecisionHistoryBorderColor: var(--v2-colors-grey-300); +$moderateCardDecisionHistoryLinkTextColor: $colors-teal-700; +$moderateCardDecisionHistoryBorderColor: var(--palette-grey-300); .root { - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-primary-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-reset); + font-size: var(--font-size-2); + font-weight: var(--font-weight-primary-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-3); text-transform: uppercase; color: $moderateCardDecisionHistoryLinkTextColor; width: 100%; border-top: 1px solid $moderateCardDecisionHistoryBorderColor; text-align: center; - padding-top: var(--v2-spacing-1); - padding-bottom: var(--v2-spacing-1); + padding-top: var(--spacing-1); + padding-bottom: var(--spacing-1); &:disabled { - color: var(--v2-palette-grey-lighter); + color: var(--palette-grey-300); } } diff --git a/src/core/client/admin/App/DecisionHistory/Timestamp.css b/src/core/client/admin/App/DecisionHistory/Timestamp.css index 69ea87457..30a60c664 100644 --- a/src/core/client/admin/App/DecisionHistory/Timestamp.css +++ b/src/core/client/admin/App/DecisionHistory/Timestamp.css @@ -1,9 +1,9 @@ -$timestampColor: var(--v2-colors-mono-100); +$timestampColor: var(--palette-text-100); .root { color: $timestampColor; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-1); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-1); + line-height: var(--line-height-3); } diff --git a/src/core/client/admin/App/DecisionHistory/Title.css b/src/core/client/admin/App/DecisionHistory/Title.css index 2f3ba9dd7..8a3b8fd71 100644 --- a/src/core/client/admin/App/DecisionHistory/Title.css +++ b/src/core/client/admin/App/DecisionHistory/Title.css @@ -1,23 +1,23 @@ -$decisionHistoryBorderColor: var(--v2-colors-grey-300); -$decisionHistoryTitleBackgroundColor: var(--v2-colors-grey-200); +$decisionHistoryBorderColor: var(--palette-grey-300); +$decisionHistoryTitleBackgroundColor: var(--palette-grey-200); .root { background: $decisionHistoryTitleBackgroundColor; - padding: var(--v2-spacing-1); - color: var(--v2-palette-text-primary); + padding: var(--spacing-1); + color: var(--palette-text-500); border-bottom: 1px solid $decisionHistoryBorderColor; - font-size: var(--v2-font-size-icon-medium); } .icon { - margin-right: var(--v2-spacing-2); + font-size: var(--font-size-icon-md); + margin-right: var(--spacing-2); } .text { text-transform: uppercase; - font-weight: var(--v2-font-weight-primary-bold); - color: var(--v2-palette-text-primary); - font-size: var(--v2-font-size-2); + font-weight: var(--font-weight-primary-bold); + color: var(--palette-text-500); + font-size: var(--font-size-2); line-height: 1; - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); } diff --git a/src/core/client/admin/App/DecisionHistory/Username.css b/src/core/client/admin/App/DecisionHistory/Username.css index 9417d59a8..204e4a4a0 100644 --- a/src/core/client/admin/App/DecisionHistory/Username.css +++ b/src/core/client/admin/App/DecisionHistory/Username.css @@ -1,9 +1,9 @@ -$moderateCardDecisionHistoryColor: var(--v2-colors-mono-900); +$moderateCardDecisionHistoryColor: var(--palette-text-900); .root { color: $moderateCardDecisionHistoryColor; - font-weight: var(--v2-font-weight-secondary-bold); - font-family: var(--v2-font-family-secondary); - line-height: var(--v2-line-height-body-short); - font-size: var(--v2-font-size-3); + font-weight: var(--font-weight-secondary-bold); + font-family: var(--font-family-secondary); + line-height: var(--line-height-field-description); + font-size: var(--font-size-3); } diff --git a/src/core/client/admin/App/GlobalNotification/NotificationContainer.tsx b/src/core/client/admin/App/GlobalNotification/NotificationContainer.tsx index 6a9da2619..035da4c54 100644 --- a/src/core/client/admin/App/GlobalNotification/NotificationContainer.tsx +++ b/src/core/client/admin/App/GlobalNotification/NotificationContainer.tsx @@ -1,4 +1,5 @@ import React, { FunctionComponent } from "react"; + import useNotification from "./useNotification"; const NotificationContainer: FunctionComponent<{}> = () => { diff --git a/src/core/client/admin/App/Main.tsx b/src/core/client/admin/App/Main.tsx index 99d77a780..1108c0af8 100644 --- a/src/core/client/admin/App/Main.tsx +++ b/src/core/client/admin/App/Main.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent } from "react"; import { PropTypesOf } from "coral-framework/types"; -import { LogoHorizontal } from "coral-ui/components"; +import { LogoHorizontal } from "coral-ui/components/v2"; import { AppBar, Begin, Divider, End } from "coral-ui/components/v2/AppBar"; import { DecisionHistoryButton } from "./DecisionHistory"; diff --git a/src/core/client/admin/App/UserMenu/UserMenu.css b/src/core/client/admin/App/UserMenu/UserMenu.css index 4cfb0cd0f..afd9ecd09 100644 --- a/src/core/client/admin/App/UserMenu/UserMenu.css +++ b/src/core/client/admin/App/UserMenu/UserMenu.css @@ -1,4 +1,4 @@ -$userMenuButtonColor: var(--v2-colors-mono-100); +$userMenuButtonColor: var(--palette-text-100); .button { padding-top: 0; @@ -11,9 +11,9 @@ $userMenuButtonColor: var(--v2-colors-mono-100); } .buttonText { - font-family: var(--v2-font-family-secondary); + font-family: var(--font-family-secondary); color: $userMenuButtonColor; - font-size: var(--v2-font-size-4); + font-size: var(--font-size-4); margin-left: 2px; margin-right: 1px; } diff --git a/src/core/client/admin/App/Version.css b/src/core/client/admin/App/Version.css index 237804df6..d4eb418fd 100644 --- a/src/core/client/admin/App/Version.css +++ b/src/core/client/admin/App/Version.css @@ -1,6 +1,6 @@ .version { - font-size: calc(10rem / var(--rem-base)); - color: var(--palette-text-secondary); + font-size: 0.625rem; + color: var(--palette-text-100); text-align: center; padding-bottom: var(--spacing-3); } diff --git a/src/core/client/admin/App/Version.tsx b/src/core/client/admin/App/Version.tsx index 2d5a368e4..8f81860e6 100644 --- a/src/core/client/admin/App/Version.tsx +++ b/src/core/client/admin/App/Version.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Typography } from "coral-ui/components"; +import { Typography } from "coral-ui/components/v2"; import styles from "./Version.css"; diff --git a/src/core/client/admin/components/AuthBox.css b/src/core/client/admin/components/AuthBox.css index c414eb4b9..57c5d07d3 100644 --- a/src/core/client/admin/components/AuthBox.css +++ b/src/core/client/admin/components/AuthBox.css @@ -1,8 +1,8 @@ .container { width: 385px; - background-color: var(--v2-colors-grey-100); - border: 1px solid var(--v2-colors-grey-300); + background-color: var(--palette-grey-100); + border: 1px solid var(--palette-grey-300); margin-top: 70px; - padding: var(--v2-spacing-6); + padding: var(--spacing-6); box-sizing: border-box; } diff --git a/src/core/client/admin/components/Comment/CommentContent.css b/src/core/client/admin/components/Comment/CommentContent.css index dc42794ec..214d1d287 100644 --- a/src/core/client/admin/components/Comment/CommentContent.css +++ b/src/core/client/admin/components/Comment/CommentContent.css @@ -1,20 +1,20 @@ -$comment-content: var(--v2-colors-mono-900); -$comment-blockquote-bg: var(--v2-colors-grey-100); -$comment-highlight-bg: var(--v2-colors-yellow-500); -$comment-link: var(--v2-palette-primary-main); -$comment-link-active: var(--v2-palette-primary-darkest); +$comment-content: var(--palette-text-900); +$comment-blockquote-bg: var(--palette-grey-100); +$comment-highlight-bg: var(--palette-warning-500); +$comment-link: $colors-teal-700; +$comment-link-active: $colors-teal-900; .root { - composes: bodyCommentV2 from "~coral-ui/shared/typography.css"; - font-family: var(--v2-font-family-primary); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-body-comment); + font-size: var(--font-size-3); + font-weight: var(--font-weight-primary-regular); + font-family: var(--font-family-primary); + line-height: var(--line-height-comment-body); color: $comment-content; overflow-wrap: break-word; b, strong { - font-weight: var(--v2-font-weight-primary-bold); + font-weight: var(--font-weight-primary-bold); } i, em { diff --git a/src/core/client/admin/components/Comment/InReplyTo.css b/src/core/client/admin/components/Comment/InReplyTo.css index 23d3f2bdc..811bfeb4a 100644 --- a/src/core/client/admin/components/Comment/InReplyTo.css +++ b/src/core/client/admin/components/Comment/InReplyTo.css @@ -1,24 +1,24 @@ -$moderateCardIconColor: var(--v2-colors-mono-100); -$moderateCardInReplyToColor: var(--v2-colors-mono-100); -$moderateCardInReplyToUsernameColor: var(--v2-colors-mono-500); -$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200); +$moderateCardIconColor: var(--palette-text-100); +$moderateCardInReplyToColor: var(--palette-text-100); +$moderateCardInReplyToUsernameColor: var(--palette-text-500); +$moderateCardUsernameBackgroundHover: var(--palette-grey-200); .icon { color: $moderateCardIconColor; } .inReplyTo { color: $moderateCardInReplyToColor; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-3); } .username { color: $moderateCardInReplyToUsernameColor; - font-family: var(--v2-font-family-secondary); - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-secondary); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-3); + line-height: var(--line-height-3); padding: var(--spacing-1); @@ -38,5 +38,5 @@ $moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200); .usernameButton { vertical-align: baseline; - margin-left: calc(-1 * var(--v2-spacing-1)); + margin-left: calc(-1 * var(--spacing-1)); } diff --git a/src/core/client/admin/components/Comment/Username.css b/src/core/client/admin/components/Comment/Username.css index ca2ac55a1..e7149caf2 100644 --- a/src/core/client/admin/components/Comment/Username.css +++ b/src/core/client/admin/components/Comment/Username.css @@ -1,9 +1,9 @@ -$moderateCardUsernameColor: var(--v2-colors-mono-900); +$moderateCardUsernameColor: var(--palette-text-900); .root { - font-size: var(--v2-font-size-3); - font-weight: var(--v2-font-weight-secondary-bold); - font-family: var(--v2-font-family-secondary); - line-height: var(--v2-line-height-reset); + font-size: var(--font-size-3); + font-weight: var(--font-weight-secondary-bold); + font-family: var(--font-family-secondary); + line-height: var(--line-height-3); color: $moderateCardUsernameColor; } diff --git a/src/core/client/admin/components/Comment/UsernameButton.css b/src/core/client/admin/components/Comment/UsernameButton.css index 8c60902e0..6376e66d5 100644 --- a/src/core/client/admin/components/Comment/UsernameButton.css +++ b/src/core/client/admin/components/Comment/UsernameButton.css @@ -1,21 +1,21 @@ -$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200); +$moderateCardUsernameBackgroundHover: var(--palette-grey-200); .root { margin-right: var(--mini-unit); padding: var(--spacing-1); - margin-left: calc(-1 * var(--v2-spacing-1)); + margin-left: calc(-1 * var(--spacing-1)); - line-height: var(--v2-line-height-reset); + line-height: var(--line-height-3); &:hover { background-color: $moderateCardUsernameBackgroundHover; - border-radius: var(--v2-round-corners); + border-radius: var(--round-corners); border-style: none; } &:active { background-color: $moderateCardUsernameBackgroundHover; - border-radius: var(--v2-round-corners); + border-radius: var(--round-corners); border-style: none; } } diff --git a/src/core/client/admin/components/Comment/UsernameButton.tsx b/src/core/client/admin/components/Comment/UsernameButton.tsx index 13d6cbbbf..e86828892 100644 --- a/src/core/client/admin/components/Comment/UsernameButton.tsx +++ b/src/core/client/admin/components/Comment/UsernameButton.tsx @@ -2,6 +2,7 @@ import cn from "classnames"; import React, { FunctionComponent } from "react"; import { BaseButton } from "coral-ui/components/v2"; + import Username from "./Username"; import styles from "./UsernameButton.css"; diff --git a/src/core/client/admin/components/ConversationModal/ConversationModal.tsx b/src/core/client/admin/components/ConversationModal/ConversationModal.tsx index 75e6988d1..b5aee4cc8 100644 --- a/src/core/client/admin/components/ConversationModal/ConversationModal.tsx +++ b/src/core/client/admin/components/ConversationModal/ConversationModal.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Modal } from "coral-ui/components"; +import { Modal } from "coral-ui/components/v2"; import ConversationModalQuery from "./ConversationModalQuery"; diff --git a/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css b/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css index 5427cd3ed..f0a55205d 100644 --- a/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css +++ b/src/core/client/admin/components/ConversationModal/ConversationModalCommentContainer.css @@ -1,31 +1,31 @@ -$conversationModalHighlightBackground: var(--v2-colors-teal-100); -$conversationModalCommentText: var(--v2-colors-mono-500); +$conversationModalHighlightBackground: $colors-teal-100; +$conversationModalCommentText: var(--palette-text-500); .root { flex: 1; } .line { - border-color: var(--v2-colors-grey-400); + border-color: var(--palette-grey-400); } .adornments { - margin-right: var(--v2-spacing-2); + margin-right: var(--spacing-2); } .circle { - margin-top: var(--v2-spacing-2); - margin-bottom: var(--v2-spacing-2); + margin-top: var(--spacing-2); + margin-bottom: var(--spacing-2); } .highlightedCircle { - margin-top: var(--v2-spacing-1); + margin-top: var(--spacing-1); } .highlighted { background-color: $conversationModalHighlightBackground; - padding: var(--v2-spacing-2); - padding-top: var(--v2-spacing-1); - margin-bottom: var(--v2-spacing-2); + padding: var(--spacing-2); + padding-top: var(--spacing-1); + margin-bottom: var(--spacing-2); } .commentText { @@ -33,5 +33,5 @@ $conversationModalCommentText: var(--v2-colors-mono-500); } .showReplies { - padding-left: var(--v2-spacing-2); + padding-left: var(--spacing-2); } diff --git a/src/core/client/admin/components/ConversationModal/ConversationModalContainer.css b/src/core/client/admin/components/ConversationModal/ConversationModalContainer.css index c766250b4..426c0381d 100644 --- a/src/core/client/admin/components/ConversationModal/ConversationModalContainer.css +++ b/src/core/client/admin/components/ConversationModal/ConversationModalContainer.css @@ -1,10 +1,10 @@ .root { } .topCircle { - margin-right: var(--v2-spacing-2); + margin-right: var(--spacing-2); } .bottomCircleContainer { width: 8px; - padding-top: var(--v2-spacing-1); + padding-top: var(--spacing-1); } diff --git a/src/core/client/admin/components/ConversationModal/ConversationModalHeaderContainer.css b/src/core/client/admin/components/ConversationModal/ConversationModalHeaderContainer.css index 7b684b1ea..f5539e475 100644 --- a/src/core/client/admin/components/ConversationModal/ConversationModalHeaderContainer.css +++ b/src/core/client/admin/components/ConversationModal/ConversationModalHeaderContainer.css @@ -1,17 +1,17 @@ -$modal-header-text: var(--v2-colors-mono-900); +$modal-header-text: var(--palette-text-900); .title { - font-size: var(--v2-font-size-4); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - line-height: var(--v2-line-height-title); + font-size: var(--font-size-4); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + line-height: var(--line-height-5); color: $modal-header-text; margin: 0; } .conversationTitle { - font-weight: var(--v2-font-weight-primary-semi-bold); + font-weight: var(--font-weight-primary-semi-bold); text-transform: uppercase; display: block; - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } diff --git a/src/core/client/admin/components/ConversationModal/ConversationModalQuery.css b/src/core/client/admin/components/ConversationModal/ConversationModalQuery.css index 55178ed52..fccef0abc 100644 --- a/src/core/client/admin/components/ConversationModal/ConversationModalQuery.css +++ b/src/core/client/admin/components/ConversationModal/ConversationModalQuery.css @@ -4,5 +4,5 @@ } .body { - padding: var(--v2-spacing-4); + padding: var(--spacing-4); } diff --git a/src/core/client/admin/components/ConversationModal/ConversationModalRepliesContainer.css b/src/core/client/admin/components/ConversationModal/ConversationModalRepliesContainer.css index 6b4688b11..274ca73b5 100644 --- a/src/core/client/admin/components/ConversationModal/ConversationModalRepliesContainer.css +++ b/src/core/client/admin/components/ConversationModal/ConversationModalRepliesContainer.css @@ -1,7 +1,7 @@ .comment { - padding-left: calc(var(--v2-spacing-4)); + padding-left: calc(var(--spacing-4)); } .footer { - padding-left: calc(var(--v2-spacing-4)); + padding-left: calc(var(--spacing-4)); } diff --git a/src/core/client/admin/components/ModalBodyText.css b/src/core/client/admin/components/ModalBodyText.css index 62ae84c8d..c90d133d2 100644 --- a/src/core/client/admin/components/ModalBodyText.css +++ b/src/core/client/admin/components/ModalBodyText.css @@ -1,9 +1,9 @@ -$modal-body-text: var(--v2-colors-mono-500); +$modal-body-text: $colors-mono-500; .root { - font-size: var(--v2-font-size-3); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - line-height: var(--v2-line-height-body-short); + font-size: var(--font-size-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + line-height: var(--line-height-field-description); color: $modal-body-text; } diff --git a/src/core/client/admin/components/ModalHeader.css b/src/core/client/admin/components/ModalHeader.css index b5e9408ca..23c8ef641 100644 --- a/src/core/client/admin/components/ModalHeader.css +++ b/src/core/client/admin/components/ModalHeader.css @@ -1,10 +1,10 @@ -$modal-text: var(--v2-colors-mono-500); +$modal-text: $colors-mono-500; .root { - font-size: var(--v2-font-size-5); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - line-height: var(--v2-line-height-title); + font-size: var(--font-size-5); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + line-height: var(--line-height-title); color: $modal-text; margin: 0; } diff --git a/src/core/client/admin/components/ModalHeaderUsername.css b/src/core/client/admin/components/ModalHeaderUsername.css index c2d58ce09..0b55b4ad8 100644 --- a/src/core/client/admin/components/ModalHeaderUsername.css +++ b/src/core/client/admin/components/ModalHeaderUsername.css @@ -1,8 +1,8 @@ -$status-modal-username: var(--v2-colors-mono-900); +$status-modal-username: $colors-mono-900; .root { - font-weight: var(--v2-font-weight-secondary-bold); - font-family: var(--v2-font-family-secondary); + font-weight: var(--font-weight-secondary-bold); + font-family: var(--font-family-secondary); color: $status-modal-username; font-size: 1.4rem; } diff --git a/src/core/client/admin/components/ModerateCard/ApproveButton.css b/src/core/client/admin/components/ModerateCard/ApproveButton.css index 052169cce..490edde4c 100644 --- a/src/core/client/admin/components/ModerateCard/ApproveButton.css +++ b/src/core/client/admin/components/ModerateCard/ApproveButton.css @@ -1,9 +1,9 @@ -$moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500); +$moderateCardButtonOutlineApproveColor: var(--palette-success-500); .root { border: 1px solid $moderateCardButtonOutlineApproveColor; box-sizing: border-box; - border-radius: var(--v2-round-corners); + border-radius: var(--round-corners); width: 65px; height: 50px; display: flex; @@ -12,14 +12,24 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500); color: $moderateCardButtonOutlineApproveColor; &:not(:disabled):active { background-color: $moderateCardButtonOutlineApproveColor; - color: var(--v2-colors-pure-white); + color: var(--palette-text-000); } } .readOnly { background-color: transparent; - border-color: var(--v2-colors-grey-300); - color: var(--v2-colors-grey-300); + border-color: $colors-grey-300); + color: $colors-grey-300); + + &:hover { + cursor: not-allowed; + } +} + +.readOnly { + background-color: transparent; + border-color: $colors-grey-300; + color: $colors-grey-300; &:hover { cursor: not-allowed; @@ -29,10 +39,10 @@ $moderateCardButtonOutlineApproveColor: var(--v2-colors-green-500); .invert { background-color: $moderateCardButtonOutlineApproveColor; border-color: $moderateCardButtonOutlineApproveColor; - color: var(--v2-colors-pure-white); + color: var(--palette-text-000); } .icon { - font-weight: var(--v2-font-weight-primary-semi-bold); + font-weight: var(--font-weight-primary-semi-bold); color: inherit; } diff --git a/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.css b/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.css index 8e19d96fc..8cf3a2a40 100644 --- a/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.css +++ b/src/core/client/admin/components/ModerateCard/CommentAuthorContainer.css @@ -1,3 +1,3 @@ .authorStatus { padding-right: var(--spacing-2); -} \ No newline at end of file +} diff --git a/src/core/client/admin/components/ModerateCard/FeatureButton.css b/src/core/client/admin/components/ModerateCard/FeatureButton.css index 34cb3e9c5..fab0ed5a8 100644 --- a/src/core/client/admin/components/ModerateCard/FeatureButton.css +++ b/src/core/client/admin/components/ModerateCard/FeatureButton.css @@ -3,7 +3,7 @@ right: 0px; top: 2px; - border: 1px solid var(--v2-palette-grey-main); + border: 1px solid var(--palette-grey-500); box-sizing: border-box; border-radius: var(--round-corners); padding: 2px var(--spacing-2) 2px var(--spacing-2); @@ -11,34 +11,34 @@ justify-content: center; align-items: center; - color: var(--v2-palette-grey-main); - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-primary-regular); - font-family: var(--v2-font-family-primary); + color: var(--palette-grey-500); + font-size: var(--font-size-2); + font-weight: var(--font-weight-primary-regular); + font-family: var(--font-family-primary); line-height: 1.2; &:active { - background-color: var(--v2-palette-primary-lightest); - border-color: var(--v2-palette-primary-main); - color: var(--v2-palette-primary-main); + background-color: $colors-teal-100; + border-color: $colors-teal-700; + color: $colors-teal-700; } &:disabled { cursor: not-allowed; background-color: transparent; - border-color: var(--v2-colors-grey-300); - color: var(--v2-colors-grey-300); + border-color: var(--palette-grey-300); + color: var(--palette-grey-300); } } .invert { - background-color: var(--v2-palette-primary-main); - border-color: var(--v2-palette-primary-main); - color: var(--v2-palette-text-light); + background-color: $colors-teal-700; + border-color: $colors-teal-700; + color: var(--palette-text-000); &:disabled { - color: var(--v2-colors-pure-white); - border-color: var(--v2-colors-grey-300); - background-color: var(--v2-colors-grey-300); + color: var(--palette-text-000); + border-color: var(--palette-grey-300); + background-color: var(--palette-grey-300); } } diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css b/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css index 2a56a7375..12ea52f67 100644 --- a/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css +++ b/src/core/client/admin/components/ModerateCard/FlagDetailsCategory.css @@ -1,9 +1,9 @@ -$moderateCardFlagsCategoryColor: var(--v2-colors-mono-500); +$moderateCardFlagsCategoryColor: var(--palette-text-500); .category { - font-size: var(--v2-font-size-3); - font-weight: var(--v2-font-weight-primary-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-body-short); + font-size: var(--font-size-3); + font-weight: var(--font-weight-primary-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-6); color: $moderateCardFlagsCategoryColor; } diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.css b/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.css index e39d1fa3b..19df0f47f 100644 --- a/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.css +++ b/src/core/client/admin/components/ModerateCard/FlagDetailsContainer.css @@ -1,3 +1,3 @@ .detailsDivider { - border-top: 1px solid var(--v2-colors-grey-100); + border-top: 1px solid $colors-grey-100; } diff --git a/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css b/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css index 19860f94b..840639e46 100644 --- a/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css +++ b/src/core/client/admin/components/ModerateCard/FlagDetailsEntry.css @@ -1,39 +1,40 @@ -$moderateCardFlagUsernameColor: var(--v2-colors-mono-900); -$moderateCardReasonTextColor: var(--v2-colors-mono-500); +$moderateCardFlagUsernameColor: var(--palette-text-900); +$moderateCardReasonTextColor: var(--palette-text-500); .user { color: $moderateCardFlagUsernameColor; - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-secondary-bold); - font-family: var(--v2-font-family-secondary); - line-height: var(--v2-line-height-title); + font-size: var(--font-size-2); + font-weight: var(--font-weight-secondary-bold); + font-family: var(--font-family-secondary); + line-height: var(--line-height-3); padding-right: calc(0.5 * var(--mini-unit)); } .details { color: $moderateCardReasonTextColor; + display: block; - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-primary-regular); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-title); + font-size: var(--font-size-2); + font-weight: var(--font-weight-primary-regular); + font-family: var(--font-family-primary); + line-height: var(--line-height-3); } .flagger { - line-height: var(--v2-line-height-reset); + line-height: var(--line-height-3); margin-right: var(--mini-unit); - padding: var(--v2-spacing-1); - margin-left: calc(-1 * var(--v2-spacing-1)); + padding: var(--spacing-1); + margin-left: calc(-1 * var(--spacing-1)); &:hover { - background-color: var(--v2-palette-grey-lightest); - border-radius: var(--v2-round-corners); + background-color: var(--palette-grey-200); + border-radius: var(--round-corners); border-style: none; } &:active { - background-color: var(--v2-palette-grey-lighter); - border-radius: var(--v2-round-corners); + background-color: var(--palette-grey-300); + border-radius: var(--round-corners); border-style: none; } } diff --git a/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css b/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css index 19fcecace..9e48a5864 100644 --- a/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css +++ b/src/core/client/admin/components/ModerateCard/LinkDetailsContainer.css @@ -1,8 +1,8 @@ .label { - font-size: calc(16rem / var(--rem-base)); - font-weight: var(--font-weight-regular); - font-family: var(--font-family-sans-serif); - color: var(--palette-text-primary); + font-size: var(--font-size-3); + font-weight: var(--font-weight-primary-regular); + font-family: var(--font-family-primary); + color: var(--palette-text-500); } .buttonContainer { diff --git a/src/core/client/admin/components/ModerateCard/Markers.css b/src/core/client/admin/components/ModerateCard/Markers.css index 906915db4..04f328391 100644 --- a/src/core/client/admin/components/ModerateCard/Markers.css +++ b/src/core/client/admin/components/ModerateCard/Markers.css @@ -1,9 +1,10 @@ -$moderateCardDetailsHeaderColor: var(--v2-colors-mono-500); +$moderateCardDetailsHeaderColor: var(--palette-text-500); +$moderateCardDetailsDividerColor: var(--palette-grey-100); .detailsButton { - font-size: var(--v2-font-size-1); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); + font-size: var(--font-size-1); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); line-height: 1.28; height: 100%; padding: 2px 0px; diff --git a/src/core/client/admin/components/ModerateCard/Media.css b/src/core/client/admin/components/ModerateCard/Media.css index 20c2e5644..bcafb9cac 100644 --- a/src/core/client/admin/components/ModerateCard/Media.css +++ b/src/core/client/admin/components/ModerateCard/Media.css @@ -1,5 +1,5 @@ .embed { - margin: var(--v2-spacing-2) 0; + margin: var(--spacing-2) 0; } .toggle { @@ -16,14 +16,14 @@ } .playIcon { - color: var(--v2-colors-pure-white); + color: var(--palette-text-000); } .playText { - color: var(--v2-colors-pure-white); - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-primary-bold); - font-family: var(--v2-font-family-primary); + color: var(--palette-text-000); + font-size: var(--font-size-2); + font-weight: var(--font-weight-primary-bold); + font-family: var(--font-family-primary); text-transform: uppercase; margin: 0; } diff --git a/src/core/client/admin/components/ModerateCard/ModerateCard.css b/src/core/client/admin/components/ModerateCard/ModerateCard.css index 02506bb9b..05f04033c 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCard.css +++ b/src/core/client/admin/components/ModerateCard/ModerateCard.css @@ -1,18 +1,18 @@ -$moderateCardTimestampColor: var(--v2-colors-mono-100); -$moderateCardEditedColor: var(--v2-colors-mono-100); -$moderateCardAuthorStatusColor: var(--v2-colors-mono-100); -$moderateCardDecisionColor: var(--v2-colors-mono-500); -$moderateCardStoryTitleColor: var(--v2-colors-mono-500); -$moderateCardUsernameBackgroundHover: var(--v2-colors-grey-200); -$moderateCardLinkTextColor: var(--v2-colors-teal-700); +$moderateCardTimestampColor: var(--palette-text-100); +$moderateCardEditedColor: var(--palette-text-100); +$moderateCardAuthorStatusColor: var(--palette-text-100); +$moderateCardDecisionColor: var(--palette-text-500); +$moderateCardStoryTitleColor: var(--palette-text-500); +$moderateCardUsernameBackgroundHover: var(--palette-grey-200); +$moderateCardLinkTextColor: $colors-teal-700; .topBar { position: relative; - margin-bottom: var(--v2-spacing-1); + margin-bottom: var(--spacing-1); } .topBarMini { - margin-bottom: var(--v2-spacing-4); + margin-bottom: var(--spacing-4); } .inReplyTo { @@ -25,7 +25,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700); .mainContainer { flex-grow: 1; - margin-right: calc(2 * var(--v2-spacing-5)); + margin-right: calc(2 * var(--spacing-5)); } .contentArea { @@ -52,7 +52,7 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700); No reply to field, so we align below the fattest element which is the feature button. */ - padding-top: calc(var(--v2-font-size-2) + 7px + var(--v2-spacing-4)); + padding-top: calc(var(--font-size-2) + 7px + var(--spacing-4)); } .asideMiniWithReplyTo { @@ -60,14 +60,14 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700); We have reply to field, so we align below the fattest element plus the reply to field. */ - padding-top: calc(2 * var(--v2-font-size-2) + 5px + var(--v2-spacing-4)); + padding-top: calc(2 * var(--font-size-2) + 5px + var(--spacing-4)); } .decision { color: $moderateCardDecisionColor; - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-primary-bold); - font-family: var(--v2-font-family-primary); + font-size: var(--font-size-2); + font-weight: var(--font-weight-primary-bold); + font-family: var(--font-family-primary); line-height: 1.14; text-transform: uppercase; } @@ -75,13 +75,13 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700); .separator { position: absolute; top: 0; - right: calc(-1 * var(--v2-spacing-5)); + right: calc(-1 * var(--spacing-5)); bottom: 0; width: 2px; } .ruledSeparator { - border-right: 1px solid var(--v2-colors-grey-400); + border-right: 1px solid var(--palette-grey-400); } .root { @@ -93,53 +93,53 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700); } .dangling { - background-color: var(--v2-palette-grey-lightest); + background-color: var(--palette-grey-200); box-shadow: none; } .link { - font-size: var(--v2-font-size-1); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-reset); + font-size: var(--font-size-1); + font-weight: var(--font-weight-primary-semi-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-3); color: $moderateCardLinkTextColor; text-transform: uppercase; } .viewContext { - padding-bottom: var(--v2-spacing-1); + padding-bottom: var(--spacing-1); } .storyLabel { - color: var(--v2-palette-grey-main); - font-size: var(--v2-font-size-1); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-reset); - margin-bottom: var(--v2-spacing-1); + color: var(--palette-grey-500); + font-size: var(--font-size-1); + font-weight: var(--font-weight-primary-semi-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-3); + margin-bottom: var(--spacing-1); text-transform: uppercase; } .commentOn { - font-size: var(--v2-font-size-2); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-reset); - margin-bottom: var(--v2-spacing-1); + font-size: var(--font-size-2); + font-family: var(--font-family-primary); + line-height: var(--line-height-3); + margin-bottom: var(--spacing-1); } .siteName { - font-weight: var(--v2-font-weight-primary-regular); + font-weight: var(--font-weight-primary-regular); } .storyTitle { + font-weight: var(--font-weight-primary-semi-bold); color: $moderateCardStoryTitleColor; - font-weight: var(--v2-font-weight-primary-semi-bold); } .borderless { border-width: 0px; box-shadow: none; - padding: var(--v2-spacing-2) 0; + padding: var(--spacing-2) 0; } .miniButton { @@ -149,19 +149,19 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700); .timestamp { color: $moderateCardTimestampColor; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-1); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-1); + line-height: var(--line-height-3); } .edited { color: $moderateCardEditedColor; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-1); - line-height: var(--v2-line-height-reset); - padding-left: var(--v2-spacing-2); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-1); + line-height: var(--line-height-3); + padding-left: var(--spacing-2); } .selected { @@ -171,17 +171,17 @@ $moderateCardLinkTextColor: var(--v2-colors-teal-700); .authorStatus { padding-right: var(--spacing-2); color: $moderateCardAuthorStatusColor; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-1); - line-height: var(--v2-line-height-reset); - padding-left: var(--v2-spacing-2); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-1); + line-height: var(--line-height-3); + padding-left: var(--spacing-2); } .deleted { - background: var(--v2-palette-grey-lightest); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-body-short); + background: var(--palette-grey-200); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-4); } diff --git a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css index 5829d7c28..5886f8d3f 100644 --- a/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css +++ b/src/core/client/admin/components/ModerateCard/ModerateCardDetailsContainer.css @@ -1,4 +1,4 @@ .button { text-transform: uppercase; - font-size: var(--v2-font-size-2); + font-size: var(--font-size-2); } diff --git a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css index 6ea3d6448..9e44da4a6 100644 --- a/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css +++ b/src/core/client/admin/components/ModerateCard/ModeratedByContainer.css @@ -1,20 +1,20 @@ -$moderated-by: var(--v2-colors-mono-100); -$moderated-by-username: var(--v2-colors-mono-900); +$moderated-by: var(--palette-text-100); +$moderated-by-username: var(--palette-text-900); .moderatedBy { - font-size: var(--v2-font-size-1); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-reset); + font-size: var(--font-size-1); + font-weight: var(--font-weight-primary-semi-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-3); color: $moderated-by; text-transform: uppercase; } .moderatedByUsername { - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-secondary-bold); - font-family: var(--v2-font-family-secondary); - line-height: var(--v2-line-height-reset); + font-size: var(--font-size-2); + font-weight: var(--font-weight-secondary-bold); + font-family: var(--font-family-secondary); + line-height: var(--line-height-3); color: $moderated-by-username; text-align: center; padding-top: 1px; diff --git a/src/core/client/admin/components/ModerateCard/RejectButton.css b/src/core/client/admin/components/ModerateCard/RejectButton.css index aa247e4a7..2acecfb24 100644 --- a/src/core/client/admin/components/ModerateCard/RejectButton.css +++ b/src/core/client/admin/components/ModerateCard/RejectButton.css @@ -1,9 +1,9 @@ -$moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500); +$moderateCardButtonOutlineRejectColor: var(--palette-error-500); .root { border: 1px solid $moderateCardButtonOutlineRejectColor; box-sizing: border-box; - border-radius: var(--v2-round-corners); + border-radius: var(--round-corners); width: 65px; height: 50px; display: flex; @@ -12,14 +12,24 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500); color: $moderateCardButtonOutlineRejectColor; &:not(:disabled):active { background-color: $moderateCardButtonOutlineRejectColor; - color: var(--v2-colors-pure-white); + color: var(--palette-text-000); } } .readOnly { background-color: transparent; - border-color: var(--v2-colors-grey-300); - color: var(--v2-colors-grey-300); + border-color: $colors-grey-300); + color: $colors-grey-300); + + &:hover { + cursor: not-allowed; + } +} + +.readOnly { + background-color: transparent; + border-color: $colors-grey-300; + color: $colors-grey-300; &:hover { cursor: not-allowed; @@ -28,8 +38,8 @@ $moderateCardButtonOutlineRejectColor: var(--v2-colors-red-500); .invert { background-color: $moderateCardButtonOutlineRejectColor; + color: var(--palette-text-000); border-color: $moderateCardButtonOutlineRejectColor; - color: var(--v2-colors-pure-white); } .icon { diff --git a/src/core/client/admin/components/ModerateCard/ToxicityLabel.css b/src/core/client/admin/components/ModerateCard/ToxicityLabel.css index 7fe636398..a7052e98e 100644 --- a/src/core/client/admin/components/ModerateCard/ToxicityLabel.css +++ b/src/core/client/admin/components/ModerateCard/ToxicityLabel.css @@ -1,11 +1,11 @@ -$moderateCardCounterBadgeBackgroundAlert: var(--v2-colors-red-500); -$moderateCardToxicityColor: var(--v2-colors-mono-500); +$moderateCardCounterBadgeBackgroundAlert: var(--palette-error-500); +$moderateCardToxicityColor: var(--palette-text-500); .root { - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-body-short); + font-size: var(--font-size-2); + font-weight: var(--font-weight-primary-semi-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-4); color: $moderateCardToxicityColor; } diff --git a/src/core/client/admin/components/NotAvailable.css b/src/core/client/admin/components/NotAvailable.css index daf0826cf..02037cd62 100644 --- a/src/core/client/admin/components/NotAvailable.css +++ b/src/core/client/admin/components/NotAvailable.css @@ -1,4 +1,4 @@ -$tableBodyDisabledColor: var(--v2-colors-mono-100); +$tableBodyDisabledColor: var(--palette-text-100); .root { color: $tableBodyDisabledColor; diff --git a/src/core/client/admin/components/NotAvailable.tsx b/src/core/client/admin/components/NotAvailable.tsx index 3953603f9..07aaf1c33 100644 --- a/src/core/client/admin/components/NotAvailable.tsx +++ b/src/core/client/admin/components/NotAvailable.tsx @@ -3,6 +3,8 @@ import React, { FunctionComponent } from "react"; import styles from "./NotAvailable.css"; +// TODO: (cvle) remove color styles from here. Color should be applied externally. + const NotAvailable: FunctionComponent = (props) => ( Not available diff --git a/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css b/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css index acd4b5af6..d227007bc 100644 --- a/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css +++ b/src/core/client/admin/components/PaginatedSelect/PaginatedSelect.css @@ -1,5 +1,5 @@ .root { - margin-top: var(--v2-spacing-2); + margin-top: var(--spacing-2); } .dropdown { @@ -15,18 +15,18 @@ } .button { - color: var(--v2-colors-mono-500) !important; + color: var(--palette-text-500) !important; border-width: 0; width: calc(20 * var(--mini-unit)); - margin-right: calc(var(--v2-spacing-1) / 2); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-min); + margin-right: calc(var(--spacing-1) / 2); + font-size: var(--font-size-3); + line-height: var(--line-height-min); justify-content: space-between; } .buttonIconLeft { width: 20px; - margin-right: calc(var(--v2-spacing-1) / 2); + margin-right: calc(var(--spacing-1) / 2); } .buttonIconRight { diff --git a/src/core/client/admin/components/Timeline/Circle.css b/src/core/client/admin/components/Timeline/Circle.css index 0bab4c48a..600019fd0 100644 --- a/src/core/client/admin/components/Timeline/Circle.css +++ b/src/core/client/admin/components/Timeline/Circle.css @@ -9,11 +9,11 @@ } .colorReg { - color: var(--v2-colors-grey-500); + color: var(--palette-grey-500); } .colorLight { - color: var(--v2-colors-grey-400); + color: var(--palette-grey-400); } .root { diff --git a/src/core/client/admin/components/Timeline/Line.css b/src/core/client/admin/components/Timeline/Line.css index 4dee7a2c0..af6f18403 100644 --- a/src/core/client/admin/components/Timeline/Line.css +++ b/src/core/client/admin/components/Timeline/Line.css @@ -1,6 +1,6 @@ .root { - border-left: 1px solid var(--palette-grey-main); - border-right: 1px solid var(--palette-grey-main); + border-left: 1px solid var(--palette-grey-500); + border-right: 1px solid var(--palette-grey-500); flex: 1; } diff --git a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css index 006c84d68..93586b917 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css +++ b/src/core/client/admin/components/UserHistoryDrawer/ModeratorNote.css @@ -1,33 +1,33 @@ -$moderator-note-bg: var(--v2-colors-grey-100); -$moderator-note-body: var(--v2-colors-mono-500); -$moderator-note-dot: var(--v2-colors-mono-100); -$moderator-note-username: var(--v2-colors-mono-900); +$moderator-note-bg: var(--palette-grey-100); +$moderator-note-body: var(--palette-text-500); +$moderator-note-dot: var(--palette-text-100); +$moderator-note-username: var(--palette-text-900); .root { } .body { - font-family: var(--v2-font-family-primary); - font-size: var(--v2-font-size-3); - font-weight: var(--v2-font-weight-primary-regular); - line-height: var(--v2-line-height-body-short); + font-family: var(--font-family-primary); + font-size: var(--font-size-3); + font-weight: var(--font-weight-primary-regular); + line-height: var(--line-height-field-description); background-color: $moderator-note-bg; border-radius: 4px; - padding: var(--v2-spacing-3); + padding: var(--spacing-3); color: $moderator-note-body; - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .bodyType { } .leftBy { - font-family: var(--v2-font-family-primary); - font-size: var(--v2-font-size-2); - font-weight: var(--v2-font-weight-primary-regular); - line-height: var(--v2-line-height-reset); - padding-left: var(--v2-spacing-4); - padding-right: var(--v2-spacing-1); + font-family: var(--font-family-primary); + font-size: var(--font-size-2); + font-weight: var(--font-weight-primary-regular); + line-height: var(--line-height-3); + padding-left: var(--spacing-4); + padding-right: var(--spacing-1); position: relative; color: $moderator-note-body; } @@ -39,19 +39,19 @@ $moderator-note-username: var(--v2-colors-mono-900); background-color: ; position: absolute; border-radius: 50%; - left: var(--v2-spacing-1); + left: var(--spacing-1); background-color: $moderator-note-dot; top: 50%; } .username { - font-family: var(--v2-font-family-secondary); - font-weight: var(--v2-font-weight-secondary-bold); - line-height: var(--v2-line-height-reset); - font-size: var(--v2-font-size-3); + font-family: var(--font-family-secondary); + font-weight: var(--font-weight-secondary-bold); + line-height: var(--line-height-3); + font-size: var(--font-size-3); color: $moderator-note-username; } .footerLeft { - padding-left: var(--v2-spacing-3); + padding-left: var(--spacing-3); } diff --git a/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css b/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css index 481cc7e2b..af8329fb9 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css +++ b/src/core/client/admin/components/UserHistoryDrawer/RecentHistory.css @@ -1,44 +1,44 @@ -$recent-history-title: var(--v2-colors-mono-500); -$recent-history-subtitle: var(--v2-colors-mono-100); -$recent-history-info: var(--v2-colors-mono-500); -$recent-history-triggered: var(--v2-palette-error-main); +$recent-history-title: var(--palette-text-500); +$recent-history-subtitle: var(--palette-text-100); +$recent-history-info: var(--palette-text-500); +$recent-history-triggered: var(--palette-error-500); .title { text-transform: uppercase; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-3); margin: 0; - line-height: var(--v2-line-height-body-short); + line-height: var(--line-height-field-description); color: $recent-history-title; } .subTitle { color: $recent-history-subtitle; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); margin: 0; - line-height: var(--v2-line-height-body-short); + line-height: var(--line-height-4); } .info { } .amount { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-size: var(--v2-font-size-6); - line-height: var(--v2-line-height-reset); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + font-size: var(--font-size-6); + line-height: var(--line-height-3); + line-height: var(--line-height-3); color: $recent-history-info; margin: 0; } .amountLabel { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-size: var(--v2-font-size-2); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + font-size: var(--font-size-2); color: $recent-history-info; margin: 0; } diff --git a/src/core/client/admin/components/UserHistoryDrawer/Tabs.css b/src/core/client/admin/components/UserHistoryDrawer/Tabs.css index 378dcd443..63d31d116 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/Tabs.css +++ b/src/core/client/admin/components/UserHistoryDrawer/Tabs.css @@ -1,4 +1,4 @@ -$indicator-dot: var(--v2-colors-blue-400); +$indicator-dot: $colors-teal-500; .root { height: 100%; @@ -23,7 +23,7 @@ $indicator-dot: var(--v2-colors-blue-400); } .tabIcon { - margin-right: var(--v2-spacing-1); + margin-right: var(--spacing-1); } .tabContent { @@ -32,7 +32,7 @@ $indicator-dot: var(--v2-colors-blue-400); } .container { - height: calc(100% - var(--v2-spacing-2) - var(--v2-spacing-3)); + height: calc(100% - var(--spacing-2) - var(--spacing-3)); display: flex; flex-direction: column; @@ -41,8 +41,8 @@ $indicator-dot: var(--v2-colors-blue-400); overflow: hidden; - margin-bottom: var(--v2-spacing-2); - margin-top: var(--v2-spacing-3); + margin-bottom: var(--spacing-2); + margin-top: var(--spacing-3); } .scrollable { diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.css b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.css index f5d851fea..3b69a25a0 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistory.css @@ -1,7 +1,7 @@ .tableHeader { border-width: 0px; border-style: none; - background-color: var(--palette-grey-lightest); + background-color: var(--palette-grey-200); } .row:first-child:hover { diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css index cbe167f43..e12130714 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerAccountHistoryQuery.css @@ -4,7 +4,7 @@ .callout { width: 100%; - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); align-content: center; text-align: center; } diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css index 1014dba9e..e844c07bd 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesContainer.css @@ -3,7 +3,7 @@ .textArea { width: 100%; - margin-bottom: var(--v2-spacing-2); + margin-bottom: var(--spacing-2); } .textArea:focus { @@ -11,6 +11,6 @@ } .form { - padding: var(--v2-spacing-2) 0; - margin-bottom: var(--v2-spacing-4); + padding: var(--spacing-2) 0; + margin-bottom: var(--spacing-4); } diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.css index 3cdb5c5b9..6aca9a4f4 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserDrawerNotesQuery.css @@ -1,5 +1,5 @@ .root { - + } .spinner { @@ -8,7 +8,7 @@ .callout { width: 100%; - font-family: var(--font-family-sans-serif); + font-family: var(--font-family-primary); align-content: center; text-align: center; -} \ No newline at end of file +} diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css index c47715169..751c4fdd3 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.css @@ -1,4 +1,4 @@ -$user-drawer-background: var(--v2-colors-pure-white); +$user-drawer-background: $colors-pure-white; .root { position: fixed; diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx index 26adf4170..c865bc272 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawer.tsx @@ -1,7 +1,6 @@ import React, { FunctionComponent } from "react"; -import { Modal } from "coral-ui/components"; -import { Card } from "coral-ui/components/v2"; +import { Card, Modal } from "coral-ui/components/v2"; import UserHistoryDrawerQuery from "./UserHistoryDrawerQuery"; diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.css index 39cba9e19..f3550cd6a 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllComments.css @@ -4,11 +4,11 @@ .loadMore { width: 100%; - background-color: var(--palette-common-white); + background-color: $colors-pure-white; border-width: 1px; border-style: solid; - border-color: var(--palette-grey-lighter); + border-color: var(--palette-grey-300); border-radius: var(--round-corners); margin-top: var(--spacing-1); diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.css index db131eca4..655faccf2 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerAllCommentsQuery.css @@ -4,7 +4,7 @@ .callout { width: 100%; - font-family: var(--font-family-sans-serif); + font-family: var(--font-family-primary); align-content: center; text-align: center; -} \ No newline at end of file +} diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css index 168e712e4..7b60fade2 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerContainer.css @@ -1,7 +1,7 @@ -$user-drawer-background: var(--v2-colors-pure-white); -$user-drawer-account-info: var(--v2-colors-mono-500); -$user-drawer-divider: var(--v2-colors-grey-300); -$user-drawer-status-label: var(--v2-colors-mono-500); +$user-drawer-background: $colors-pure-white; +$user-drawer-account-info: var(--palette-text-500); +$user-drawer-divider: var(--palette-grey-300); +$user-drawer-status-label: var(--palette-text-500); .comments { flex: auto; @@ -26,20 +26,20 @@ $user-drawer-status-label: var(--v2-colors-mono-500); } .username { - font-family: var(--v2-font-family-secondary); - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-6); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-secondary); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-6); + line-height: var(--line-height-3); } .userDetail { } .userDetailValue { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-3); + line-height: var(--line-height-3); color: $user-drawer-account-info; } @@ -58,12 +58,12 @@ $user-drawer-status-label: var(--v2-colors-mono-500); } .userStatusLabel { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-3); color: $user-drawer-status-label; - margin-right: var(--v2-spacing-1); + margin-right: var(--spacing-1); } .userStatusChange { diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css index 19541723b..93e4d908a 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerQuery.css @@ -1,6 +1,6 @@ .root { width: 100%; - font-family: var(--font-family-sans-serif); + font-family: var(--font-family-primary); align-content: center; text-align: center; } diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.css index 39cba9e19..f3550cd6a 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedComments.css @@ -4,11 +4,11 @@ .loadMore { width: 100%; - background-color: var(--palette-common-white); + background-color: $colors-pure-white; border-width: 1px; border-style: solid; - border-color: var(--palette-grey-lighter); + border-color: var(--palette-grey-300); border-radius: var(--round-corners); margin-top: var(--spacing-1); diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.css b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.css index db131eca4..655faccf2 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserHistoryDrawerRejectedCommentsQuery.css @@ -4,7 +4,7 @@ .callout { width: 100%; - font-family: var(--font-family-sans-serif); + font-family: var(--font-family-primary); align-content: center; text-align: center; -} \ No newline at end of file +} diff --git a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css index dfa88f4e3..b82130d3b 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UserStatusDetailsContainer.css @@ -1,14 +1,14 @@ -$user-status-details: var(--v2-colors-mono-500); +$user-status-details: var(--palette-text-500); .root { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); color: $user-status-details; - line-height: var(--v2-line-height-body-short); - margin: 0 0 var(--v2-spacing-1) 0; + line-height: var(--line-height-4); + margin: 0 0 var(--spacing-1) 0; } .root strong { - font-weight: var(--v2-font-weight-primary-bold); + font-weight: var(--font-weight-primary-bold); } diff --git a/src/core/client/admin/components/UserHistoryDrawer/UsernameChangeAction.css b/src/core/client/admin/components/UserHistoryDrawer/UsernameChangeAction.css index d9018a722..958129a20 100644 --- a/src/core/client/admin/components/UserHistoryDrawer/UsernameChangeAction.css +++ b/src/core/client/admin/components/UserHistoryDrawer/UsernameChangeAction.css @@ -1,7 +1,7 @@ .tableLight { - font-weight: var(--font-weight-regular); + font-weight: var(--font-weight-primary-regular); } .usernameCell { line-height: calc(18em / 14); -} \ No newline at end of file +} diff --git a/src/core/client/admin/components/UserRole/SiteModeratorModal.css b/src/core/client/admin/components/UserRole/SiteModeratorModal.css index 91838626b..6165b387e 100644 --- a/src/core/client/admin/components/UserRole/SiteModeratorModal.css +++ b/src/core/client/admin/components/UserRole/SiteModeratorModal.css @@ -1,5 +1,5 @@ .root { max-width: 500px; - padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) - var(--v2-spacing-3); + padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) + var(--spacing-3); } diff --git a/src/core/client/admin/components/UserRole/UserRoleText.css b/src/core/client/admin/components/UserRole/UserRoleText.css index 5c4275b27..7b0b7acc3 100644 --- a/src/core/client/admin/components/UserRole/UserRoleText.css +++ b/src/core/client/admin/components/UserRole/UserRoleText.css @@ -1,12 +1,12 @@ -$tableBodyTextColor: var(--v2-colors-mono-500); +$tableBodyTextColor: var(--palette-text-500); .root { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); color: $tableBodyTextColor; } .commenter { color: $tableBodyTextColor; - font-weight: var(--v2-font-weight-primary-regular); + font-weight: var(--font-weight-primary-regular); } diff --git a/src/core/client/admin/components/UserStatus/BanModal.css b/src/core/client/admin/components/UserStatus/BanModal.css index 4a4d28e0e..a453f0453 100644 --- a/src/core/client/admin/components/UserStatus/BanModal.css +++ b/src/core/client/admin/components/UserStatus/BanModal.css @@ -1,10 +1,10 @@ -$ban-modal-text: var(--v2-colors-mono-500); +$ban-modal-text: var(--palette-text-500); .bodyText { - font-size: var(--v2-font-size-3); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - line-height: var(--v2-line-height-body-short); + font-size: var(--font-size-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + line-height: var(--line-height-field-description); color: $ban-modal-text; } diff --git a/src/core/client/admin/components/UserStatus/ChangeStatusModal.css b/src/core/client/admin/components/UserStatus/ChangeStatusModal.css index 91838626b..6165b387e 100644 --- a/src/core/client/admin/components/UserStatus/ChangeStatusModal.css +++ b/src/core/client/admin/components/UserStatus/ChangeStatusModal.css @@ -1,5 +1,5 @@ .root { max-width: 500px; - padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) - var(--v2-spacing-3); + padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) + var(--spacing-3); } diff --git a/src/core/client/admin/components/UserStatus/SuspendForm.css b/src/core/client/admin/components/UserStatus/SuspendForm.css index 95549ad7e..a6cb39b11 100644 --- a/src/core/client/admin/components/UserStatus/SuspendForm.css +++ b/src/core/client/admin/components/UserStatus/SuspendForm.css @@ -1,3 +1,5 @@ +$suspend-modal-text: var(--palette-text-500); + .radioButton { margin: 0 var(--spacing-1) 0 0 !important; } @@ -13,6 +15,15 @@ margin: 0 0 var(--spacing-3) 0 !important; } +.subTitle { + font-size: var(--font-size-4); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + line-height: var(--line-height-5); + color: $suspend-modal-text; + margin: 0; +} + .footer { margin-top: var(--spacing-3); } diff --git a/src/core/client/admin/components/UserStatus/SuspendModal.css b/src/core/client/admin/components/UserStatus/SuspendModal.css new file mode 100644 index 000000000..0e4547822 --- /dev/null +++ b/src/core/client/admin/components/UserStatus/SuspendModal.css @@ -0,0 +1,37 @@ +$suspend-modal-text: var(--palette-text-500); + +.bodyText { + font-size: var(--font-size-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + line-height: var(--line-height-field-description); + color: $suspend-modal-text; +} + +.subTitle { + font-size: var(--font-size-4); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + line-height: var(--line-height-5); + color: $suspend-modal-text; + margin: 0; +} + +.radioButton { + margin: 0 var(--spacing-1) 0 0 !important; +} + +.textArea { + width: 100%; + box-sizing: border-box; + height: calc(12 * var(--mini-unit)); + padding: calc(0.5 * var(--mini-unit)); +} + +.header { + margin: 0 0 var(--spacing-3) 0 !important; +} + +.footer { + margin-top: var(--spacing-3); +} diff --git a/src/core/client/admin/components/UserStatus/UserStatus.css b/src/core/client/admin/components/UserStatus/UserStatus.css index b3c2e614d..d0eb67503 100644 --- a/src/core/client/admin/components/UserStatus/UserStatus.css +++ b/src/core/client/admin/components/UserStatus/UserStatus.css @@ -1,20 +1,20 @@ .root { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-reset); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-3); } .success { - color: var(--v2-palette-success-main); + color: var(--palette-success-500); } .warning { - color: var(--v2-palette-error-main); - font-weight: var(--v2-font-weight-primary-semi-bold); + color: var(--palette-error-500); + font-weight: var(--font-weight-primary-semi-bold); } .error { - color: var(--v2-palette-error-darkest); - font-weight: var(--v2-font-weight-primary-semi-bold); + color: var(--palette-error-700); + font-weight: var(--font-weight-primary-semi-bold); } diff --git a/src/core/client/admin/components/UserStatus/UserStatusChange.css b/src/core/client/admin/components/UserStatus/UserStatusChange.css index ef1d4679c..579b26de4 100644 --- a/src/core/client/admin/components/UserStatus/UserStatusChange.css +++ b/src/core/client/admin/components/UserStatus/UserStatusChange.css @@ -1,4 +1,4 @@ -$status-change-button-border: var(--v2-colors-grey-400); +$status-change-button-border: var(--palette-grey-400); .button { justify-content: space-between; @@ -6,7 +6,7 @@ $status-change-button-border: var(--v2-colors-grey-400); } .bordered { - padding: 0 var(--v2-spacing-2); + padding: 0 var(--spacing-2); border: 1px solid $status-change-button-border; } diff --git a/src/core/client/admin/index.tsx b/src/core/client/admin/index.tsx index c0ad3549d..223ef05ed 100644 --- a/src/core/client/admin/index.tsx +++ b/src/core/client/admin/index.tsx @@ -11,7 +11,7 @@ import { initLocalState } from "./local"; import localesData from "./locales"; // Import css variables. -import "coral-ui/theme/variables.css"; +import "coral-ui/theme/admin.css"; async function main() { await injectConditionalPolyfills(); diff --git a/src/core/client/admin/routes/AuthCheck/NetworkError.tsx b/src/core/client/admin/routes/AuthCheck/NetworkError.tsx index 6a35ef14b..567a5a2c2 100644 --- a/src/core/client/admin/routes/AuthCheck/NetworkError.tsx +++ b/src/core/client/admin/routes/AuthCheck/NetworkError.tsx @@ -1,7 +1,7 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; -import { Message } from "coral-ui/components"; +import { Message } from "coral-ui/components/v2"; import styles from "./NetworkError.css"; diff --git a/src/core/client/admin/routes/AuthCheck/Restricted.css b/src/core/client/admin/routes/AuthCheck/Restricted.css index 28854f043..af31aff80 100644 --- a/src/core/client/admin/routes/AuthCheck/Restricted.css +++ b/src/core/client/admin/routes/AuthCheck/Restricted.css @@ -1,52 +1,52 @@ .title { - font-weight: var(--v2-font-weight-secondary-bold); - font-family: var(--v2-font-family-secondary); - color: var(--v2-colors-mono-100); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-title); + font-weight: var(--font-weight-secondary-bold); + font-family: var(--font-family-secondary); + color: var(--palette-text-100); + font-size: var(--font-size-3); + line-height: var(--line-height-4); - padding-bottom: var(--v2-spacing-3); + padding-bottom: var(--spacing-3); } .username { - font-size: var(--v2-font-size-6); - font-weight: var(--v2-font-weight-secondary-bold); - font-family: var(--v2-font-family-secondary); - line-height: var(--v2-line-height-reset); - color: var(--v2-colors-mono-900); + font-size: var(--font-size-6); + font-weight: var(--font-weight-secondary-bold); + font-family: var(--font-family-secondary); + line-height: var(--line-height-7); + color: var(--palette-text-900); text-align: center; - padding-bottom: var(--v2-spacing-5); + padding-bottom: var(--spacing-5); } .copy { - font-size: var(--v2-font-size-3); - font-weight: var(--v2-font-weight-primary-regular); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-reset); - color: var(--v2-colors-mono-500); + font-size: var(--font-size-3); + font-weight: var(--font-weight-primary-regular); + font-family: var(--font-family-primary); + line-height: var(--line-height-4); + color: var(--palette-text-500); text-align: center; } .lockIcon { - color: var(--v2-colors-mono-900); - padding-bottom: var(--v2-spacing-2); + color: var(--palette-text-900); + padding-bottom: var(--spacing-2); } .noPermission { - font-size: var(--v2-font-size-4); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-family: var(--v2-font-family-primary); - line-height: var(--v2-line-height-reset); - color: var(--v2-colors-mono-900); + font-size: var(--font-size-4); + font-weight: var(--font-weight-primary-semi-bold); + font-family: var(--font-family-primary); + line-height: var(--line-height-3); + color: var(--palette-text-900); text-align: center; - padding-bottom: var(--v2-spacing-5); + padding-bottom: var(--spacing-5); } .contactAdmin { - padding-top: var(--v2-spacing-3); + padding-top: var(--spacing-3); } diff --git a/src/core/client/admin/routes/Community/EmptyMessage.css b/src/core/client/admin/routes/Community/EmptyMessage.css index ab1f5bda1..8a356e313 100644 --- a/src/core/client/admin/routes/Community/EmptyMessage.css +++ b/src/core/client/admin/routes/Community/EmptyMessage.css @@ -1,7 +1,7 @@ .root { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-body-short); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-3); + line-height: var(--line-height-field-description); text-align: center; } diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css index 7d0c23f97..a62dc0749 100644 --- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css +++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsers.css @@ -1,3 +1,3 @@ .button { - padding: var(--v2-spacing-2); + padding: var(--spacing-2); } diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css index 5daf0aed7..3c153da83 100644 --- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css +++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersForm.css @@ -1,9 +1,9 @@ -$invite-form-text: var(--v2-colors-mono-500); +$invite-form-text: var(--palette-text-500); .bodyText { - font-size: var(--v2-font-size-3); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - line-height: var(--v2-line-height-body-short); + font-size: var(--font-size-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + line-height: var(--line-height-field-description); color: $invite-form-text; } diff --git a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css index ca5b60c79..33752ab12 100644 --- a/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css +++ b/src/core/client/admin/routes/Community/InviteUsers/InviteUsersModal.css @@ -1,16 +1,16 @@ -$invite-modal-text: var(--v2-colors-mono-500); +$invite-modal-text: var(--palette-text-500); .root { width: 400px; - padding: var(--v2-spacing-2) var(--v2-spacing-3) var(--v2-spacing-3) - var(--v2-spacing-3); + padding: var(--spacing-2) var(--spacing-3) var(--spacing-3) + var(--spacing-3); } .title { - font-size: var(--v2-font-size-5); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - line-height: var(--v2-line-height-title); + font-size: var(--font-size-5); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + line-height: var(--line-height-6); color: $invite-modal-text; margin: 0; } diff --git a/src/core/client/admin/routes/Community/InviteUsers/RoleField.css b/src/core/client/admin/routes/Community/InviteUsers/RoleField.css new file mode 100644 index 000000000..62c39bda7 --- /dev/null +++ b/src/core/client/admin/routes/Community/InviteUsers/RoleField.css @@ -0,0 +1,9 @@ +$role-field-text: var(--palette-text-500); + +.legend { + font-size: var(--font-size-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + line-height: var(--line-height-field-description); + color: $role-field-text; +} diff --git a/src/core/client/admin/routes/Community/InviteUsers/Success.css b/src/core/client/admin/routes/Community/InviteUsers/Success.css index 71d281861..439d1fe33 100644 --- a/src/core/client/admin/routes/Community/InviteUsers/Success.css +++ b/src/core/client/admin/routes/Community/InviteUsers/Success.css @@ -1,13 +1,13 @@ -$success-text: var(--v2-colors-mono-500); +$success-text: var(--palette-text-500); .box { width: 100%; } .title { - font-size: var(--v2-font-size-5); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - line-height: var(--v2-line-height-title); + font-size: var(--font-size-5); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + line-height: var(--line-height-6); color: $success-text; margin: 0; } diff --git a/src/core/client/admin/routes/Community/InviteUsers/Success.tsx b/src/core/client/admin/routes/Community/InviteUsers/Success.tsx index 4aa289eb3..f87977e3e 100644 --- a/src/core/client/admin/routes/Community/InviteUsers/Success.tsx +++ b/src/core/client/admin/routes/Community/InviteUsers/Success.tsx @@ -1,7 +1,7 @@ import { Localized } from "@fluent/react/compat"; import React, { FunctionComponent } from "react"; -import { Box, Button, CheckIcon, Flex } from "coral-ui/components"; +import { Box, Button, CheckIcon, Flex } from "coral-ui/components/v2"; import * as styles from "./Success.css"; @@ -30,8 +30,8 @@ const Success: FunctionComponent = ({ lastFocusableRef, onClose }) => ( @@ -1322,10 +1324,8 @@ each other's comments.

diff --git a/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap b/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap index 08e14c5b5..6d608ee3e 100644 --- a/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap +++ b/src/core/client/admin/test/invite/__snapshots__/invite.spec.tsx.snap @@ -23,11 +23,127 @@ exports[`renders form 1`] = ` > Coral - + data-name="Layer 1" + id="Layer_1" + viewBox="0 0 1011.23 388.38" + xmlns="http://www.w3.org/2000/svg" + > + + Coral by Vox Media + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -65,19 +181,19 @@ exports[`renders form 1`] = ` className="Box-root HorizontalGutter-root InviteCompleteForm-root HorizontalGutter-double Box-pt-4" >
-

You may use “_” and “.” -

+
@@ -96,19 +212,19 @@ exports[`renders form 1`] = `
-

Must be at least 8 characters -

+
@@ -120,6 +236,7 @@ exports[`renders form 1`] = ` autoComplete="new-password" autoCorrect="off" className="PasswordField-colorRegular PasswordField-fullWidth PasswordField-input" + data-testid="password-field" disabled={false} id="password" name="password" @@ -150,9 +267,9 @@ exports[`renders form 1`] = `
)} diff --git a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.css b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.css index b8b95231d..4498bf100 100644 --- a/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.css +++ b/src/core/client/stream/tabs/Comments/Comment/PermalinkButton/PermalinkPopover.css @@ -3,35 +3,35 @@ } .buttonRoot { - font-family: var(--v2-font-family-primary); + font-family: var(--font-family-primary); font-style: normal; - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-3); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-3); + line-height: var(--line-height-3); - padding-top: var(--v2-spacing-2); - padding-bottom: var(--v2-spacing-2); - padding-left: var(--v2-spacing-3); - padding-right: var(--v2-spacing-3); + padding-top: var(--spacing-2); + padding-bottom: var(--spacing-2); + padding-left: var(--spacing-3); + padding-right: var(--spacing-3); } .icon { - margin-right: var(--v2-spacing-1); + margin-right: var(--spacing-1); } .copy { - background-color: var(--v2-colors-pure-white); - color: var(--v2-colors-mono-500); + background-color: inherit; + color: var(--palette-text-500); &:hovered, &.mouseHover { - background-color: var(--v2-colors-stream-blue-100); - color: var(--v2-colors-mono-500); + background-color: var(--palette-primary-100); + color: var(--palette-text-500); } } .copied { - font-weight: var(--v2-font-weight-primary-semi-bold); + font-weight: var(--font-weight-primary-semi-bold); - background-color: var(--v2-colors-green-100); - color: var(--v2-colors-green-500); + background-color: var(--palette-success-100); + color: var(--palette-success-500); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/CreateCommentReactionMutation.ts b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/CreateCommentReactionMutation.ts index 01bd45bdb..ba902ab87 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/CreateCommentReactionMutation.ts +++ b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/CreateCommentReactionMutation.ts @@ -11,9 +11,9 @@ import { MutationResponsePromise, } from "coral-framework/lib/relay"; import { GQLComment } from "coral-framework/schema"; +import { CreateCommentReactionEvent } from "coral-stream/events"; import { CreateCommentReactionMutation as MutationTypes } from "coral-stream/__generated__/CreateCommentReactionMutation.graphql"; -import { CreateCommentReactionEvent } from "coral-stream/events"; export type CreateCommentReactionInput = MutationInput; diff --git a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.css b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.css index cedfefe81..93c2565a1 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.css +++ b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.css @@ -1,6 +1,6 @@ .readOnly { cursor: not-allowed !important; - color: var(--palette-text-primary) !important; + color: var(--palette-text-500) !important; opacity: 1 !important; } @@ -9,6 +9,14 @@ } .reacted { - color: var(--v2-colors-stream-blue-500); - font-weight: var(--v2-font-weight-primary-bold); + color: var(--palette-primary-500); + font-weight: var(--font-weight-primary-bold); +} + +.icon { + margin-right: var(--spacing-1); +} + +.totalReactions { + margin-left: var(--spacing-1); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx index 7c880775d..b77231924 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReactionButton/ReactionButton.tsx @@ -2,8 +2,8 @@ import { Localized } from "@fluent/react/compat"; import cn from "classnames"; import React from "react"; -import { Button, Icon, MatchMedia } from "coral-ui/components/v2"; -import { ButtonProps } from "coral-ui/components/v2/Button"; +import { Flex, Icon, MatchMedia } from "coral-ui/components/v2"; +import { Button } from "coral-ui/components/v3"; import styles from "./ReactionButton.css"; @@ -17,7 +17,6 @@ interface ReactionButtonProps { iconActive: string | null; readOnly?: boolean; className?: string; - color?: typeof styles & ButtonProps["color"]; isQA?: boolean; } @@ -36,41 +35,48 @@ function render(props: ReactionButtonProps) { return ( ); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyButton.css b/src/core/client/stream/tabs/Comments/Comment/ReplyButton.css index c8dbfd977..c5e6dca24 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyButton.css +++ b/src/core/client/stream/tabs/Comments/Comment/ReplyButton.css @@ -1 +1,3 @@ -.root {} \ No newline at end of file +.icon { + margin-right: var(--spacing-1); +} diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx index 64919bd52..c4b80bb95 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReplyButton.tsx @@ -1,7 +1,10 @@ import { Localized } from "@fluent/react/compat"; import React, { EventHandler, FunctionComponent, MouseEvent } from "react"; -import { Button, Icon, MatchMedia } from "coral-ui/components/v2"; +import { Flex, Icon, MatchMedia } from "coral-ui/components/v2"; +import { Button } from "coral-ui/components/v3"; + +import styles from "./ReplyButton.css"; interface Props { id?: string; @@ -17,19 +20,23 @@ const ReplyButton: FunctionComponent = (props) => ( className={props.className} id={props.id} onClick={props.onClick} - variant="text" - color="mono" - size="regular" - active={props.active} disabled={props.disabled} data-testid="comment-reply-button" + active={props.active} + variant="flat" + color="secondary" + fontSize="small" + fontWeight="semiBold" + paddingSize="extraSmall" > - reply - - - Reply - - + + reply + + + Reply + + + ); diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css index 811a74d9a..1bd06c886 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css +++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyCommentForm.css @@ -1,11 +1,15 @@ +$commentsBorder: var(--palette-grey-300); + .rteContent { border-top-left-radius: 0px; border-top-right-radius: 0px; } -$commentsBorder: var(--v2-colors-grey-300); +.warnIcon { + color: var(--palette-text-500); +} .commentFormBox { border: 1px solid $commentsBorder; - border-radius: var(--v2-round-corners); + border-radius: var(--round-corners); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css index d633bbb7a..819efbf36 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css +++ b/src/core/client/stream/tabs/Comments/Comment/ReplyCommentForm/ReplyTo.css @@ -1,6 +1,6 @@ -$commentsReplyToBackground: var(--v2-colors-grey-500); -$commentsReplyToColor: var(--v2-colors-pure-white); -$commentsReplyToBorderColor: var(--v2-colors-grey-500); +$commentsReplyToBackground: var(--palette-grey-500); +$commentsReplyToColor: var(--palette-text-000); +$commentsReplyToBorderColor: var(--palette-grey-500); .root { padding: calc(0.5 * var(--mini-unit)); @@ -11,24 +11,24 @@ $commentsReplyToBorderColor: var(--v2-colors-grey-500); background-color: $commentsReplyToBackground; color: $commentsReplyToColor; - border-top-left-radius: var(--v2-round-corners); - border-top-right-radius: var(--v2-round-corners); + border-top-left-radius: var(--round-corners); + border-top-right-radius: var(--round-corners); } .text { color: $commentsReplyToColor; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-2); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-2); } .username { color: $commentsReplyToColor; - font-family: var(--v2-font-family-secondary); - font-weight: var(--v2-font-weight-secondary-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-2); + font-family: var(--font-family-secondary); + font-weight: var(--font-weight-secondary-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-2); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css index 384b0f4c0..3d24e2885 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css +++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.css @@ -1,12 +1,12 @@ .icon { - margin-right: var(--v2-spacing-1); + margin-right: var(--spacing-1); } .reported { - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-semi-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-semi-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-3); - color: var(--v2-colors-red-500); + color: var(--palette-error-500); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx index a07a0d08c..2a0cad515 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportButton.tsx @@ -83,7 +83,7 @@ const ReportButton: FunctionComponent = ({ onClick={isLoggedIn ? onClickReport : signIn} data-testid="comment-report-button" > - + flag diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css index a853d0c35..1ab4c0d9c 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css +++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.css @@ -1,45 +1,45 @@ .root { - background-color: var(--v2-colors-grey-100); - padding: var(--v2-spacing-3); + background-color: var(--palette-grey-100); + padding: var(--spacing-3); } .title { display: block; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-3); + line-height: var(--line-height-3); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-3); + margin-bottom: var(--spacing-3); } .heading { display: block; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-bold); + font-size: var(--font-size-2); + line-height: var(--line-height-3); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-1); + margin-bottom: var(--spacing-1); } .detail { display: inline-block; - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-regular); - font-size: var(--v2-font-size-2); - line-height: var(--v2-line-height-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-3); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); - margin-bottom: var(--v2-spacing-1); + margin-bottom: var(--spacing-1); } .list { @@ -47,35 +47,43 @@ padding: 0; margin: 0; - margin-top: var(--v2-spacing-2); - margin-bottom: var(--v2-spacing-3); + margin-top: var(--spacing-2); + margin-bottom: var(--spacing-3); } .textAreaContainer { - margin-top: var(--v2-spacing-2); - margin-bottom: var(--v2-spacing-3); + margin-top: var(--spacing-2); + margin-bottom: var(--spacing-3); } .textareaInfo { margin-top: -2px; text-align: right; + + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-3); + + color: var(--palette-text-100); } .textarea { width: 100%; height: 60px; box-sizing: border-box; - border: 1px solid var(--v2-colors-grey-300); - border-radius: var(--v2-round-corners); + border: 1px solid var(--palette-grey-300); + border-radius: var(--round-corners); + padding: var(--spacing-1); - font-family: var(--v2-font-family-primary); - font-weight: var(--v2-font-weight-primary-bold); - font-size: var(--v2-font-size-3); - line-height: var(--v2-line-height-3); + font-family: var(--font-family-primary); + font-weight: var(--font-weight-primary-regular); + font-size: var(--font-size-2); + line-height: var(--line-height-3); - color: var(--v2-colors-mono-500); + color: var(--palette-text-500); } .cancel { - margin-right: var(--v2-spacing-2); + margin-right: var(--spacing-2); } diff --git a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx index 046d068ac..affff6872 100644 --- a/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx +++ b/src/core/client/stream/tabs/Comments/Comment/ReportFlow/ReportCommentForm.tsx @@ -5,7 +5,10 @@ import React, { FunctionComponent } from "react"; import { Field, FieldProps, Form } from "react-final-form"; import { OnSubmit } from "coral-framework/lib/form"; -import { validateMaxLength } from "coral-framework/lib/validation"; +import { + customMessage, + validateMaxLength, +} from "coral-framework/lib/validation"; import CLASSES from "coral-stream/classes"; import { Flex, RadioButton } from "coral-ui/components/v2"; import { Button, ValidationMessage } from "coral-ui/components/v3"; @@ -150,34 +153,42 @@ class ReportCommentForm extends React.Component {
+ + Please restrict your report to 500 characters + + + )} > {({ input, meta }) => (