From 6e3e1aa31019e47b67c3eb4e66f4ff35bf2030b2 Mon Sep 17 00:00:00 2001 From: Tanvi Bhakta Date: Tue, 20 Jun 2023 14:34:13 +0530 Subject: [PATCH] fix: design-system-old fixes (#24421) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description Fixes 1. Gif player icon is now new colors 2. EditableText no longer contains old grays #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change - Bug fix (non-breaking change which fixes an issue) > ## Testing > #### How Has This Been Tested? > Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration. > Delete anything that is not relevant - [ ] Manual - [ ] Jest - [ ] Cypress > > #### Test Plan > Add Testsmith test cases links that relate to this PR > > #### Issues raised during DP testing > https://github.com/appsmithorg/appsmith/pull/24421#issuecomment-1590809603 > > > ## Checklist: #### Dev activity - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> (cherry picked from commit bb1650d80b470b41dcd1defc2cd48480df01cd1f) --- app/client/package.json | 2 +- .../widgets-old/src/themes/default/index.css | 328 ------------------ app/client/src/index.css | 2 +- app/client/yarn.lock | 10 +- 4 files changed, 7 insertions(+), 335 deletions(-) diff --git a/app/client/package.json b/app/client/package.json index 2504d4aec3..916e97c678 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -93,7 +93,7 @@ "dayjs": "^1.10.6", "deep-diff": "^1.0.2", "design-system": "npm:@appsmithorg/design-system@2.1.12", - "design-system-old": "npm:@appsmithorg/design-system-old@1.1.9", + "design-system-old": "npm:@appsmithorg/design-system-old@1.1.10", "downloadjs": "^1.4.7", "fast-deep-equal": "^3.1.3", "fast-xml-parser": "^3.17.5", diff --git a/app/client/packages/design-system/widgets-old/src/themes/default/index.css b/app/client/packages/design-system/widgets-old/src/themes/default/index.css index 041b14ec0b..f5ffc28fef 100644 --- a/app/client/packages/design-system/widgets-old/src/themes/default/index.css +++ b/app/client/packages/design-system/widgets-old/src/themes/default/index.css @@ -38,59 +38,6 @@ * */ - /** API Pane */ - --ads-api-pane-settings-text-color: var(--ads-old-color-gray-10); - - /** AppIcon */ - --ads-app-icon-normal-color: var(--ads-color-black-550); - --ads-app-icon-background-color: var(--ads-color-black-25); - - /* Breadcrumbs */ - --ads-breadcrumbs-list-text-color: var(--ads-old-color-dove-gray); - --ads-breadcrumbs-separator-text-color: var(--ads-old-color-dove-gray); - --ads-breadcrumbs-active-text-color: var(--ads-color-black-900); - - /** Button Group */ - --ads-button-group-selected-border-color: var(--ads-old-color-gray-10); - --ads-button-group-border-color: var(--ads-color-black-250); - --ads-button-group-focus-background-color: var(--ads-old-color-gallery-2); - --ads-button-group-hover-background-color: var(--ads-old-color-gallery-2); - --ads-button-group-svg-path-fill-color: var(--ads-old-color-gray-7); - - /** Callout */ - --ads-callout-info-text-color: #d44100; - --ads-callout-info-background-color: #f8f3f0; - --ads-callout-success-text-color: var(--ads-old-color-jade); - --ads-callout-success-background-color: #e4f4ed; - --ads-callout-danger-text-color: var(--ads-old-color-pomegranate); - --ads-callout-danger-background-color: #f9e9e9; - --ads-callout-warning-text-color: var(--ads-old-color-sun); - --ads-callout-warning-background-color: #faf3e3; - - /** Checkbox */ - --ads-checkbox-disabled-checked-background-color: #e8e8e8; - --ads-checkbox-disabled-checked-border-color: #e8e8e8; - --ads-checkbox-default-unchecked-border-color: #404040; - --ads-checkbox-after-disabled-checked-border-color: #939090; - --ads-checkbox-after-default-checked-border-color: var( - --ads-color-brand-text - ); - --ads-checkbox-label-text-color: var(--ads-old-color-alto); - - /** ColorSelector */ - --ads-color-selector-shadow-color: #e8e8e8; - --ads-color-selector-checkmark-color: #000000; - - /** Dialog Component */ - --ads-dialog-component-default-background-color: var(--ads-color-black-0); - --ads-dialog-component-header-text-text-color: var(--ads-color-black-900); - --ads-dialog-component-dialog-header-underline-color: #c5c5c5; - --ads-dialog-component-icon-background-color: #ffdede; - - /** Display Image Upload */ - --ads-display-image-upload-background-color: var(--ads-old-color-pigeon-post); - --ads-display-image-upload-label-text-color: var(--ads-old-color-royal-blue); - /** Dropdown */ --ads-dropdown-hover-background-color: var(--ads-old-color-gallery-2); --ads-dropdown-selected-text-color: var(--ads-old-color-gray-10); @@ -117,107 +64,6 @@ --ads-old-color-gallery-2 ); - /** EditableTextSubComponent */ - --ads-editable-text-subcomponent-error-background-color: var( - --ads-old-color-pomegranate - ); - --ads-editable-text-subcomponent-default-background-color: var( - --ads-color-black-75 - ); - --ads-editable-text-subcomponent-error-text-color: var( - --ads-old-color-pomegranate - ); - --ads-editable-text-subcomponent-default-text-color: var( - --ads-color-black-750 - ); - - /** EditableTextWrapper */ - --ads-editable-text-wrapper-default-text-color: var(--ads-old-color-alto); - - /** Emoji Reactions */ - --ads-emoji-reactions-bubble-background-color: var(--ads-color-black-75); - --ads-emoji-reactions-bubble-active-background-color: var( - --ads-old-color-bridesmaid - ); - --ads-emoji-reactions-bubble-active-border-color: var( - --ads-old-color-rock-spray - ); - --ads-emoji-reactions-bubble-hover-background-color: var( - --ads-old-color-gallery-2 - ); - --ads-emoji-reactions-count-text-color: var(--ads-old-color-dove-gray); - --ads-emoji-reactions-count-active-text-color: var( - --ads-old-color-rock-spray - ); - --ads-emoji-reactions-count-hover-text-color: var(--ads-color-black-750); - - /** FilePickerV2 */ - --ads-file-picker-v2-default-background-color: var(--ads-color-black-75); - --ads-file-picker-v2-default-text-color: var(--ads-old-color-dove-gray-2); - --ads-file-picker-v2-success-text-color: var(--ads-old-color-jade); - --ads-file-picker-v2-upload-progress-background-color: var( - --ads-color-black-470 - ); - --ads-file-picker-v2-upload-success-background-color: var( - --ads-old-color-fun-green - ); - --ads-file-picker-v2-upload-icon-fill-color: var(--ads-color-black-800); - --ads-file-picker-v2-remove-button-background-color-gradient-start: rgba( - 253, - 253, - 253, - 0.0001 - ); - --ads-file-picker-v2-remove-button-background-color-gradient-end: rgba( - 250, - 250, - 250, - 0.898847 - ); - - /** Form Group */ - --ads-form-group-label-text-color: var(--ads-old-color-gray-10); - - /** FormMessage */ - --ads-form-message-danger-text-color: var(--ads-old-color-danger-red); - --ads-form-message-primary-text-color: var(--ads-color-black-0); - --ads-form-message-success-text-color: var(--ads-old-color-jade); - --ads-form-message-warning-text-color: var(--ads-old-color-warning); - --ads-form-message-light-success-text-color: var(--ads-old-color-fun-green-2); - - --ads-form-message-danger-background-color: var( - --ads-old-color-danger-red-opacity-80 - ); - --ads-form-message-primary-background-color: var(--ads-old-color-jade); - --ads-form-message-success-background-color: #172320; - --ads-form-message-warning-background-color: var( - --ads-old-color-warning-opacity-80 - ); - --ads-form-message-light-success-background-color: #effff4; - - /** Gif Player */ - --ads-gif-player-icon-path-fill-color: var(--ads-old-color-silver); - --ads-gif-player-icon-circle-fill-color: var(--ads-old-color-gray-10); - --ads-gif-player-text-color: var(--ads-old-color-dove-gray-3); - --ads-gif-player-overlay-background-color: var(--ads-color-black-0); - - /** HighlightText */ - --ads-highlight-text-default-text-color: var(--ads-color-orange-800); - --ads-highlight-text-default-background-color: var(--ads-color-orange-100); - - /** Icon Selector */ - --ads-icon-selector-scrollbar-thumb-background-color: var( - --ads-color-black-450 - ); - --ads-icon-selector-app-icon-background-color: var(--ads-color-black-25); - --ads-icon-selector-selected-icon-fill-color: var(--ads-color-black-0); - - /** Info */ - --ads-info-main-text-color: var(--ads-color-brand); - - /** Input */ - --ads-input-focus-border-color: var(--ads-color-black-900); - /** Intent Colors */ --ads-intent-color-primary: var(--ads-old-color-jade); --ads-intent-color-secondary: var(--ads-old-color-black-pearl); @@ -227,75 +73,14 @@ --ads-intent-color-warning: var(--ads-old-color-jaffa); --ads-intent-color-success-light: var(--ads-old-color-jade); - /* JSToggleButton */ - --ads-js-toggle-button-default-border-color: var(--ads-color-black-700); - --ads-js-toggle-button-default-background-color: var(--ads-color-black-0); - --ads-js-toggle-button-disabled-border-color: var(--ads-color-black-400); - --ads-js-toggle-button-disabled-background-color: var(--ads-color-black-200); - --ads-js-toggle-button-active-disabled-background-color: var( - --ads-color-black-400 - ); - --ads-js-toggle-button-active-background-color: var(--ads-color-black-800); - --ads-js-toggle-button-hover-active-background-color: var( - --ads-color-black-900 - ); - --ads-js-toggle-button-hover-background-color: var(--ads-color-black-200); - --ads-js-toggle-button-hover-disabled-active-background-color: var( - --ads-color-black-400 - ); - --ads-js-toggle-button-hover-disabled-background-color: var( - --ads-color-black-200 - ); - --ads-js-toggle-button-svg-path-active-fill-color: var(--ads-color-black-0); - --ads-js-toggle-button-svg-path-fill-color: var(--ads-color-black-700); - /** Label with Tooltip */ --ads-label-with-tooltip-default-text-color: var(--ads-color-black-550); --ads-label-with-tooltip-default-icon-fill-color: var(--ads-color-black-450); --ads-label-with-tooltip-hover-icon-fill-color: var(--ads-color-black-550); - /** Menu */ - --ads-menu-default-border-color: #404040; - /** Menu Divider */ --ads-menu-divider-border-color: var(--ads-old-color-mercury); - /** Multiswitch */ - --ads-multiswitch-tab-list-background-color: var(--ads-old-color-mercury); - --ads-multiswitch-border-color: var(--ads-color-black-250); - --ads-multiswitch-selected-background-color: var(--ads-color-black-0); - --ads-multiswitch-tab-header-background-color: var(--ads-color-black-0); - - /** Notification Banner */ - --ads-notification-banner-error-text-color: #c91818; - --ads-notification-banner-error-background-color: var( - --ads-old-color-fair-pink - ); - --ads-notification-banner-light-enterprise-text-color: #e8f5fa; - --ads-notification-banner-dark-enterprise-text-color: #00407d; - - /** Numbered Step */ - --ads-numbered-step-text-color: var(--ads-color-black-250); - --ads-numbered-step-line-background-color: var(--ads-old-color-black); - - /** Property Pane */ - --ads-property-pane-default-zoom-button-background-color: #2b2b2b; - --ads-property-pane-default-radio-group-button-text-color: #d4d4d4; - --ads-property-pane-default-button-text-color: #090707; - - /** Radio */ - --ads-radio-default-text-color: var(--ads-old-color-gray-10); - --ads-radio-default-border-color: var(--ads-old-color-mercury); - --ads-radio-disabled-background-color: #c5c5c5; - - /** Rectangular Switch */ - --ads-rectangular-switch-background-color: var(--ads-color-black-0); - --ads-rectangular-switch-hover-background-color: var(--ads-color-black-0); - --ads-rectangular-switch-slider-border-color: var(--ads-color-black-450); - --ads-rectangular-switch-slider-background-color: var(--ads-color-brand); - --ads-rectangular-switch-light-text-color: var(--ads-color-black-0); - --ads-rectangular-switch-dark-text-color: var(--ads-color-black-470); - /** Scroll Indicator */ --ads-scroll-indicator-light-thumb-background-color: var( --ads-old-color-black-750-opacity-50 @@ -314,108 +99,16 @@ --ads-search-input-border-color: var(--ads-color-black-400); --ads-search-input-active-border-color: var(--ads-color-black-900); - /** Showcase Carousel */ - --ads-showcase-carousel-dot-background-color: var(--ads-old-color-bridesmaid); - --ads-showcase-carousel-dot-active-background-color: var(--ads-color-brand); - - /** Statusbar */ - --ads-statusbar-active-background-color: var(--ads-color-brand); - --ads-statusbar-height: 92px; - --ads-statusbar-active-p-text-color: var(--ads-color-brand-text); - --ads-statusbar-active-svg-fill-color: var(--ads-color-brand-text); - --ads-statusbar-status-text-color: var(--ads-old-color-black); - --ads-statusbar-progress-bar-active-background-color: var(--ads-color-brand); - --ads-statusbar-progress-bar-background-color: var(--ads-color-brand-text); - - /** StepComponent */ - --ads-step-component-wrapper-background-color: var(--ads-color-black-250); - --ads-step-component-wrapper-svg-fill-color: var(--ads-color-black-750); - --ads-step-component-input-wrapper-text-color: var(--ads-color-black-750); - --ads-step-component-input-wrapper-background-color: var(--ads-color-black-0); - - /** Table */ - --ads-table-table-row-background-color: var(--ads-color-black-25); - --ads-table-table-header-default-text-color: var(--ads-color-black-470); - --ads-table-table-header-hover-text-color: var(--ads-color-black-850); - --ads-table-table-header-hover-icon-path-color: var(--ads-color-black-850); - --ads-table-table-row-first-table-data-default-text-color: var( - --ads-color-black-850 - ); - --ads-table-table-row-table-data-default-text-color: var( - --ads-color-black-550 - ); - --ads-table-table-row-table-data-border-bottom-color: var( - --ads-old-color-mercury - ); - --ads-table-table-row-hover-background-color: var(--ads-color-black-75); - --ads-table-table-row-hover-icon-path-color: var(--ads-old-color-gray-10); - --ads-table-table-row-first-table-data-hover-text-color: var( - --ads-old-color-gray-10 - ); - --ads-table-table-row-table-data-hover-text-color: var(--ads-color-black-850); - /** TableDropdown */ --ads-table-dropdown-background-color: var(--ads-color-black-0); --ads-table-dropdown-selected-background-color: var(--ads-color-black-75); --ads-table-dropdown-selected-hover-text-color: var(--ads-color-black-850); - /** Tabs */ - --ads-tabs-default-tab-list-text-color: var(--ads-old-color-gray-7); - --ads-tabs-default-tab-list-svg-fill-color: var(--ads-color-black-0); - --ads-tabs-default-tab-list-response-viewer-background-color: var( - --ads-old-color-mercury - ); - --ads-tabs-default-tab-focus-response-viewer-border-color: var( - --ads-color-black-250 - ); - --ads-tabs-tab-selected-svg-fill-color: var(--ads-color-black-750); - --ads-tabs-tab-selected-response-viewer-background-color: var( - --ads-color-black-0 - ); - --ads-tabs-tab-selected-response-viewer-border-color: var( - --ads-color-black-250 - ); - --ads-tabs-tab-title-response-viewer-text-color: var(--ads-color-text); - --ads-tabs-count-background-color: var(--ads-old-color-mercury); - --ads-tabs-title-wrapper-text-color: var(--ads-old-color-gray-7); - --ads-tabs-title-wrapper-hover-text-color: var(--ads-color-black-750); - --ads-tabs-title-wrapper-icon-fill-color: var(--ads-old-color-gray-7); - - /** Tab Item Background fill */ - --ads-tab-item-text-color: var(--ads-color-text); - --ads-tab-item-focus-background-color: var(--ads-color-black-75); - --ads-tab-item-focus-text-color: var(--ads-color-black-900); - - /** Tag Input */ - --ads-tag-input-background-color: var(--ads-color-black-0); - --ads-tag-input-border-color: var(--ads-color-black-250); - --ads-tag-input-text-color: var(--ads-color-black-850); - --ads-tag-input-placeholder-color: var(--ads-old-color-alto); - --ads-tag-input-active-border-color: var(--ads-color-brand); - --ads-tag-input-active-box-shadow: "none"; - --ads-tag-input-tag-text-color: var(--ads-color-black-0); - --ads-tag-input-tag-background-color: var(--ads-color-brand); - /** Text */ --ads-text-color: var(--ads-color-text); --ads-text-heading-color: var(--ads-color-black-850); --ads-text-highlight-color: var(--ads-color-black-0); - /** TextInput */ - --ads-text-input-text-box-default-background-color: #ffffff; - --ads-text-input-text-box-default-text-color: #090707; - --ads-text-input-text-box-default-border-color: #e0dede; - --ads-text-input-text-box-disabled-background-color: #f0f0f0; - --ads-text-input-text-box-disabled-text-color: #6d6d6d; - --ads-text-input-text-box-disabled-border-color: #f0f0f0; - --ads-text-input-text-box-read-only-background-color: #f0f0f0; - --ads-text-input-text-box-read-only-text-color: #716e6e; - --ads-text-input-text-box-read-only-border-color: #f0f0f0; - --ads-text-input-text-box-hover-background-color: #fafafa; - --ads-text-input-icon-path-color: #716e6e; - --ads-text-input-placeholder-text-color: #a9a7a7; - --ads-text-input-helper-text-text-color: #858282; - /* Toast */ --ads-toast-background-color: var(--ads-old-color-gray-10); --ads-toast-icon-fill-color: #dcad00; @@ -424,24 +117,6 @@ --ads-toast-undo-text-color: var(--ads-color-brand); --ads-toast-redo-text-color: var(--ads-color-brand); - /* Toggle */ - --ads-toggle-slider-background-color: var(--ads-color-black-250); - --ads-toggle-slider-loading-background-color: var(--ads-old-color-mercury); - --ads-toggle-slider-disabled-on-background-color: var(--ads-color-black-0); - --ads-toggle-slider-disabled-off-background-color: var(--ads-color-black-0); - --ads-toggle-on-background-color: var(--ads-color-brand); - --ads-toggle-hover-on-background-color: var(--ads-color-brand-hover); - --ads-toggle-hover-off-background-color: var(--ads-color-black-450); - --ads-toggle-disabled-on-background-color: var(--ads-old-color-bridesmaid); - --ads-toggle-disabled-off-background-color: var(--ads-color-black-250); - --ads-toggle-spinner-stroke-color: var(--ads-color-black-450); - - /** Tree Dropdown */ - --ads-tree-dropdown-menu-default-background-color: var(--ads-color-black-5); - --ads-tree-dropdown-menu-default-text-color: var(--ads-color-black-750); - --ads-tree-dropdown-menu-selected-text-color: var(--ads-color-black-750); - --ads-tree-dropdown-target-background-color: var(--ads-color-black-0); - /** Uncategorized/common */ --ads-danger-main: #e22c2c; --appsmith-input-focus-border-color: var(--ads-color-black-900); @@ -449,7 +124,4 @@ --ads-property-pane-default-label-fill-color: var(--ads-color-black-750); --ads-small-header-height: 32px; --ads-bottom-bar-height: 34px; - - /** Uneditable Text Field */ - --ads-uneditable-text-field-label-text-color: var(--ads-color-black-750); } diff --git a/app/client/src/index.css b/app/client/src/index.css index 140be2ca9e..c42309263b 100755 --- a/app/client/src/index.css +++ b/app/client/src/index.css @@ -10,7 +10,7 @@ @import "assets/fonts/google/index.css"; :root { - /* TODO: This needs to be fixed! This oveerride is to mainatain branding changes. */ + /* TODO: This needs to be fixed! This override is to maintain branding changes. */ --ads-color-background-secondary: var(--ads-v2-color-bg-subtle); } diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 7102f56df7..a48aa84f37 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -9647,7 +9647,7 @@ __metadata: dayjs: ^1.10.6 deep-diff: ^1.0.2 design-system: "npm:@appsmithorg/design-system@2.1.12" - design-system-old: "npm:@appsmithorg/design-system-old@1.1.9" + design-system-old: "npm:@appsmithorg/design-system-old@1.1.10" diff: ^5.0.0 dotenv: ^8.1.0 downloadjs: ^1.4.7 @@ -13651,9 +13651,9 @@ __metadata: languageName: node linkType: hard -"design-system-old@npm:@appsmithorg/design-system-old@1.1.9": - version: 1.1.9 - resolution: "@appsmithorg/design-system-old@npm:1.1.9" +"design-system-old@npm:@appsmithorg/design-system-old@1.1.10": + version: 1.1.10 + resolution: "@appsmithorg/design-system-old@npm:1.1.10" dependencies: emoji-mart: 3.0.1 peerDependencies: @@ -13673,7 +13673,7 @@ __metadata: remixicon-react: ^1.0.0 styled-components: 5.3.6 tinycolor2: ^1.4.2 - checksum: c577f912c19f5990f62abb5c3c82dd084bc9baf8b8acd3f095ea9bf3ea578c97a335e41097c72b4e93e98e791246f6ab32a9a8f3b795497c658269eb4162c5f9 + checksum: 9eb74a7d59f3db7f6b19f31fecf0381247a094a8655cf4a5e64b7318e2659e28c643382f429d2aed601acf1209c062de7fb6071fa03ea0e5eb3830f840384fa7 languageName: node linkType: hard