Skip to content

Commit 7bfc6d8

Browse files
AlexanderSchmidtCEAlexanderSchmidtCE
committed
formating
1 parent dd31971 commit 7bfc6d8

File tree

3 files changed

+28
-24
lines changed

3 files changed

+28
-24
lines changed

‎docs/20-concepts/05-styling/34-theming.mdx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,16 @@ import { Mermaid } from '@site/src/components/Mermaid';
2424
alt="Zeigt, wo der Schalter zum Umschalten des Themes in der Toolbar ist."
2525
/>
2626
<p>
27-
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>Über den Schalter in der Toolbar oben können Sie das Theme
27+
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>
28+
Über den Schalter in der Toolbar oben können Sie das Theme
2829
von unserer Seite (KoliBri) umschalten.
2930
</p>
3031
</kol-alert>
3132

32-
<br />
33+
<br/>
3334

3435
<p>
35-
Das Einzigartige an <KoliBri /> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf{' '}
36+
Das Einzigartige an <KoliBri/> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf{' '}
3637
<strong>semantisch W3C- und WCAG-konform</strong> und damit <strong>vollständig barrierefrei</strong> bezüglich der
3738
assistiven Unterstützung sind. Alle Komponenten werden dabei als{' '}
3839
<KolLink
@@ -58,7 +59,7 @@ import { Mermaid } from '@site/src/components/Mermaid';
5859
/>
5960

6061
<p>
61-
Im ersten Release (v1.0) hatte <KoliBri /> noch direkt das Individualisieren des Standard-Designs mittels sogenannter{' '}
62+
Im ersten Release (v1.0) hatte <KoliBri/> noch direkt das Individualisieren des Standard-Designs mittels sogenannter{' '}
6263
<strong>
6364
<KolLink
6465
_href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
@@ -68,18 +69,18 @@ import { Mermaid } from '@site/src/components/Mermaid';
6869
</strong>{' '}
6970
(
7071
<KolLink _href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71" _target="uxdesign" _label="Design-Tokens"></KolLink>
71-
, <KolLink _href="https://tailwindcss.com" _target="tailwindcss" _label={`Tailwind CSS`} />) umgesetzt. Mit der
72+
, <KolLink _href="https://tailwindcss.com" _target="tailwindcss" _label={`Tailwind CSS`}/>) umgesetzt. Mit der
7273
Umsetzung weiterer Themes haben wir jedoch festgestellt, dass wir immer mehr CSS-Properties einführen müssten, um die
7374
Flexiblität für das gewünschte Design/UX (Corporate Design/Styleguide) umsetzen zu können. Im Zweifel müsste für jede
7475
Anpassbarkeit ein separates Property vorgesehen werden. Am Beispiel des{' '}
75-
<KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui" _label={`MUI-Button CSS`} /> ist gut
76+
<KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui" _label={`MUI-Button CSS`}/> ist gut
7677
erkennbar, wie die CSS-Properties (Design Token) immer mehr werden.
7778
</p>
7879
<p>
7980
<KolIndentedText>
8081
<strong>
8182
2. Wir haben das ganze CSS vollständig von den Components entkoppelt (like{' '}
82-
<KolLink _href="https://styled-components.com" _target="styled-components" _label={`Styled-Components`} />
83+
<KolLink _href="https://styled-components.com" _target="styled-components" _label={`Styled-Components`}/>
8384
).
8485
</strong>
8586
</KolIndentedText>
@@ -143,7 +144,7 @@ stateDiagram-v2
143144
<p>
144145
Das UI/UX-Team spezifiziert beispielsweise mit Figma die Komponenten ihres Design-Systems. Bei der Überführung der
145146
Spezifikation in die Realisierung wird das Design in Form von reinem CSS mittels des{' '}
146-
<KolLink _href="/docs/concepts/styling/designer" _label={`KoliBri-Designers`} /> auf die Basis-Komponenten
147+
<KolLink _href="/docs/concepts/styling/designer" _label={`KoliBri-Designers`}/> auf die Basis-Komponenten
147148
„übertragen“. Wenn im eigenen Design-System eine Individualisierbarkeit gewünscht ist, können im Designer dafür
148149
CSS-Properties oder Design-Tokens definiert werden. Damit das eigene Theme über Projekte hinweg geteilt werden kann,
149150
wird das Theme in ein NPM-Paket paketiert und kann über eine beliebige Registry bereitgestellt werden.

‎i18n/en/docusaurus-plugin-content-docs/version-2.1/20-concepts/05-styling/34-theming.mdx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,16 @@ import { Mermaid } from '@site/src/components/Mermaid';
2424
alt="Shows where the switch for switching the theme is in the toolbar."
2525
/>
2626
<p>
27-
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>You can switch the theme from our site (KoliBri) using the
27+
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>
28+
You can switch the theme from our site (KoliBri) using the
2829
switch in the toolbar above.
2930
</p>
3031
</kol-alert>
3132

32-
<br />
33+
<br/>
3334

3435
<p>
35-
The unique feature of <KoliBri /> is the <strong>reference implementation</strong> of components that are{' '}
36+
The unique feature of <KoliBri/> is the <strong>reference implementation</strong> of components that are{' '}
3637
<strong>semantically W3C- and WCAG-compliant</strong> from the ground up and thus{' '}
3738
<strong>completely accessible</strong> regarding assistive support. All components are implemented as{' '}
3839
<KolLink _href="https://developer.mozilla.org/en-US/docs/Web/Web_Components?retiredLocale=de" _target="mozilla">
@@ -53,7 +54,7 @@ import { Mermaid } from '@site/src/components/Mermaid';
5354
/>
5455

5556
<p>
56-
In the first release (v1.0) <KoliBri /> had directly implemented the individualization of the standard design using
57+
In the first release (v1.0) <KoliBri/> had directly implemented the individualization of the standard design using
5758
so-called{' '}
5859
<strong>
5960
<KolLink _href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" _target="mozilla">
@@ -65,8 +66,8 @@ import { Mermaid } from '@site/src/components/Mermaid';
6566
Design-Tokens
6667
</KolLink>
6768
, <KolLink _href="https://tailwindcss.com" _target="tailwindcss">
68-
Tailwind CSS
69-
</KolLink>). With the implementation of further themes, however, we have found that we would have to introduce more and
69+
Tailwind CSS
70+
</KolLink>). With the implementation of further themes, however, we have found that we would have to introduce more and
7071
more CSS-Properties to be able to implement the flexibility for the desired design/UX (Corporate Design/Style guide). In
7172
case of doubt, a separate property would have to be provided for each customizability. The example of the
7273
<KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui">
@@ -165,8 +166,9 @@ stateDiagram-v2
165166
Own specific components, which are not provided by KoliBri and unfortunately do not fit to the KoliBri component
166167
variety, can be built in own component libraries and maintained independently. For this purpose, we offer the
167168
so-called <strong>KoliBri-Factory</strong> (Stack) (see{' '}
168-
<KolLink _href="/en/docs/concepts/architecture#advanced"
169-
_label={`Modularization`}>
169+
<KolLink
170+
_href="/en/docs/concepts/architecture#advanced"
171+
_label={`Modularization`}>
170172
</KolLink>
171173
).
172174
</p>

‎versioned_docs/version-2.1/20-concepts/05-styling/34-theming.mdx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,16 @@ import { Mermaid } from '@site/src/components/Mermaid';
2424
alt="Zeigt, wo der Schalter zum Umschalten des Themes in der Toolbar ist."
2525
/>
2626
<p>
27-
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>Über den Schalter in der Toolbar oben können Sie das Theme
27+
<kol-icon _icons="codicon codicon-arrow-right"></kol-icon>
28+
Über den Schalter in der Toolbar oben können Sie das Theme
2829
von unserer Seite (KoliBri) umschalten.
2930
</p>
3031
</kol-alert>
3132

32-
<br />
33+
<br/>
3334

3435
<p>
35-
Das Einzigartige an <KoliBri /> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf{' '}
36+
Das Einzigartige an <KoliBri/> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf{' '}
3637
<strong>semantisch W3C- und WCAG-konform</strong> und damit <strong>vollständig barrierefrei</strong> bezüglich der
3738
assistiven Unterstützung sind. Alle Komponenten werden dabei als{' '}
3839
<KolLink
@@ -58,7 +59,7 @@ import { Mermaid } from '@site/src/components/Mermaid';
5859
/>
5960

6061
<p>
61-
Im ersten Release (v1.0) hatte <KoliBri /> noch direkt das Individualisieren des Standard-Designs mittels sogenannter{' '}
62+
Im ersten Release (v1.0) hatte <KoliBri/> noch direkt das Individualisieren des Standard-Designs mittels sogenannter{' '}
6263
<strong>
6364
<KolLink
6465
_href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
@@ -68,18 +69,18 @@ import { Mermaid } from '@site/src/components/Mermaid';
6869
</strong>{' '}
6970
(
7071
<KolLink _href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71" _target="uxdesign" _label="Design-Tokens"></KolLink>
71-
, <KolLink _href="https://tailwindcss.com" _target="tailwindcss" _label={`Tailwind CSS`} />) umgesetzt. Mit der
72+
, <KolLink _href="https://tailwindcss.com" _target="tailwindcss" _label={`Tailwind CSS`}/>) umgesetzt. Mit der
7273
Umsetzung weiterer Themes haben wir jedoch festgestellt, dass wir immer mehr CSS-Properties einführen müssten, um die
7374
Flexiblität für das gewünschte Design/UX (Corporate Design/Styleguide) umsetzen zu können. Im Zweifel müsste für jede
7475
Anpassbarkeit ein separates Property vorgesehen werden. Am Beispiel des{' '}
75-
<KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui" _label={`MUI-Button CSS`} /> ist gut
76+
<KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui" _label={`MUI-Button CSS`}/> ist gut
7677
erkennbar, wie die CSS-Properties (Design Token) immer mehr werden.
7778
</p>
7879
<p>
7980
<KolIndentedText>
8081
<strong>
8182
2. Wir haben das ganze CSS vollständig von den Components entkoppelt (like{' '}
82-
<KolLink _href="https://styled-components.com" _target="styled-components" _label={`Styled-Components`} />
83+
<KolLink _href="https://styled-components.com" _target="styled-components" _label={`Styled-Components`}/>
8384
).
8485
</strong>
8586
</KolIndentedText>
@@ -143,7 +144,7 @@ stateDiagram-v2
143144
<p>
144145
Das UI/UX-Team spezifiziert beispielsweise mit Figma die Komponenten ihres Design-Systems. Bei der Überführung der
145146
Spezifikation in die Realisierung wird das Design in Form von reinem CSS mittels des{' '}
146-
<KolLink _href="/docs/concepts/styling/designer" _label={`KoliBri-Designers`} /> auf die Basis-Komponenten
147+
<KolLink _href="/docs/concepts/styling/designer" _label={`KoliBri-Designers`}/> auf die Basis-Komponenten
147148
„übertragen“. Wenn im eigenen Design-System eine Individualisierbarkeit gewünscht ist, können im Designer dafür
148149
CSS-Properties oder Design-Tokens definiert werden. Damit das eigene Theme über Projekte hinweg geteilt werden kann,
149150
wird das Theme in ein NPM-Paket paketiert und kann über eine beliebige Registry bereitgestellt werden.

0 commit comments

Comments
 (0)