feat: update color palette [CW-2293] (#7617)

This commit is contained in:
Shivam Mishra
2023-08-01 21:34:10 +05:30
committed by GitHub
parent e052a061f4
commit 62e9fc1bc5
38 changed files with 241 additions and 171 deletions

View File

@@ -26,6 +26,7 @@ code {
background: $color-background;
border-radius: var(--border-radius-large);
padding: $space-two;
@apply bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100;
}
}

View File

@@ -72,7 +72,6 @@
@import '~shared/assets/stylesheets/ionicons';
@import 'utility-helpers';
.tooltip {
@apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
}

View File

@@ -1 +1,6 @@
// scss-lint:disable PropertySpelling
:root {
color-scheme: light dark;
}
@import 'woot';

View File

@@ -18,7 +18,15 @@
}
&.multiselect--disabled {
@apply opacity-80;
@apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
.multiselect__select {
@apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
}
.multiselect__tags {
@apply border-0;
}
}
.multiselect--active {
@@ -36,7 +44,7 @@
}
.multiselect__content-wrapper {
@apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
@apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
}
.multiselect__content {

View File

@@ -49,7 +49,7 @@
}
&.success {
@apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
@apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800 ;
}
&.alert {
@@ -64,19 +64,19 @@
@apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
&.secondary {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
}
&.success {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
}
&.alert {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
}
&.warning {
@apply border-slate-100 dark:border-slate-700;
@apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
}
}
}
@@ -90,7 +90,7 @@
}
&.success {
@apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800;
@apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
}
&.alert {
@@ -110,7 +110,7 @@
}
&.success {
@apply text-green-700 dark:text-green-100;
@apply text-green-700 dark:text-green-100 ;
}
&.alert {
@@ -125,19 +125,19 @@
@apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
&.secondary {
@apply hover:bg-slate-50 dark:hover:bg-slate-700;
@apply hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-800 dark:text-slate-100;
}
&.success {
@apply hover:bg-green-50 dark:hover:bg-green-800;
@apply hover:bg-green-50 dark:hover:bg-green-800 text-green-800 dark:text-green-100;
}
&.alert {
@apply hover:bg-red-50 dark:hover:bg-red-800;
@apply hover:bg-red-50 dark:hover:bg-red-800 text-red-700 dark:text-red-100;
}
&.warning {
@apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
@apply hover:bg-yellow-50 dark:hover:bg-yellow-100 text-yellow-700 dark:text-yellow-700;
}
}

View File

@@ -129,7 +129,7 @@
@apply ml-auto break-words rounded-l-lg rounded-r;
&.is-private {
@apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
@apply text-black-900 dark:text-black-900 relative border border-solid bg-yellow-100 border-yellow-200 dark:bg-yellow-300/70 dark:border-0;
}
&.is-image {

View File

@@ -31,7 +31,7 @@
}
.tabs-title {
@apply flex-shrink-0 my-0 mx-2;
@apply flex-shrink-0 my-0 mx-2 ;
.badge {
@apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@@ -53,7 +53,7 @@
}
a {
@apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
@apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
transition: border-color 0.15s $swift-ease-out-function;
}

View File

@@ -15,7 +15,7 @@
>
<div class="flex max-w-[85%] justify-center items-center">
<h1
class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis mb-0"
class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
:title="pageTitle"
>
{{ pageTitle }}

View File

@@ -2,7 +2,7 @@
<div
class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
:class="{
'pt-4 border-b border-solid border-slate-50 dark:border-slate-600': showBorder,
'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
}"
>
<div class="w-[30%] min-w-0 max-w-[30%] pr-12">

View File

@@ -51,7 +51,7 @@ export default {
},
computed: {
computedClass() {
return `button nice ${this.buttonClass || ' '}`;
return `button nice gap-2 ${this.buttonClass || ' '}`;
},
},
methods: {
@@ -63,11 +63,9 @@ export default {
</script>
<style lang="scss" scoped>
button:disabled {
opacity: 1;
background-color: var(--w-100);
@apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
&:hover {
background-color: var(--w-100);
@apply bg-woot-100 dark:bg-woot-500/25;
}
}
</style>

View File

@@ -1,7 +1,7 @@
<template>
<div
v-if="showShowCurrentAccountContext"
class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
@mouseover="setShowSwitch"
@mouseleave="resetShowSwitch"
>
@@ -14,7 +14,7 @@
<transition name="fade">
<div
v-if="showSwitchButton"
class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full justify-end absolute top-0 right-0 w-full"
class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
>
<div class="my-0 mx-2">
<woot-button
@@ -71,7 +71,7 @@ export default {
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
rgb(55, 84, 109) 50%
rgb(21, 23, 24) 50%
);
}
@@ -87,7 +87,7 @@ export default {
background-image: linear-gradient(
to left,
rgba(0, 0, 0, 0) 0%,
rgb(55, 84, 109) 50%
rgb(21, 23, 24) 50%
);
}
}

View File

@@ -1,7 +1,7 @@
<template>
<div class="mb-4">
<button
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
:class="{
'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
}"

View File

@@ -3,7 +3,7 @@
<a
v-tooltip.right="$t(`SIDEBAR.${name}`)"
:href="href"
class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
:class="{
'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
isActive || isChildMenuActive,

View File

@@ -22,7 +22,7 @@
class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
>
<fluent-icon
class="text-xxs text-slate-600 dark:text-slate-200"
class="text-xxs text-slate-700 dark:text-slate-200"
:class="{
'text-woot-500 dark:text-woot-500': isActive,
}"
@@ -41,7 +41,7 @@
>
<span
:title="menuTitle"
class="text-sm text-slate-600 dark:text-slate-100"
class="text-sm text-slate-700 dark:text-slate-100"
:class="{
'text-woot-500 dark:text-woot-500': isActive,
'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
@@ -54,8 +54,8 @@
class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
:class="
isCountZero
? `text-slate-300 dark:text-slate-600`
: `text-slate-600 dark:text-slate-50`
? `text-slate-300 dark:text-slate-700`
: `text-slate-700 dark:text-slate-50`
"
>
{{ childItemCount }}

View File

@@ -213,7 +213,7 @@ export default {
}
.filter.has-error {
@apply bg-red-50 dark:bg-red-100;
@apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
}
.filter-inputs {
@@ -221,7 +221,7 @@ export default {
}
.filter-error {
@apply text-red-500 dark:text-red-600 block my-1 mx-0;
@apply text-red-500 dark:text-red-200 block my-1 mx-0;
}
.action__question,

View File

@@ -61,21 +61,16 @@ export default {
}
.colorpicker--selected {
border: 1px solid var(--color-border-light);
border-radius: $space-smaller;
cursor: pointer;
height: $space-large;
margin-bottom: $space-normal;
width: $space-large;
@apply border border-solid border-slate-50 dark:border-slate-600 rounded cursor-pointer h-8 w-8 mb-4;
}
.colorpicker--chrome.vc-chrome {
@include elegant-card;
@apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-slate-75 dark:border-slate-600 rounded;
border: 1px solid $color-border;
border-radius: $space-smaller;
margin-top: -$space-one;
position: absolute;
z-index: 9999;
::v-deep {
input {
@apply bg-white dark:bg-white;
}
}
}
</style>

View File

@@ -114,10 +114,7 @@
@click="removeFilter"
/>
</div>
<p
v-if="v.values.$dirty && v.values.$error"
class="text-red-500 dark:text-red-600 block my-1 mx-0"
>
<p v-if="v.values.$dirty && v.values.$error" class="filter-error">
{{ $t('FILTER.EMPTY_VALUE_ERROR') }}
</p>
</div>
@@ -127,7 +124,7 @@
class="flex items-center justify-center relative my-2.5 mx-0"
>
<hr
class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-600"
class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
/>
<select
v-model="query_operator"
@@ -273,8 +270,8 @@ export default {
},
getInputErrorClass(isDirty, hasError) {
return isDirty && hasError
? 'bg-red-50 dark:bg-red-200 border-red-100 dark:border-red-300 '
: 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
: 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
},
},
};
@@ -286,6 +283,10 @@ export default {
}
}
.filter-error {
@apply text-red-500 dark:text-red-200 block my-1 mx-0;
}
.multiselect {
@apply mb-0;
}

View File

@@ -456,6 +456,31 @@ export default {
}
> .ProseMirror {
@apply p-0 break-words text-slate-800 dark:text-slate-100;
h1,
h2,
h3,
h4,
h5,
h6 {
@apply text-slate-800 dark:text-slate-100;
}
p {
@apply text-slate-800 dark:text-slate-100;
}
blockquote {
@apply border-slate-400 dark:border-slate-500;
p {
@apply text-slate-600 dark:text-slate-400;
}
}
ol li {
@apply list-item list-decimal;
}
}
}

View File

@@ -23,7 +23,7 @@
</label>
</div>
<div
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
>
<filter-input-box
v-for="(filter, i) in appliedFilters"

View File

@@ -1,8 +1,8 @@
<template>
<div
class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-50 dark:hover:bg-slate-800 group"
class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-25 dark:hover:bg-slate-800 group"
:class="{
'active bg-slate-50 dark:bg-slate-800 border-woot-500': isActiveChat,
'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
'unread-chat': hasUnread,
'has-inbox-name': showInboxName,
'conversation-selected': selected,

View File

@@ -2,7 +2,7 @@
<div class="phone-input--wrap relative">
<div class="phone-input" :class="{ 'has-error': error }">
<div
class="cursor-pointer py-2 pr-1 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-2 bg-slate-25 dark:bg-slate-700 h-10 w-[3.25rem]"
class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
@click="toggleCountryDropdown"
>
<h5 v-if="activeCountry.emoji" class="mb-0">

View File

@@ -2,11 +2,17 @@
<router-link :to="navigateTo" class="contact-item">
<woot-thumbnail :src="thumbnail" :username="name" size="24px" />
<div class="contact-details">
<h5 class="text-block-title name">{{ name }}</h5>
<h5 class="text-block-title name text-slate-800 dark:text-slate-200">
{{ name }}
</h5>
<p class="details-meta">
<span v-if="email" class="email">{{ email }}</span>
<span v-if="phone" class="separator"></span>
<span v-if="phone" class="phone">
<span v-if="email" class="email text-slate-800 dark:text-slate-200">{{
email
}}</span>
<span v-if="phone" class="separator text-slate-700 dark:text-slate-200">
</span>
<span v-if="phone" class="phone text-slate-800 dark:text-slate-200">
{{ phone }}
</span>
</p>

View File

@@ -21,13 +21,16 @@
</div>
</div>
<div class="user-details">
<h5 v-if="name" class="text-block-title name">
<h5
v-if="name"
class="text-block-title name text-slate-800 dark:text-slate-100"
>
<span class="pre-text"> {{ $t('SEARCH.FROM') }}: </span>
{{ name }}
</h5>
<h5
v-if="email"
class="text-block-title email overflow-hidden whitespace-nowrap text-ellipsis"
class="text-block-title email text-slate-700 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
>
<span class="pre-text">{{ $t('SEARCH.EMAIL') }}:</span>
{{ email }}

View File

@@ -60,10 +60,21 @@ export default {
};
</script>
<style>
<style lang="scss">
ninja-keys {
--ninja-accent-color: var(--w-500);
--ninja-font-family: 'PlusJakarta';
z-index: 9999;
@media (prefers-color-scheme: dark) {
--ninja-overflow-background: rgba(26, 29, 30, 0.5);
--ninja-modal-background: #151718;
--ninja-secondary-background-color: #26292b;
--ninja-selected-background: #26292b;
--ninja-footer-background: #2b2f31;
--ninja-text-color: #f8faf9;
--ninja-icon-color: #f8faf9;
--ninja-secondary-text-color: #c2c9c6;
}
}
</style>

View File

@@ -23,7 +23,7 @@
</label>
</div>
<div
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
>
<filter-input-box
v-for="(filter, i) in appliedFilters"

View File

@@ -6,7 +6,7 @@
<div class="flex items-center justify-center max-w-full min-w-[6.25rem]">
<woot-sidemenu-icon />
<h1
class="m-0 text-2xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
class="m-0 text-xl text-slate-900 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis my-0 mx-2"
>
{{ headerTitle }}
</h1>

View File

@@ -1,5 +1,9 @@
<template>
<div>Loading...</div>
<div
class="text-slate-600 dark:text-slate-200 flex items-center justify-center w-full"
>
Loading...
</div>
</template>
<script>
import uiSettingsMixin from 'dashboard/mixins/uiSettings';

View File

@@ -1,5 +1,5 @@
<template>
<div class="container overflow-auto">
<div class="py-0 px-4 w-full max-w-full overflow-auto">
<article-header
:header-title="headerTitle"
:count="meta.count"
@@ -13,9 +13,14 @@
@page-change="onPageChange"
@reorder="onReorder"
/>
<div v-if="shouldShowLoader" class="articles--loader">
<div
v-if="shouldShowLoader"
class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
>
<spinner />
<span>{{ $t('HELP_CENTER.TABLE.LOADING_MESSAGE') }}</span>
<span class="text-slate-600 dark:text-slate-200">{{
$t('HELP_CENTER.TABLE.LOADING_MESSAGE')
}}</span>
</div>
<empty-state
v-else-if="shouldShowEmptyState"
@@ -148,18 +153,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.container {
padding: 0 var(--space-normal);
width: 100%;
overflow: auto;
.articles--loader {
align-items: center;
display: flex;
font-size: var(--font-size-default);
justify-content: center;
padding: var(--space-big);
}
}
</style>

View File

@@ -1,5 +1,5 @@
<template>
<div class="container py-2 px-4 w-full">
<div class="py-2 px-4 w-full max-w-full">
<div class="flex justify-between items-center mt-0 mb-2 mx-0 h-12">
<div class="flex items-center">
<woot-sidemenu-icon />

View File

@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-1 h-full justify-between flex-col m-0 bg-light dark:bg-slate-900"
class="flex flex-1 h-full justify-between flex-col m-0 bg-slate-25 dark:bg-slate-900"
>
<settings-header
button-route="new"

View File

@@ -2,7 +2,7 @@
<div class="flex-grow flex-shrink min-w-0 p-6 overflow-auto">
<form v-if="!uiFlags.isFetchingItem" @submit.prevent="updateAccount">
<div
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-700"
class="flex flex-row p-4 border-b border-slate-25 dark:border-slate-800"
>
<div
class="flex-grow-0 flex-shrink-0 flex-[25%] min-w-0 py-4 pr-6 pl-0"

View File

@@ -11,7 +11,10 @@
</woot-tabs>
<div class="w-full">
<p v-if="!uiFlags.isFetching && !attributes.length" class="mt-12">
<p
v-if="!uiFlags.isFetching && !attributes.length"
class="mt-12 flex items-center justify-center"
>
{{ $t('ATTRIBUTES_MGMT.LIST.EMPTY_RESULT.404') }}
</p>
<woot-loading-state

View File

@@ -2,7 +2,7 @@
<div class="flex-1 overflow-auto p-4">
<router-link
:to="addAccountScoping('settings/macros/new')"
class="button success button--fixed-top"
class="button success button--fixed-top flex gap-1"
>
<fluent-icon icon="add-circle" />
<span class="button__content">

View File

@@ -116,7 +116,7 @@ export default {
&.has-error {
animation: shake 0.3s ease-in-out 0s 2;
@apply bg-red-50 dark:bg-red-100;
@apply bg-red-50 dark:bg-red-800;
}
}
}

View File

@@ -173,7 +173,7 @@ export default {
}
.box-shadow-blue-dark {
box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #37546d;
box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #4c5155;
}
}
</style>
@@ -185,7 +185,7 @@ export default {
$space-slab: 12px;
@media (prefers-color-scheme: dark) {
$color-bg-dark: #293f51;
$color-bg-dark: #26292b;
@include arrow(bottom, $color-bg-dark, $space-slab);
}
@media (prefers-color-scheme: light) {