@mittwald/flow-react-components 1.1.48 → 1.1.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/component-index.json +1 -1
- package/dist/assets/doc-properties.json +1 -1
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Notification/Notification.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Overlay/Overlay.module.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs +4 -0
- package/dist/js/packages/design-tokens/dist/json-runtime/all-dark.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs +4 -0
- package/dist/js/packages/design-tokens/dist/json-runtime/all-light.mjs.map +1 -1
- package/dist/types/lib/theming/hooks/useDesignTokens.d.ts +4 -0
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.notification {\n border-radius: var(--notification--corner-radius);\n width: var(--notification--width);\n box-shadow: var(--notification--box-shadow);\n position: relative;\n border: var(--notification--border-width) var(--notification--border-style)\n var(--notification--border-color);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--notification--border-x-start-width);\n inset-inline-start: calc(var(--size-px--xxxs) * -1);\n border-start-start-radius: var(--notification--corner-radius);\n border-end-start-radius: var(--notification--corner-radius);\n }\n\n @extend .info;\n\n /* Elements */\n\n .link {\n padding: var(--notification--padding);\n padding-inline-start: calc(\n var(--notification--padding) + var(--notification--border-x-start-width)\n );\n display: flex;\n flex-direction: column;\n row-gap: var(--notification--heading-to-text-spacing);\n cursor: default;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n position: relative;\n border-radius: calc(var(--notification--corner-radius) - 1px);\n\n @include focus.focus;\n }\n\n .heading {\n --button-size: calc(\n var(--button--line-height-s) + 2 * var(--button--padding-s-x)\n );\n\n padding-inline-end: calc(\n var(--button-size) + var(--heading--icon-to-text-spacing)\n );\n\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .text {\n font-size: var(--notification--font-size);\n }\n\n .close {\n position: absolute;\n top: var(--notification--padding);\n inset-inline-end: var(--notification--padding);\n }\n\n /* Status */\n\n @mixin status($status) {\n &.#{$status} {\n .link {\n border-color: var(--notification--#{$status}-background-color--default);\n background-color: var(\n --notification--#{$status}-background-color--default\n );\n }\n\n &::after {\n background-color: var(--notification--#{$status}-border-color);\n }\n\n &.hasLink {\n .link {\n &:hover {\n background-color: var(\n --notification--#{$status}-background-color--hover\n );\n }\n\n &[data-pressed] {\n background-color: var(\n --notification--#{$status}-background-color--pressed\n );\n }\n }\n }\n\n .heading {\n color: var(--notification--#{$status}-heading-color);\n }\n }\n }\n\n @include status(info);\n @include status(warning);\n @include status(danger);\n @include status(success);\n @include status(unavailable);\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Notification.module.mjs","names":[],"sources":["../../../../../../../src/components/Notification/Notification.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.notification {\n border-radius: var(--notification--corner-radius);\n width: var(--notification--width);\n max-width: var(--notification--max-width);\n box-shadow: var(--notification--box-shadow);\n position: relative;\n border: var(--notification--border-width) var(--notification--border-style)\n var(--notification--border-color);\n\n &::after {\n content: \"\";\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--notification--border-x-start-width);\n inset-inline-start: calc(var(--size-px--xxxs) * -1);\n border-start-start-radius: var(--notification--corner-radius);\n border-end-start-radius: var(--notification--corner-radius);\n }\n\n @extend .info;\n\n /* Elements */\n\n .link {\n padding: var(--notification--padding);\n padding-inline-start: calc(\n var(--notification--padding) + var(--notification--border-x-start-width)\n );\n display: flex;\n flex-direction: column;\n row-gap: var(--notification--heading-to-text-spacing);\n cursor: default;\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n position: relative;\n border-radius: calc(var(--notification--corner-radius) - 1px);\n\n @include focus.focus;\n }\n\n .heading {\n --button-size: calc(\n var(--button--line-height-s) + 2 * var(--button--padding-s-x)\n );\n\n padding-inline-end: calc(\n var(--button-size) + var(--heading--icon-to-text-spacing)\n );\n\n .icon {\n height: var(--heading-line-height);\n width: var(--heading-line-height);\n vertical-align: bottom;\n display: inline-block;\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .text {\n font-size: var(--notification--font-size);\n }\n\n .close {\n position: absolute;\n top: var(--notification--padding);\n inset-inline-end: var(--notification--padding);\n }\n\n /* Status */\n\n @mixin status($status) {\n &.#{$status} {\n .link {\n border-color: var(--notification--#{$status}-background-color--default);\n background-color: var(\n --notification--#{$status}-background-color--default\n );\n }\n\n &::after {\n background-color: var(--notification--#{$status}-border-color);\n }\n\n &.hasLink {\n .link {\n &:hover {\n background-color: var(\n --notification--#{$status}-background-color--hover\n );\n }\n\n &[data-pressed] {\n background-color: var(\n --notification--#{$status}-background-color--pressed\n );\n }\n }\n }\n\n .heading {\n color: var(--notification--#{$status}-heading-color);\n }\n }\n }\n\n @include status(info);\n @include status(warning);\n @include status(danger);\n @include status(success);\n @include status(unavailable);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.module.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.module.scss"],"sourcesContent":["/* Full-page backdrop behind every overlay (Modal, LightBox, …).\n
|
|
1
|
+
{"version":3,"file":"Overlay.module.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.module.scss"],"sourcesContent":["/* Full-page backdrop behind every overlay (Modal, LightBox, …).\n\n Sized to `--visual-viewport-height`, the property the Modal wrapper uses too,\n so the whole overlay stack tracks the on-screen keyboard as one. react-aria\n publishes it on this element and updates it with the visual viewport.\n\n Not `--page-height` (the full document height): this element is `fixed`, so\n anything past the viewport never shows, while `backdrop-filter` blurs the\n whole layer every frame. Chromium drops an oversized one for single frames\n while scrolling, flickering backdrop and modal alike. #2338 switched\n `absolute` → `fixed` and added the blur, but kept the `--page-height` that\n `absolute` had needed. */\n.overlay {\n position: fixed;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--visual-viewport-height);\n isolation: isolate;\n background: var(--overlay--backdrop-color);\n backdrop-filter: blur(var(--blur));\n\n &[data-entering] {\n animation: overlay-fade var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: overlay-fade var(--transition--duration--default) reverse ease-in;\n }\n}\n\n/* Fallback shown while suspended overlay content loads. */\n.suspense {\n padding: var(--size-px--xl);\n}\n\n@keyframes overlay-fade {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-contrast: more), (prefers-reduced-transparency) {\n .overlay {\n backdrop-filter: none;\n background-color: var(--dark--color--600);\n }\n}\n"],"mappings":""}
|
|
@@ -2413,6 +2413,10 @@ var notification = {
|
|
|
2413
2413
|
"value": "355px",
|
|
2414
2414
|
"path": ["notification", "width"]
|
|
2415
2415
|
},
|
|
2416
|
+
"max-width": {
|
|
2417
|
+
"value": "calc(100dvw - 2 * 32px)",
|
|
2418
|
+
"path": ["notification", "max-width"]
|
|
2419
|
+
},
|
|
2416
2420
|
"heading-to-text-spacing": {
|
|
2417
2421
|
"value": "0.25rem",
|
|
2418
2422
|
"path": ["notification", "heading-to-text-spacing"]
|