You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: i18n/en/docusaurus-plugin-content-docs/current/20-concepts/05-styling/34-theming.mdx
+8-10Lines changed: 8 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -5,13 +5,11 @@ import {Mermaid} from '@site/src/components/Mermaid';
5
5
# Theming
6
6
7
7
<KolAlert_type="info"_variant="card">
8
-
<p>
9
-
You can switch the theme from our site (KoliBri) using the switch in the toolbar above.
10
-
</p>
8
+
You can switch the theme from our site (KoliBri) using the switch in the toolbar above.
11
9
</KolAlert>
12
10
13
11
<p>
14
-
The unique feature of <KoliBri /> is the <strong>reference implementation</strong> of components that are <strong>semantically W3C- and WCAG-compliant</strong> from the ground up and thus <strong>completely accessible</strong> regarding assistive support. All components are implemented as <KolLink_href="https://developer.mozilla.org/en-US/docs/Web/Web_Components?retiredLocale=de"_target="mozilla">Web Components</KolLink>
12
+
The unique feature of <KoliBri /> is the <strong>reference implementation</strong> of components that are <strong>semantically W3C- and WCAG-compliant</strong> from the ground up and thus <strong>completely accessible</strong> regarding assistive support. All components are implemented as <KolLink_label="Web Components"_href="https://developer.mozilla.org/en-US/docs/Web/Web_Components"_target="blank" />
15
13
and are therefore reusable in all web-based projects. In the following figure, these components are represented by the gray-dashed shapes in the center.
16
14
</p>
17
15
<p>
@@ -21,20 +19,20 @@ import {Mermaid} from '@site/src/components/Mermaid';
21
19
</p>
22
20
23
21
<img
24
-
src="/assets/abgrenzung.jpg"
22
+
src="/en/assets/abgrenzung.jpg"
25
23
alt="Illustration of how components become custom components using various style guides."
26
24
/>
27
25
28
26
<p>
29
27
In the first release (v1.0) <KoliBri /> had directly implemented the individualization of the standard design using
(<KolLink_href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71"_target="uxdesign">Design-Tokens</KolLink>, <KolLink_href="https://tailwindcss.com"_target="tailwindcss">Tailwind CSS</KolLink>). With the implementation of further themes, however, we have found that we would have to introduce more and more CSS-Properties to be able to implement the flexibility for the desired design/UX (Corporate Design/Style guide). In
32
-
case of doubt, a separate property would have to be provided for each customizability. The example of the <KolLink_href="https://mui.com/material-ui/api/button/#css"_target="mui">MUI-Button CSS</KolLink> shows well how the CSS properties (design tokens) become more and more.
(<KolLink_label="Design-Tokens"_href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71"_target="blank" />, <KolLink_label="Tailwind CSS"_href="https://tailwindcss.com"_target="blank" />). With the implementation of further themes, however, we have found that we would have to introduce more and more CSS-Properties to be able to implement the flexibility for the desired design/UX (Corporate Design/Style guide). In
30
+
case of doubt, a separate property would have to be provided for each customizability. The example of the <KolLink_label="MUI-Button CSS"_href="https://mui.com/material-ui/api/button/#css"_target="blank" /> shows well how the CSS properties (design tokens) become more and more.
33
31
</p>
34
32
<p>
35
33
<KolIndentedText>
36
34
<strong>
37
-
2. We have completely decoupled the whole CSS from the components (like <KolLink_href="https://styled-components.com"_target="styled-components">Styled-Components</KolLink>).
35
+
2. We have completely decoupled the whole CSS from the components (like <KolLink_label="Styled-Components"_href="https://styled-components.com"_target="blank" />).
38
36
</strong>
39
37
</KolIndentedText>
40
38
</p>
@@ -117,6 +115,6 @@ stateDiagram-v2
117
115
<p>
118
116
Own specific components, which are not provided by KoliBri and unfortunately do not fit to the KoliBri component
119
117
variety, can be built in own component libraries and maintained independently. For this purpose, we offer the
120
-
so-called <strong>KoliBri-Factory</strong> (Stack) (see <KolLink_href="https://github.com/public-ui/kolibri/blob/main/docs/ARCHITECTURE.md#erweitert"_target="github">Modularization</KolLink>).
118
+
so-called <strong>KoliBri-Factory</strong> (Stack) (see <KolLink_label="Modularization"_href="https://github.com/public-ui/kolibri/blob/main/docs/ARCHITECTURE.md#erweitert"_target="blank" />).
@@ -43,8 +31,8 @@ import { translate } from '@docusaurus/Translate';
43
31
/>
44
32
</div>
45
33
46
-
<KolAlert_type="info">
47
-
<KolLink_href="/docs/concepts/styling/theming"_label="Learn here why <KoliBri /> is so helpful." />
34
+
<KolAlert_type="info"_variant="card">
35
+
<KolLink_label="Learn here why KoliBri is so helpful."_href="/en/docs/concepts/styling/theming" />
48
36
</KolAlert>
49
37
50
38
<br />
@@ -63,10 +51,11 @@ import { translate } from '@docusaurus/Translate';
63
51
## Mission
64
52
65
53
<pclassName="col-12">
66
-
The <kol-link_href="https://html.spec.whatwg.org"_target="w3c">HTML web standard</kol-link>
67
-
is specified to be very "open" in order to be as durable and robust as possible. It therefore often happens that HTML
68
-
compositions are not readily accessible, semantic and valid. <KoliBri /> builds directly on the <kol-link_href="https://www.w3.org"_target="w3c">W3C</kol-link> <kol-link_href="https://www.w3.org/standards/webdesign/"_target="w3c">web standards</kol-link> (framework-agnostic), is thereby a generic reference implementation of the{''}
69
-
<kol-link_href="https://www.w3.org/WAI/standards-guidelines/wcag/"_target="wcag">WCAG standard</kol-link> and <kol-link_href="https://www.bitvtest.de/bitv_test.html"_target="bitv"> BITV</kol-link> for accessibility, and is implemented as a multi-theme-enabled presentation layer. There is no technical reference and
54
+
The <KolLink_label="HTML web standard"_href="https://html.spec.whatwg.org"_target="blank" /> is specified to be very "open" in order to be as durable and robust as possible. It therefore often happens that HTML compositions are not readily accessible, semantic and valid.
55
+
<KoliBri /> builds directly on the <KolLink_label="W3C"_href="https://www.w3.org"_target="blank"/>
56
+
<KolLink_label="web standards"_href="https://www.w3.org/standards/webdesign/"_target="blank" /> (framework-agnostic), is thereby a generic reference implementation of the
57
+
<KolLink_label="WCAG standard"_href="https://www.w3.org/WAI/standards-guidelines/wcag/"_target="blank" /> and
58
+
<KolLink_label="BITV"_href="https://www.bitvtest.de/bitv_test.html"_target="blank" /> for accessibility, and is implemented as a multi-theme-enabled presentation layer. There is no technical reference and
70
59
no data transfer functionalities. This makes <KoliBri /> equally reusable for the realization of static websites as
71
60
well as dynamic web applications of different corporate designs and style guides and thus very interesting for open
72
61
source.
@@ -98,7 +87,7 @@ import { translate } from '@docusaurus/Translate';
98
87
<ul>
99
88
<li>
100
89
<strong>Making accessible</strong>: The artifacts and source code can be reused freely and without charge by
101
-
anyone. In this way, the ITZBund makes a contribution in the sense of <kol-link_href="https://publiccode.eu/"_target="publiccode">“Public Money – Public Code”</kol-link>.
90
+
anyone. In this way, the ITZBund makes a contribution in the sense of <KolLink_label="“Public Money – Public Code”"_href="https://publiccode.eu/"_target="blank" />.
102
91
</li>
103
92
<li>
104
93
<strong>Warranty and liability disclaimer</strong>: No warranty or liability claims are associated with the reuse.
@@ -141,7 +130,7 @@ import { translate } from '@docusaurus/Translate';
141
130
142
131
<pclassName="col-12">
143
132
Web components can be rendered on the client side (CSR), prerendered (SSG), or on the server side (SSR). The rendering
144
-
depends on the respective technical framework conditions (<KolLink_href="https://web.dev/rendering-on-the-web/"_target="web.dev">https://web.dev</KolLink>, <KolLink_href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e"_target="web.dev">https://medium.com</KolLink>).
133
+
depends on the respective technical framework conditions (<KolLink_label="https://web.dev"_href="https://web.dev/rendering-on-the-web/"_target="blank" />, <KolLink_label="https://medium.com"_href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e"_target="blank" />).
145
134
</p>
146
135
<p>
147
136
<KolAlert_type="info"_variant="card">
@@ -156,7 +145,7 @@ import { translate } from '@docusaurus/Translate';
156
145
<KolAlert_type="info"_variant="card">
157
146
<small>
158
147
🧪 Server-side rendering of Web Components is an exciting new functionality where adjustments to the prerenderer
159
-
will still be necessary and is therefore classified as experimental on our part (<KolLink_href="https://web.dev/declarative-shadow-dom/"_target="web.dev">https://web.dev</KolLink>).
148
+
will still be necessary and is therefore classified as experimental on our part (<KolLink_label="https://web.dev"_href="https://web.dev/declarative-shadow-dom/"_target="blank" />).
160
149
</small>
161
150
</KolAlert>
162
151
</p>
@@ -208,7 +197,7 @@ import { translate } from '@docusaurus/Translate';
208
197
existing feature set.
209
198
</li>
210
199
</ul>
211
-
You can find the complete description of the SemVer here: <kol-link_href="https://semver.org"_target="semver">https://semver.org</kol-link>
200
+
You can find the complete description of the SemVer here: <KolLink_label="https://semver.org"_href="https://semver.org"_target="blank" />
0 commit comments