From fde075399c0375cf44013dbe11a416b77c210308 Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Sun, 30 Nov 2025 14:37:51 +0000 Subject: [PATCH 1/3] . --- .storybook/{preview.ts => preview.tsx} | 13 +++++++++++-- package-lock.json | 10 +++++----- package.json | 2 +- src/styles.scss | 27 ++++++++++++++++++++++++++ 4 files changed, 44 insertions(+), 8 deletions(-) rename .storybook/{preview.ts => preview.tsx} (57%) diff --git a/.storybook/preview.ts b/.storybook/preview.tsx similarity index 57% rename from .storybook/preview.ts rename to .storybook/preview.tsx index f4b2c44..7cde8ae 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.tsx @@ -1,7 +1,8 @@ +import React from 'react'; import type { Preview } from '@storybook/react-vite'; -import '@kibalabs/ui-react/styles/reset'; -import '@kibalabs/ui-react/styles/colors'; +import '@kibalabs/ui-react/dist/index.css'; import '../src/styles.scss'; +import { ToastContainer } from '../src'; const preview: Preview = { parameters: { @@ -13,6 +14,14 @@ const preview: Preview = { }, }, }, + decorators: [ + (Story) => ( + <> + + + + ), + ], }; export default preview; diff --git a/package-lock.json b/package-lock.json index a9eff7b..4a4e88d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "react-hot-toast": "^2.4.1" }, "devDependencies": { - "@kibalabs/build": "0.13.3-next.12", + "@kibalabs/build": "0.13.3-next.13", "@kibalabs/ui-react": "0.11.3-next.18", "@storybook/addon-docs": "10.1.2", "@storybook/react-vite": "10.1.2", @@ -26,7 +26,7 @@ "storybook": "10.1.2" }, "peerDependencies": { - "@kibalabs/ui-react": ">=0.13.3-next.12", + "@kibalabs/ui-react": ">=0.11.3-next.18", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } @@ -2870,9 +2870,9 @@ } }, "node_modules/@kibalabs/build": { - "version": "0.13.3-next.12", - "resolved": "https://registry.npmjs.org/@kibalabs/build/-/build-0.13.3-next.12.tgz", - "integrity": "sha512-DXLJV+Krgqv0gWxDYr98UVFBm7bs2LkAQlwTMQQZesUaYpFHDZN9NHrLEW3ehyAIXcjVO91HAV9hswm0Q1v1qA==", + "version": "0.13.3-next.13", + "resolved": "https://registry.npmjs.org/@kibalabs/build/-/build-0.13.3-next.13.tgz", + "integrity": "sha512-CRj02O0VY2Amm0B7exLyEgOvNlRJm2c9j/8SAK02bM1PsXDH9NOtApBnAkx4iZWaaxvf9NQiH+F4feAIsB5diA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index e4f2f5a..de51e8a 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "react-hot-toast": "^2.4.1" }, "devDependencies": { - "@kibalabs/build": "0.13.3-next.12", + "@kibalabs/build": "0.13.3-next.13", "@kibalabs/ui-react": "0.11.3-next.18", "@storybook/addon-docs": "10.1.2", "@storybook/react-vite": "10.1.2", diff --git a/src/styles.scss b/src/styles.scss index d4edf4c..2c7f7a2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -21,9 +21,15 @@ } } + // Override react-hot-toast default styles + .KibaToastContainer > div { + max-width: none !important; + } + .KibaToast { display: flex; transition-duration: 0.3s; + white-space: nowrap; &.clickable { cursor: pointer; } @@ -46,6 +52,27 @@ @layer kiba-theme { .KibaToast { + padding: var(--kiba-toast-padding, 0.75em 1em); + background-color: var(--kiba-toast-background-color, #ffffff); + border-radius: var(--kiba-toast-border-radius, 0.5em); + box-shadow: var(--kiba-toast-box-shadow, 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)); + color: var(--kiba-toast-color, #333333); + &.success { + background-color: var(--kiba-toast-success-background-color, #d4edda); + color: var(--kiba-toast-success-color, #155724); + } + &.error { + background-color: var(--kiba-toast-error-background-color, #f8d7da); + color: var(--kiba-toast-error-color, #721c24); + } + &.warning { + background-color: var(--kiba-toast-warning-background-color, #fff3cd); + color: var(--kiba-toast-warning-color, #856404); + } + &.info { + background-color: var(--kiba-toast-info-background-color, #d1ecf1); + color: var(--kiba-toast-info-color, #0c5460); + } .KibaToastFocusFixer { transition-duration: 0.3s; } From 1b4c1a41786382ae5533231e2f77195cecef3dd5 Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Sun, 30 Nov 2025 14:57:50 +0000 Subject: [PATCH 2/3] . --- .storybook/preview.tsx | 6 ++++-- src/styles.scss | 14 +++++++++----- src/toasts.css | 25 ------------------------- src/useToastManager.tsx | 2 +- 4 files changed, 14 insertions(+), 33 deletions(-) delete mode 100644 src/toasts.css diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 7cde8ae..b2ca775 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,5 +1,7 @@ import React from 'react'; + import type { Preview } from '@storybook/react-vite'; + import '@kibalabs/ui-react/dist/index.css'; import '../src/styles.scss'; import { ToastContainer } from '../src'; @@ -16,10 +18,10 @@ const preview: Preview = { }, decorators: [ (Story) => ( - <> + - + ), ], }; diff --git a/src/styles.scss b/src/styles.scss index 2c7f7a2..624db13 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,12 @@ +// Override react-hot-toast default styles - must be outside @layer for higher specificity +.KibaToastContainer > div { + max-width: none !important; + background: none !important; + box-shadow: none !important; + padding: 0 !important; + border-radius: 0 !important; +} + @layer kiba-structure { @keyframes kiba-toast-fade-in { 0% { @@ -21,11 +30,6 @@ } } - // Override react-hot-toast default styles - .KibaToastContainer > div { - max-width: none !important; - } - .KibaToast { display: flex; transition-duration: 0.3s; diff --git a/src/toasts.css b/src/toasts.css deleted file mode 100644 index 045c639..0000000 --- a/src/toasts.css +++ /dev/null @@ -1,25 +0,0 @@ -@keyframes fadeIn { - from {transform: translate3d(0, -200%, 0) scale(0.6); opacity: .5;} - to {transform: translate3d(0, 0, 0) scale(1); opacity: 1;} -} - -@keyframes fadeOut { - from {transform: translate3d(0, 0, -1px) scale(1); opacity: 1;} - to {transform: translate3d(0, -150%, -1px) scale(0.6); opacity: 0;} -} - -.animateIn { - animation-name: fadeIn; - animation-duration: 0.35s; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1); - animation-delay: 0s; -} - -.animateOut { - animation-name: fadeOut; - animation-duration: 0.75s; - animation-fill-mode: forwards; - animation-timing-function: cubic-bezier(0.06, .71, 0.55, 1); - animation-delay: 0s; -} diff --git a/src/useToastManager.tsx b/src/useToastManager.tsx index a4906d5..69aa1e1 100644 --- a/src/useToastManager.tsx +++ b/src/useToastManager.tsx @@ -23,7 +23,7 @@ export const useToastManager = (): IToastManager => { // @ts-expect-error: not sure why classNam isn't expected on the component? React.cloneElement(component, { ...component.props, className: getClassName(...component.className || '', renderingToast.visible ? 'animateIn' : 'animateOut') }) ); - toast.custom(wrappedComponent, { id: actualToastId, duration: shouldAutoClose ? autoCloseMillis : Infinity, style: { padding: '0' } }); + toast.custom(wrappedComponent, { id: actualToastId, duration: shouldAutoClose ? autoCloseMillis : Infinity, style: { padding: '0', background: 'none', boxShadow: 'none' } }); return actualToastId; }, []); From 57e812aaeb394b95bdaa98e3d5962227cab1fd29 Mon Sep 17 00:00:00 2001 From: Krishan Patel Date: Sun, 30 Nov 2025 15:10:46 +0000 Subject: [PATCH 3/3] . --- src/styles.scss | 62 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 43 insertions(+), 19 deletions(-) diff --git a/src/styles.scss b/src/styles.scss index 624db13..6c1021f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -34,6 +34,10 @@ display: flex; transition-duration: 0.3s; white-space: nowrap; + outline: none; + border: none; + text-decoration: none; + cursor: default; &.clickable { cursor: pointer; } @@ -51,34 +55,54 @@ width: 100%; height: 100%; position: relative; + display: flex; + box-sizing: border-box; } } @layer kiba-theme { .KibaToast { - padding: var(--kiba-toast-padding, 0.75em 1em); - background-color: var(--kiba-toast-background-color, #ffffff); - border-radius: var(--kiba-toast-border-radius, 0.5em); - box-shadow: var(--kiba-toast-box-shadow, 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)); - color: var(--kiba-toast-color, #333333); - &.success { - background-color: var(--kiba-toast-success-background-color, #d4edda); - color: var(--kiba-toast-success-color, #155724); + > .KibaToastFocusFixer { + // Use same styling as card from ui-react + background-color: var(--kiba-color-background-light10, #ffffff); + border-color: var(--kiba-color-background-dark05, rgba(0, 0, 0, 0.05)); + border-width: var(--kiba-border-width, 1px); + border-style: solid; + border-radius: var(--kiba-border-radius, 0.5em); + box-shadow: 0px 8px 8px -6px rgba(0, 0, 0, 0.15); + padding: var(--kiba-padding, 0.5em) var(--kiba-padding-wide, 1em); + color: var(--kiba-color-text, #333333); + transition-duration: 0.3s; } - &.error { - background-color: var(--kiba-toast-error-background-color, #f8d7da); - color: var(--kiba-toast-error-color, #721c24); + &:hover > .KibaToastFocusFixer { + background-color: var(--kiba-color-background, #ffffff); } - &.warning { - background-color: var(--kiba-toast-warning-background-color, #fff3cd); - color: var(--kiba-toast-warning-color, #856404); + &:active > .KibaToastFocusFixer { + background-color: var(--kiba-color-background-dark10, #f0f0f0); } - &.info { - background-color: var(--kiba-toast-info-background-color, #d1ecf1); - color: var(--kiba-toast-info-color, #0c5460); + &:focus > .KibaToastFocusFixer { + border-color: var(--kiba-color-background-dark50, rgba(0, 0, 0, 0.5)); } - .KibaToastFocusFixer { - transition-duration: 0.3s; + // Variant styles + &.success > .KibaToastFocusFixer { + background-color: var(--kiba-color-success-clear90, #d4edda); + color: var(--kiba-color-success-dark25, #155724); + border-color: var(--kiba-color-success-clear75, #c3e6cb); + } + &.error > .KibaToastFocusFixer { + background-color: var(--kiba-color-error-clear90, #f8d7da); + color: var(--kiba-color-error-dark25, #721c24); + border-color: var(--kiba-color-error-clear75, #f5c6cb); + } + &.warning > .KibaToastFocusFixer { + background-color: var(--kiba-color-warning-clear90, #fff3cd); + color: var(--kiba-color-warning-dark25, #856404); + border-color: var(--kiba-color-warning-clear75, #ffeeba); + } + &.info > .KibaToastFocusFixer { + background-color: var(--kiba-color-info-clear90, #d1ecf1); + color: var(--kiba-color-info-dark25, #0c5460); + border-color: var(--kiba-color-info-clear75, #bee5eb); } } }