@mittwald/flow-react-components 1.2.0-next.59 → 1.2.0-next.60
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/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":""}
|
|
@@ -2417,6 +2417,10 @@ var notification = {
|
|
|
2417
2417
|
"value": "355px",
|
|
2418
2418
|
"path": ["notification", "width"]
|
|
2419
2419
|
},
|
|
2420
|
+
"max-width": {
|
|
2421
|
+
"value": "calc(100dvw - 2 * 32px)",
|
|
2422
|
+
"path": ["notification", "max-width"]
|
|
2423
|
+
},
|
|
2420
2424
|
"heading-to-text-spacing": {
|
|
2421
2425
|
"value": "0.25rem",
|
|
2422
2426
|
"path": ["notification", "heading-to-text-spacing"]
|