@mittwald/flow-react-components 1.0.0 → 1.0.2
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/AGENTS.md +11 -0
- package/CHANGELOG.md +12 -0
- package/dist/assets/doc-properties.json +37970 -37970
- package/dist/css/all-layered.css +1 -1
- package/dist/css/all.css +1 -1
- package/dist/js/packages/components/src/components/Breadcrumb/Breadcrumb.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Heading/Heading.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Text/Text.module.mjs.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n display: flex;\n list-style: none;\n padding: 0;\n align-items: center;\n\n .link {\n padding-inline: var(--breadcrumb--spacing);\n font-weight: var(--breadcrumb--font-weight--default);\n text-decoration: underline;\n\n @include focus.focus;\n\n & {\n @include ellipsis.ellipsis;\n }\n }\n\n .breadcrumbItem {\n display: flex;\n align-items: center;\n min-width: 0;\n color: var(--breadcrumb--color--default);\n\n &:last-child {\n .icon {\n display: none;\n }\n\n .link {\n text-decoration: none;\n font-weight: var(--breadcrumb--font-weight--current);\n }\n }\n\n &:first-child .link {\n padding-inline-start: 0;\n }\n\n &[data-disabled=\"true\"] {\n .link {\n cursor: unset;\n }\n }\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color--pressed);\n }\n }\n }\n }\n\n /* Size s */\n\n &.size-s {\n .link {\n font-size: var(--font-size-text--s);\n }\n\n .icon {\n width: var(--font-size-text--s);\n height: var(--font-size-text--s);\n }\n }\n\n /* Colors */\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .breadcrumbItem {\n color: var(--breadcrumb--color-#{$color}--default);\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color-#{$color}--pressed);\n }\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Breadcrumb.module.mjs","names":[],"sources":["../../../../../../../src/components/Breadcrumb/Breadcrumb.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n\n.breadcrumb {\n display: flex;\n list-style: none;\n padding: 0;\n align-items: center;\n\n .link {\n padding-inline: var(--breadcrumb--spacing);\n font-weight: var(--breadcrumb--font-weight--default);\n text-decoration: underline;\n cursor: pointer;\n\n @include focus.focus;\n\n & {\n @include ellipsis.ellipsis;\n }\n }\n\n .breadcrumbItem {\n display: flex;\n align-items: center;\n min-width: 0;\n color: var(--breadcrumb--color--default);\n\n &:last-child {\n .icon {\n display: none;\n }\n\n .link {\n text-decoration: none;\n font-weight: var(--breadcrumb--font-weight--current);\n }\n }\n\n &:first-child .link {\n padding-inline-start: 0;\n }\n\n &[data-disabled=\"true\"] {\n .link {\n cursor: unset;\n }\n }\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color--pressed);\n }\n }\n }\n }\n\n /* Size s */\n\n &.size-s {\n .link {\n font-size: var(--font-size-text--s);\n }\n\n .icon {\n width: var(--font-size-text--s);\n height: var(--font-size-text--s);\n }\n }\n\n /* Colors */\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .breadcrumbItem {\n color: var(--breadcrumb--color-#{$color}--default);\n\n &:not([data-disabled=\"true\"]) {\n .link {\n &:hover {\n color: var(--breadcrumb--color-#{$color}--hover);\n }\n\n &[data-pressed] {\n color: var(--breadcrumb--color-#{$color}--pressed);\n }\n }\n }\n }\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\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 &:not(:last-child):has(+ .headingContent:not(:empty)) {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n vertical-align: bottom;\n display: inline-flex;\n min-height: var(--heading-line-height);\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n flex-wrap: wrap;\n\n &:empty {\n display: none;\n }\n }\n\n &:where(h1),\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(h2),\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h3),\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h4),\n &:where(.h4),\n &:where(h5),\n &:where(.h5),\n &:where(h6),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Heading.module.mjs","names":[],"sources":["../../../../../../../src/components/Heading/Heading.module.scss"],"sourcesContent":[".heading {\n color: var(--heading--color);\n font-size: var(--font-size);\n font-weight: var(--heading--font-weight);\n text-wrap-style: pretty;\n\n --heading-line-height: calc(var(--font-size) * var(--line-height));\n\n @mixin color($color) {\n &.#{$color} {\n color: var(--heading--color-#{$color});\n }\n }\n\n @include color(\"danger\");\n @include color(\"unavailable\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n .headingText {\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 &:not(:last-child):has(+ .headingContent:not(:empty)) {\n margin-inline-end: var(--heading--icon-to-text-spacing);\n }\n }\n\n .headingContent {\n vertical-align: bottom;\n display: inline-flex;\n min-height: var(--heading-line-height);\n align-items: center;\n gap: var(--heading--icon-to-text-spacing);\n flex-wrap: wrap;\n\n &:empty {\n display: none;\n }\n }\n\n &:where(h1),\n &:where(.h1) {\n --font-size: var(--font-size-heading--xl);\n }\n\n &:where(h2),\n &:where(.h2) {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h3),\n &:where(.h3) {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h4),\n &:where(.h4),\n &:where(h5),\n &:where(.h5),\n &:where(h6),\n &:where(.h6) {\n --font-size: var(--font-size-heading--xs);\n }\n\n @mixin size($size) {\n &.size-#{$size} {\n --font-size: var(--font-size-heading--#{$size});\n }\n }\n\n @include size(\"xs\");\n @include size(\"s\");\n @include size(\"m\");\n @include size(\"l\");\n @include size(\"xl\");\n @include size(\"xxl\");\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n}\n\n@media (max-width: 768px) {\n .heading {\n &:where(h1),\n &.size-xl {\n --font-size: var(--font-size-heading--l);\n }\n\n &.size-l {\n --font-size: var(--font-size-heading--m);\n }\n\n &:where(h2),\n &.size-m {\n --font-size: var(--font-size-heading--s);\n }\n\n &:where(h3),\n &.size-s {\n --font-size: var(--font-size-heading--xs);\n }\n }\n}\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n color: inherit;\n\n /* Alpha Colors */\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--text--color--#{$color});\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n\n ul,\n ol {\n padding-inline-start: var(--text--list-padding);\n }\n\n ul {\n li {\n list-style: initial;\n }\n }\n\n small {\n font-size: var(--font-size-text--s);\n }\n\n blockquote {\n border-inline-start: var(--text--blockquote-border-width)\n var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n padding-inline-start: var(--text--blockquote-padding);\n }\n\n .icon {\n vertical-align: text-bottom;\n }\n\n small {\n .icon {\n width: var(--line-height-s);\n height: var(--line-height-s);\n }\n }\n\n &:where(.align-start) {\n text-align: start;\n }\n\n &:where(.align-center) {\n text-align: center;\n }\n\n &:where(.align-end) {\n text-align: end;\n }\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n\n &:where(.wrap-pretty) {\n text-wrap: pretty;\n }\n\n &:where(.no-ligatures) {\n font-variant-ligatures: none;\n }\n}\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Text.module.mjs","names":[],"sources":["../../../../../../../src/components/Text/Text.module.scss"],"sourcesContent":[".text {\n color: inherit;\n text-wrap-style: pretty;\n\n /* Alpha Colors */\n @mixin color($color) {\n &:where(.#{$color}) {\n color: var(--text--color--#{$color});\n }\n }\n\n @include color(dark);\n @include color(light);\n @include color(dark-static);\n @include color(light-static);\n\n ul,\n ol {\n padding-inline-start: var(--text--list-padding);\n }\n\n ul {\n li {\n list-style: initial;\n }\n }\n\n small {\n font-size: var(--font-size-text--s);\n }\n\n blockquote {\n border-inline-start: var(--text--blockquote-border-width)\n var(--text--blockquote-border-style) var(--text--blockquote-border-color);\n padding-inline-start: var(--text--blockquote-padding);\n }\n\n .icon {\n vertical-align: text-bottom;\n }\n\n small {\n .icon {\n width: var(--line-height-s);\n height: var(--line-height-s);\n }\n }\n\n &:where(.align-start) {\n text-align: start;\n }\n\n &:where(.align-center) {\n text-align: center;\n }\n\n &:where(.align-end) {\n text-align: end;\n }\n\n &:where(.wrap-wrap) {\n text-wrap: wrap;\n }\n\n &:where(.wrap-balance) {\n text-wrap: balance;\n }\n\n &:where(.wrap-pretty) {\n text-wrap: pretty;\n }\n\n &:where(.no-ligatures) {\n font-variant-ligatures: none;\n }\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -74,9 +74,9 @@
|
|
|
74
74
|
"@internationalized/string-compiler": "^3.4.1",
|
|
75
75
|
"@lezer/common": "^1.5.2",
|
|
76
76
|
"@lezer/highlight": "^1.2.3",
|
|
77
|
-
"@mittwald/flow-icons": "1.0.
|
|
77
|
+
"@mittwald/flow-icons": "1.0.2",
|
|
78
78
|
"@mittwald/password-tools-js": "3.0.0-alpha.31",
|
|
79
|
-
"@mittwald/react-tunnel": "1.0.
|
|
79
|
+
"@mittwald/react-tunnel": "1.0.2",
|
|
80
80
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
81
81
|
"@react-aria/form": "^3.2.1",
|
|
82
82
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -130,12 +130,12 @@
|
|
|
130
130
|
"@internationalized/date": "^3.12.3",
|
|
131
131
|
"@lezer/generator": "^1.8.0",
|
|
132
132
|
"@lezer/lr": "^1.4.10",
|
|
133
|
-
"@mittwald/flow-core": "1.0.
|
|
134
|
-
"@mittwald/flow-design-tokens": "1.0.
|
|
135
|
-
"@mittwald/flow-icons-base": "1.0.
|
|
133
|
+
"@mittwald/flow-core": "1.0.2",
|
|
134
|
+
"@mittwald/flow-design-tokens": "1.0.2",
|
|
135
|
+
"@mittwald/flow-icons-base": "1.0.2",
|
|
136
136
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
137
137
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
138
|
-
"@mittwald/typescript-config": "1.0.
|
|
138
|
+
"@mittwald/typescript-config": "1.0.2",
|
|
139
139
|
"@nx/storybook": "^22.7.6",
|
|
140
140
|
"@storybook/addon-a11y": "^10.5.10",
|
|
141
141
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -186,7 +186,7 @@
|
|
|
186
186
|
},
|
|
187
187
|
"peerDependencies": {
|
|
188
188
|
"@internationalized/date": "^3.12.2",
|
|
189
|
-
"@mittwald/flow-icons-pro": "1.0.
|
|
189
|
+
"@mittwald/flow-icons-pro": "1.0.2",
|
|
190
190
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
191
191
|
"next": "^16.2.3",
|
|
192
192
|
"react": "^19.2.0",
|
|
@@ -207,5 +207,5 @@
|
|
|
207
207
|
"optional": true
|
|
208
208
|
}
|
|
209
209
|
},
|
|
210
|
-
"gitHead": "
|
|
210
|
+
"gitHead": "2f6210d8cc65c69f77c779c7c08dabd2848fa5eb"
|
|
211
211
|
}
|