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
and are therefore reusable in all web-based projects. In the following figure, these components are represented by the
42
-
gray-dashed shapes in the center.
34
+
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>
35
+
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.
43
36
</p>
44
37
<p>
45
38
<KolIndentedText>
@@ -54,34 +47,14 @@ import { Mermaid } from '@site/src/components/Mermaid';
54
47
55
48
<p>
56
49
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
52
+
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.
76
53
</p>
77
54
<p>
78
55
<KolIndentedText>
79
56
<strong>
80
-
2. We have completely decoupled the whole CSS from the components (like{''}
2. We have completely decoupled the whole CSS from the components (like <KolLink_href="https://styled-components.com"_target="styled-components">Styled-Components</KolLink>).
85
58
</strong>
86
59
</KolIndentedText>
87
60
</p>
@@ -147,14 +120,14 @@ stateDiagram-v2
147
120
can be shared across projects, the theme is packaged in an NPM package and can be made available via any registry.
148
121
</p>
149
122
<p>
150
-
<KolDetails_summary="Design-Tokens">
123
+
<KolDetails_label="Design-Tokens">
151
124
Optionally, design schemes can be exported from Figma, for example, using design tokens. These can then be
152
125
transferred into separate CSS files that contain the respective values for the CSS properties. Later, one of these
153
126
CSS files is used to apply the concrete design in combination with the Web Components and the theme on the website.
154
127
</KolDetails>
155
128
</p>
156
129
<p>
157
-
<KolDetails_summary="Dark-Mode">
130
+
<KolDetails_label="Dark-Mode">
158
131
Optionally, a “dark mode” theme can also be implemented. For this, the required CSS can be stored in the globals of
159
132
the KoliBri theme.
160
133
</KolDetails>
@@ -164,10 +137,6 @@ stateDiagram-v2
164
137
<p>
165
138
Own specific components, which are not provided by KoliBri and unfortunately do not fit to the KoliBri component
166
139
variety, can be built in own component libraries and maintained independently. For this purpose, we offer the
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>).
0 commit comments