@mittwald/flow-react-components 0.2.0-alpha.782 → 0.2.0-alpha.783
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/CHANGELOG.md +6 -0
- package/dist/assets/doc-properties.json +1357 -1357
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Calendar/Calendar.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/FieldError/FieldError.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/ImageCropper/ImageCropper.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Link/Link.module.mjs.map +1 -1
- package/dist/js/packages/design-tokens/dist/variables.mjs +48 -0
- package/dist/js/packages/design-tokens/dist/variables.mjs.map +1 -1
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n width: fit-content;\n\n header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n h2 {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n }\n\n table {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--cell-range-background-color);\n width: calc(100% + 0.375rem);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-top-left-radius: var(--calendar--cell-corner-radius);\n border-bottom-left-radius: var(--calendar--cell-corner-radius);\n left: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-top-right-radius: var(--calendar--cell-corner-radius);\n border-bottom-right-radius: var(--calendar--cell-corner-radius);\n right: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Calendar.module.mjs","names":[],"sources":["../../../../../../../src/components/Calendar/Calendar.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.calendar {\n width: fit-content;\n\n header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--calendar--spacing);\n\n h2 {\n font-size: var(--calendar--heading-font-size);\n }\n }\n\n :global(.react-aria-CalendarHeaderCell) {\n font-size: var(--calendar--cell-font-size);\n }\n\n table {\n border-spacing: var(--calendar--spacing);\n }\n\n :global(.react-aria-CalendarCell) {\n width: var(--calendar--cell-size);\n height: var(--calendar--cell-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: default;\n border-radius: var(--calendar--cell-corner-radius);\n font-size: var(--calendar--cell-font-size);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include focus.focus;\n\n &[data-outside-month] {\n display: none;\n }\n\n &:hover {\n background: var(--calendar--cell-background-color--hover);\n }\n\n &[data-pressed] {\n background: var(--calendar--cell-background-color--pressed);\n }\n\n &[data-selected] {\n background: var(--calendar--cell-background-color--selected);\n color: var(--calendar--cell-content-color--selected);\n }\n\n &[data-disabled],\n &[data-unavailable=\"true\"] {\n background: var(--calendar--cell-background-color--disabled);\n color: var(--calendar--cell-content-color--disabled);\n }\n\n @include focus.focus;\n }\n\n &.range {\n :global(.react-aria-CalendarCell) {\n position: relative;\n isolation: isolate;\n transition-duration: 0s;\n\n &[data-selected] {\n &::before {\n content: \"\";\n background: var(--calendar--cell-range-background-color);\n border-block: var(--calendar--cell-range-border-width)\n var(--calendar--cell-range-border-style)\n var(--calendar--cell-range-border-color);\n width: calc(100% + 0.375rem);\n height: 100%;\n position: absolute;\n z-index: -1;\n }\n\n &::after {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n border-radius: var(--calendar--cell-corner-radius);\n }\n\n &:hover {\n &::after {\n background: var(--calendar--cell-background-color--hover);\n }\n }\n\n &[data-pressed] {\n &::after {\n background: var(--calendar--cell-background-color--pressed);\n }\n }\n\n &[data-selection-start],\n &[data-selection-end] {\n &::after {\n background: var(--calendar--cell-background-color--selected);\n }\n }\n\n &[data-selection-start] {\n &::before {\n border-top-left-radius: var(--calendar--cell-corner-radius);\n border-bottom-left-radius: var(--calendar--cell-corner-radius);\n left: 0;\n }\n }\n\n &[data-selection-end] {\n &::before {\n border-top-right-radius: var(--calendar--cell-corner-radius);\n border-bottom-right-radius: var(--calendar--cell-corner-radius);\n right: 0;\n }\n }\n\n &:not([data-selection-start], [data-selection-end]) {\n color: var(--text--color--default);\n background: none;\n }\n\n &[data-selection-start][data-selection-end] {\n &::before {\n display: none;\n }\n }\n }\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldError.module.mjs","names":[],"sources":["../../../../../../../src/components/FieldError/FieldError.module.scss"],"sourcesContent":[".fieldError {\n
|
|
1
|
+
{"version":3,"file":"FieldError.module.mjs","names":[],"sources":["../../../../../../../src/components/FieldError/FieldError.module.scss"],"sourcesContent":[".fieldError {\n font-size: var(--field-error--font-size);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCropper.module.mjs","names":[],"sources":["../../../../../../../src/components/ImageCropper/ImageCropper.module.scss"],"sourcesContent":[".imageCropper {\n display: flex;\n flex-direction: column;\n gap: var(--image-cropper--spacing);\n max-width: 100%;\n\n .cropperContainer {\n position: relative;\n width: 100%;\n border-radius: var(--image-cropper--corner-radius);\n border-color: var(--image-cropper--border-color);\n border-style: var(--image-cropper--border-style);\n border-width: var(--image-cropper--border-width);\n }\n\n :global(.reactEasyCrop_CropArea) {\n color: var(--image-cropper--mask-color);\n border-color: var(--image-cropper--mask-border-color);\n box-sizing: content-box;\n }\n\n :global(.reactEasyCrop_CropAreaGrid::before) {\n border-color: var(--image-cropper--grid-color);\n border-width: var(--image-cropper--grid-width);\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"ImageCropper.module.mjs","names":[],"sources":["../../../../../../../src/components/ImageCropper/ImageCropper.module.scss"],"sourcesContent":[".imageCropper {\n display: flex;\n flex-direction: column;\n gap: var(--image-cropper--spacing);\n max-width: 100%;\n\n .cropperContainer {\n position: relative;\n width: 100%;\n border-radius: var(--image-cropper--corner-radius);\n border-color: var(--image-cropper--border-color);\n border-style: var(--image-cropper--border-style);\n border-width: var(--image-cropper--border-width);\n }\n\n :global(.reactEasyCrop_CropArea) {\n color: var(--image-cropper--mask-color);\n border-color: var(--image-cropper--mask-border-color);\n box-sizing: content-box;\n }\n\n :global(.reactEasyCrop_CropAreaGrid::before) {\n border-color: var(--image-cropper--grid-color);\n border-width: var(--image-cropper--grid-width);\n }\n\n :global(.reactEasyCrop_Container) {\n border-radius: var(--image-cropper--corner-radius);\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n font-weight: var(--link--font-weight);\n transition-property: color;\n transition-duration: var(--transition--duration--default);\n color: var(--link--color--default);\n width: fit-content;\n\n &:hover {\n color: var(--link--color--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color--pressed);\n }\n\n @include focus.focus;\n\n &:not([aria-disabled]) {\n cursor: pointer;\n }\n\n &.inline {\n font-weight: normal;\n font-size: var(--font-size-text--default);\n text-decoration: underline;\n }\n\n /* Elements */\n\n .icon {\n margin-inline-start: var(--link--spacing);\n vertical-align: text-bottom;\n height: var(--link--icon-height);\n }\n\n &[aria-disabled] {\n color: var(--link--color--disabled);\n }\n\n /* Size s */\n\n &.size-s {\n font-size: var(--font-size-text--s);\n\n .icon {\n height: var(--link--icon-height-s);\n }\n }\n\n /* Alpha Colors */\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--link--color-#{$color}--default);\n\n &:hover {\n color: var(--link--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color-#{$color}--pressed);\n }\n\n &[aria-disabled] {\n color: var(--link--color-#{$color}--disabled);\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n\n /* AlertText Colors */\n @mixin status($status) {\n &:has(.alertText[class*=\"#{$status}\"]) {\n color: var(--
|
|
1
|
+
{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n font-weight: var(--link--font-weight);\n transition-property: color;\n transition-duration: var(--transition--duration--default);\n color: var(--link--color--default);\n width: fit-content;\n\n &:hover {\n color: var(--link--color--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color--pressed);\n }\n\n @include focus.focus;\n\n &:not([aria-disabled]) {\n cursor: pointer;\n }\n\n &.inline {\n font-weight: normal;\n font-size: var(--font-size-text--default);\n text-decoration: underline;\n }\n\n /* Elements */\n\n .icon {\n margin-inline-start: var(--link--spacing);\n vertical-align: text-bottom;\n height: var(--link--icon-height);\n }\n\n &[aria-disabled] {\n color: var(--link--color--disabled);\n }\n\n /* Size s */\n\n &.size-s {\n font-size: var(--font-size-text--s);\n\n .icon {\n height: var(--link--icon-height-s);\n }\n }\n\n /* Alpha Colors */\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--link--color-#{$color}--default);\n\n &:hover {\n color: var(--link--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--link--color-#{$color}--pressed);\n }\n\n &[aria-disabled] {\n color: var(--link--color-#{$color}--disabled);\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n\n /* AlertText Colors */\n @mixin status($status) {\n &:has(.alertText[class*=\"#{$status}\"]) {\n color: var(--alert-text--#{$status}-color);\n }\n }\n\n @include status(danger);\n @include status(success);\n @include status(warning);\n @include status(info);\n @include status(unavailable);\n}\n"],"mappings":""}
|
|
@@ -9939,6 +9939,54 @@ var variables_default = {
|
|
|
9939
9939
|
},
|
|
9940
9940
|
"path": ["calendar", "cell-range-background-color"]
|
|
9941
9941
|
},
|
|
9942
|
+
"cell-range-border-color": {
|
|
9943
|
+
"key": "{calendar.cell-range-border-color}",
|
|
9944
|
+
"value": "#909090",
|
|
9945
|
+
"filePath": "src/form/date-picker.yml",
|
|
9946
|
+
"isSource": true,
|
|
9947
|
+
"original": {
|
|
9948
|
+
"value": "{form-control.border-color.default}",
|
|
9949
|
+
"key": "{calendar.cell-range-border-color}"
|
|
9950
|
+
},
|
|
9951
|
+
"name": "CalendarCellRangeBorderColor",
|
|
9952
|
+
"attributes": {
|
|
9953
|
+
"category": "calendar",
|
|
9954
|
+
"type": "cell-range-border-color"
|
|
9955
|
+
},
|
|
9956
|
+
"path": ["calendar", "cell-range-border-color"]
|
|
9957
|
+
},
|
|
9958
|
+
"cell-range-border-width": {
|
|
9959
|
+
"key": "{calendar.cell-range-border-width}",
|
|
9960
|
+
"value": "1px",
|
|
9961
|
+
"filePath": "src/form/date-picker.yml",
|
|
9962
|
+
"isSource": true,
|
|
9963
|
+
"original": {
|
|
9964
|
+
"value": "{border-width.100}",
|
|
9965
|
+
"key": "{calendar.cell-range-border-width}"
|
|
9966
|
+
},
|
|
9967
|
+
"name": "CalendarCellRangeBorderWidth",
|
|
9968
|
+
"attributes": {
|
|
9969
|
+
"category": "calendar",
|
|
9970
|
+
"type": "cell-range-border-width"
|
|
9971
|
+
},
|
|
9972
|
+
"path": ["calendar", "cell-range-border-width"]
|
|
9973
|
+
},
|
|
9974
|
+
"cell-range-border-style": {
|
|
9975
|
+
"key": "{calendar.cell-range-border-style}",
|
|
9976
|
+
"value": "solid",
|
|
9977
|
+
"filePath": "src/form/date-picker.yml",
|
|
9978
|
+
"isSource": true,
|
|
9979
|
+
"original": {
|
|
9980
|
+
"value": "{border-style.default}",
|
|
9981
|
+
"key": "{calendar.cell-range-border-style}"
|
|
9982
|
+
},
|
|
9983
|
+
"name": "CalendarCellRangeBorderStyle",
|
|
9984
|
+
"attributes": {
|
|
9985
|
+
"category": "calendar",
|
|
9986
|
+
"type": "cell-range-border-style"
|
|
9987
|
+
},
|
|
9988
|
+
"path": ["calendar", "cell-range-border-style"]
|
|
9989
|
+
},
|
|
9942
9990
|
"header-cell-font-weight": {
|
|
9943
9991
|
"key": "{calendar.header-cell-font-weight}",
|
|
9944
9992
|
"value": "bold",
|