fix: design-system-old fixes (#24421)

## 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 bb1650d80b)
This commit is contained in:
Tanvi Bhakta 2023-06-20 14:34:13 +05:30 committed by albinAppsmith
parent 3c98da4b6a
commit 6e3e1aa310
4 changed files with 7 additions and 335 deletions

View File

@ -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",

View File

@ -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);
}

View File

@ -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);
}

View File

@ -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