feat(ktoaster): introduce kui tokens [KHCP-7729]

Kong · Jul 27, 2023 · 8ae7b3d · 8ae7b3d
1 parent f5bbcb5
commit 8ae7b3d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 33 deletions.
diff --git a/docs/components/toaster.md b/docs/components/toaster.md
@@ -78,10 +78,10 @@ The default argument passed to the toaster is the message.
 
 The Toaster uses the same appearance values as [KAlert](/components/alert) and are applied the same way.
 
-<KButton class="mr-2" appearance="primary" @click="openNotification({'appearance': 'info', 'message':'This toaster has info appearance'})">Open Toaster</KButton>
-<KButton class="success mr-2" appearance="primary" @click="openNotification({'appearance': 'success', 'message':'This toaster has success appearance'})">Open Toaster</KButton>
-<KButton class="mr-2" appearance="danger" @click="openNotification({'appearance': 'danger', 'message':'This toaster has danger appearance'})">Open Toaster</KButton>
-<KButton class="warning mr-2" appearance="primary" @click="openNotification({'appearance': 'warning', 'message':'This toaster has warning appearance'})">Open Toaster</KButton>
+<KButton class="my-button" appearance="primary" @click="openNotification({'appearance': 'info', 'message':'This toaster has info appearance'})">Open Toaster</KButton>
+<KButton class="success my-button" appearance="primary" @click="openNotification({'appearance': 'success', 'message':'This toaster has success appearance'})">Open Toaster</KButton>
+<KButton class="my-button" appearance="danger" @click="openNotification({'appearance': 'danger', 'message':'This toaster has danger appearance'})">Open Toaster</KButton>
+<KButton class="warning my-button" appearance="primary" @click="openNotification({'appearance': 'warning', 'message':'This toaster has warning appearance'})">Open Toaster</KButton>
 
 ```html
 <template>
@@ -148,8 +148,8 @@ export default defineComponent({
 
 You can view the current state of active toasters by calling `this.$toaster.toasters`. Click the buttons below to watch the state change
 
-<KButton class="success mr-2" appearance="primary" @click="openNotification({timeoutMilliseconds: 10000, message: 'Success Notification', appearance: 'success'})">Open Toaster</KButton>
-<KButton appearance="danger" @click="openNotification({'appearance': 'danger', 'message': 'Danger Notification'})" class="mr-2">Open Toaster</KButton>
+<KButton class="success my-button" appearance="primary" @click="openNotification({timeoutMilliseconds: 10000, message: 'Success Notification', appearance: 'success'})">Open Toaster</KButton>
+<KButton appearance="danger" @click="openNotification({'appearance': 'danger', 'message': 'Danger Notification'})" class="my-button">Open Toaster</KButton>
 <KButton @click="openNotification('Basic Notification')">Open Toaster</KButton>
 
 <pre class="language-json">
@@ -189,7 +189,7 @@ export default defineComponent({
 ### Long Content
 
 <br>
-<KButton @click="openNotification(`Before you release that email you're writing to spin up a new centralized decision-making group, it's worth talking about the four ways these groups consistently fail. They tend to be domineering, bottlenecked, status-oriented, or inert.`)" class="mr-2">Prose</KButton>
+<KButton @click="openNotification(`Before you release that email you're writing to spin up a new centralized decision-making group, it's worth talking about the four ways these groups consistently fail. They tend to be domineering, bottlenecked, status-oriented, or inert.`)" class="my-button">Prose</KButton>
 
 <KButton @click="openNotification({message:`Proxy error: Could not proxy request /api/service_packages?fields=&s=%7B%22%24and%22%3A%5B%7B%22name%22%3A%7B%22%24contL%22%3A%22%22%7D%7D%5D%7D&filter=&or=&sort=created_at%2CDESC&join=&limit=100&offset=0&page=1 from localhost:8080 to http://localhost:3000 (ECONNREFUSED).`, appearance: 'danger'})">Raw error message</KButton>
 
@@ -231,15 +231,18 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.my-button {
+  margin-right: 4px !important;
+}
 .success.k-button {
-  --KButtonPrimaryBase: var(--green-400);
-  --KButtonPrimaryHover: var(--green-300);
-  --KButtonPrimaryActive: var(--green-500)
+  --KButtonPrimaryBase: var(--green-400, #42d782);
+  --KButtonPrimaryHover: var(--green-300, #84e5ae);
+  --KButtonPrimaryActive: var(--green-500, #07a88d)
 }
 .warning.k-button {
-  --KButtonPrimaryBase: var(--yellow-300);
-  --KButtonPrimaryHover: var(--yellow-200);
-  --KButtonPrimaryActive: var(--yellow-200);
-  color: var(--black-70) !important;
+  --KButtonPrimaryBase: var(--yellow-300, #ffd68c);
+  --KButtonPrimaryHover: var(--yellow-200, #ffe6ba);
+  --KButtonPrimaryActive: var(--yellow-200, #ffe6ba);
+  color: var(--black-70, $kui-color-text) !important;
 }
 </style>
diff --git a/src/components/KToaster/KToaster.vue b/src/components/KToaster/KToaster.vue
@@ -44,15 +44,16 @@ defineEmits<{
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/tmp-variables';
 @import '@/styles/styles';
 
 $transition: all .3s;
 
 .toaster-container-outer {
-  bottom: 16px;
+  bottom: var(--kui-space-60, $kui-space-60);
   max-width: 300px;
   position: fixed;
-  right: 16px;
+  right: var(--kui-space-60, $kui-space-60);
   transition: $transition;
   width: auto;
   z-index: 10000;
@@ -61,31 +62,30 @@ $transition: all .3s;
 .toaster-item {
   box-shadow: 0 0 12px rgba(0,0,0,.12);
   display: flex;
-  margin-bottom: 16px;
+  margin-bottom: var(--kui-space-60, $kui-space-60);
   overflow: hidden;
   transition: $transition;
   width: 100%;
 
   :deep(.k-alert) {
-    --KAlertInfoBorder: var(--blue-500, color(blue-500));
-    --KAlertSuccessBorder: var(--green-400, color(green-400));
-    --KAlertWarningBorder: var(--yellow-300, color(yellow-300));
-    --KAlertDangerBorder: var(--red-500, color(red-500));
-    background-color: #fff;
-    color: var(--black-70);
+    --KAlertInfoBorder: var(--blue-500, var(--kui-color-border-primary, #{$kui-color-border-primary}));
+    --KAlertSuccessBorder: var(--green-400, #{$tmp-color-green-400});
+    --KAlertWarningBorder: var(--yellow-300, #{$tmp-color-yellow-300});
+    --KAlertDangerBorder: var(--red-500, var(--kui-color-border-danger-weak, #{$kui-color-border-danger-weak}));
+    background-color: var(--white, var(--kui-color-background, $kui-color-background));
+    color: var(--black-70, var(--kui-color-text, $kui-color-text));
     display: flex;
     flex: 1;
     justify-content: space-between;
-    margin-bottom: 0;
-    padding: 16px;
+    margin-bottom: var(--kui-space-0, $kui-space-0);
+    padding: var(--kui-space-60, $kui-space-60);
     text-align: left;
 
     .close {
       order: 1;
-      padding: 0 0 0 16px;
+      padding: var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0) var(--kui-space-60, $kui-space-60);
       position: relative;
-      right: 0;
-
+      right: var(--kui-space-0, $kui-space-0);
       &:focus,
       &:active {
         outline: none;

diff --git a/src/styles/_tmp-variables.scss b/src/styles/_tmp-variables.scss
@@ -11,6 +11,7 @@ $tmp-color-white: #ffffff;
 
 $tmp-color-green-100: #e8f8f5;
 $tmp-color-green-200: #c0f2d5;
+$tmp-color-green-300: #84e5ae;
 $tmp-color-green-400: #42d782;
 $tmp-color-green-500: #07a88d;
 $tmp-color-green-600: #008871;
@@ -39,11 +40,8 @@ $tmp-color-black-60: rgba(0, 0, 0, 0.6);
 $tmp-color-gray-weaker: #e0e4ea; // color-border-neutral-weaker
 
 // Shadows & backdrops
-$tmp-color-shadow:
-  0px 0.2px 0.6px rgba(0, 0, 0, 0.031),
-  0px 0.6px 1.8px rgba(0, 0, 0, 0.045),
-  0px 1.5px 4.2px rgba(0, 0, 0, 0.059),
-  0px 5px 14px rgba(0, 0, 0, 0.09);
+$tmp-color-shadow: 0px 0.2px 0.6px rgba(0, 0, 0, 0.031), 0px 0.6px 1.8px rgba(0, 0, 0, 0.045),
+  0px 1.5px 4.2px rgba(0, 0, 0, 0.059), 0px 5px 14px rgba(0, 0, 0, 0.09);
 $tmp-color-backdrop: rgba(11, 23, 45, 0.6);
 
 /* Spacing */