Merge pull request #9 from beclab/feat/dialog-theme

feat: adapting dialog for dark and light themes

README.md

@@ -1 +1 @@
-# Terminus UI Library
+# Terminus UI Library [![npm](https://img.shields.io/npm/v/@bytetrade/ui?style=flat-square)](https://www.npmjs.com/package/@bytetrade/ui)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytetrade/ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

packages/dialog/src/DialogBar.vue

@@ -9,7 +9,7 @@
 			{{ title }}
 		</div>
 		<q-space />
-		<q-btn dense flat icon="close" v-close-popup @click="onCancel">
+		<q-btn dense flat icon="close" color="ink-3" v-close-popup @click="onCancel">
 			<q-tooltip>Close</q-tooltip>
 		</q-btn>
 	</q-bar>
@@ -47,7 +47,7 @@ const $q = useQuasar();
 
 <style scoped lang="scss">
 .mobile-title {
-	color: #322f2d;
+	color: $ink-1;
 	font-size: 16px;
 	text-align: center;
 	font-weight: 500;
@@ -56,11 +56,11 @@ const $q = useQuasar();
     text-overflow: ellipsis;
 }
 .bar {
-	background-color: #f8f8f8;
+	background-color: $background-3;
 	.title {
 		height: 18px;
 		line-height: 18px;
-		color: #322f2d;
+		color: $ink-1;
 		font-size: 14px;
         white-space: nowrap;
         overflow: hidden;

packages/dialog/src/DialogFooter.vue

@@ -114,15 +114,15 @@ const onOK = (e: any) => {
 	border-radius: 8px;
 	font-weight: 500;
 	font-size: 12px;
-	background: #ffeb3b;
-	color: #1f1814;
+	background: $yellow-6;
+	color: $yellow-default;
 }
 .but-cancel {
 	border-radius: 8px;
 	font-weight: 500;
 	font-size: 12px;
-	border: 1px solid #e0e0e0;
-	color: #4d4742;
+	border: 1px solid $btn-stroke;
+	color: $ink-2;
 }
 
 .card-action {
@@ -136,15 +136,15 @@ const onOK = (e: any) => {
 	font-size: 16px;
 	font-weight: 500;
 	border-radius: 8px;
-	border: 1px solid #EBEBEB;
-	background: #FFFFFF;
+    border: 1px solid $btn-stroke;
+    color: $ink-2;
 }
 
 .but-mobile-confirm {
 	height: 48px;
 		font-size: 16px;
 	font-weight: 500;
 	border-radius: 8px;
-	background:  #FFEB3B;
+	background:  $yellow-6;
 }
 </style>

packages/dialog/src/IndexDialog.vue

@@ -18,6 +18,7 @@
                         class="prompt-input"
                         v-model="promptModel"
                         borderless
+                        input-class="text-ink-2"
                         dense
                         :placeholder="prompt.placeholder"
                     />
@@ -134,15 +135,15 @@ const onCancel = () => {
     .card-continer {
         border-radius: 12px;
         .prompt-name {
-            color: rgba(173, 173, 173, 1);
+            color: $ink-3;
             font-size: 12px;
             line-height: 16px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
         .prompt-input {
-            border: 1px solid rgba(235, 235, 235, 1);
+            border: 1px solid $input-stroke;
             border-radius: 8px;
             padding: 0 10px;
         }