Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: update doc #247

Merged
merged 1 commit into from
Oct 29, 2024
Merged

chore: update doc #247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 11 additions & 28 deletions ...ocusaurus-plugin-content-docs/version-2.1/20-concepts/05-styling/34-theming.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { KolAlert, KolDetails, KolIndentedText, KolLink, } from '@public-ui/react';
import { KoliBri } from '@site/src/components/KoliBri';
import { Mermaid } from '@site/src/components/Mermaid';
import {KolAlert, KolDetails, KolIndentedText, KolLink,} from '@public-ui/react';
import {KoliBri} from '@site/src/components/KoliBri';
import {Mermaid} from '@site/src/components/Mermaid';

# Theming

Expand All @@ -9,9 +9,7 @@ import { Mermaid } from '@site/src/components/Mermaid';
</KolAlert>

<p>
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"/>
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" />
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.
</p>
<p>
Expand All @@ -26,24 +24,15 @@ import { Mermaid } from '@site/src/components/Mermaid';
/>

<p>
In the first release (v1.0) <KoliBri/> had directly implemented the individualization of the standard design using
so-called <strong><KolLink _label="CSS-Properties" _href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
_target="_blank"/></strong>
(<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
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.
In the first release (v1.0) <KoliBri /> had directly implemented the individualization of the standard design using
so-called <strong><KolLink _label="CSS-Properties" _href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" _target="_blank" /></strong>
(<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
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.
</p>
<p>
<KolIndentedText>
<strong>
2. We have completely decoupled the whole CSS from the components (like <KolLink _label="Styled-Components" _href="https://styled-components.com"
_target="_blank"/>).
2. We have completely decoupled the whole CSS from the components (like <KolLink _label="Styled-Components" _href="https://styled-components.com" _target="_blank" />).
</strong>
</KolIndentedText>
</p>
Expand Down Expand Up @@ -104,7 +93,7 @@ stateDiagram-v2
<p>
For example, the UI/UX team specifies the components of their design system with Figma. When the specification is
transferred to implementation, the design is “transferred” to the basic components in the form of pure CSS using the
<KolLink _label="KoliBri-Designer" _href="/en/docs/concepts/styling/designer"/>. If customizability is desired in your
<KolLink _label="KoliBri-Designer" _href="/en/docs/concepts/styling/designer" />. If customizability is desired in your
design system, CSS properties or design tokens can be defined in the Designer for this purpose. So that the own theme
can be shared across projects, the theme is packaged in an NPM package and can be made available via any registry.
</p>
Expand All @@ -126,12 +115,6 @@ stateDiagram-v2
<p>
Own specific components, which are not provided by KoliBri and unfortunately do not fit to the KoliBri component
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
_label="Modularization"
_href="/en/docs/concepts/architecture#advanced"
_target="_blank"
/>
).
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" />).
</p>
</KolAlert>
46 changes: 23 additions & 23 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,32 +30,32 @@
"regenerate:version": "rimraf i18n/en/docusaurus-plugin-content-docs/version-2.0 versioned_docs/version-2.0 versioned_readmes/2.0 versioned_sidebars/version-2.0-sidebars.json && npm run docusaurus docs:version 2.0"
},
"dependencies": {
"@docusaurus/core": "3.4.0",
"@docusaurus/eslint-plugin": "3.4.0",
"@docusaurus/plugin-client-redirects": "3.4.0",
"@docusaurus/plugin-ideal-image": "3.4.0",
"@docusaurus/plugin-pwa": "3.4.0",
"@docusaurus/preset-classic": "3.4.0",
"@docusaurus/theme-mermaid": "3.4.0",
"@docusaurus/theme-translations": "3.4.0",
"@docusaurus/core": "3.5.2",
"@docusaurus/eslint-plugin": "3.5.2",
"@docusaurus/plugin-client-redirects": "3.5.2",
"@docusaurus/plugin-ideal-image": "3.5.2",
"@docusaurus/plugin-pwa": "3.5.2",
"@docusaurus/preset-classic": "3.5.2",
"@docusaurus/theme-mermaid": "3.5.2",
"@docusaurus/theme-translations": "3.5.2",
"@leanup/form": "1.3.54",
"@mdx-js/react": "3.0.1",
"@mdx-js/react": "3.1.0",
"@monaco-editor/react": "4.6.0",
"@public-ui/components": "2.1.8",
"@public-ui/react": "2.1.8",
"@public-ui/themes": "2.1.8",
"@public-ui/components": "2.1.9",
"@public-ui/react": "2.1.9",
"@public-ui/themes": "2.1.9",
"classnames": "2.5.1",
"docusaurus-lunr-search": "3.4.0",
"mermaid": "10.9.1",
"docusaurus-lunr-search": "3.5.0",
"mermaid": "10.9.3",
"prettier": "2.8.8",
"react": "18.3.1",
"react-dom": "18.3.1",
"read-excel-file": "5.8.5"
"read-excel-file": "5.8.6"
},
"devDependencies": {
"@docsearch/react": "3.6.1",
"@docusaurus/module-type-aliases": "3.4.0",
"@docusaurus/types": "3.4.0",
"@docsearch/react": "3.6.2",
"@docusaurus/module-type-aliases": "3.5.2",
"@docusaurus/types": "3.5.2",
"@tsconfig/docusaurus": "2.0.3",
"@types/prettier": "2.7.3",
"@typescript-eslint/eslint-plugin": "7.18.0",
Expand All @@ -65,19 +65,19 @@
"depcheck": "1.4.7",
"docusaurus-plugin-sass": "0.2.5",
"eslint": "8.57.1",
"eslint-plugin-jsx-a11y": "6.10.0",
"eslint-plugin-jsx-a11y": "6.10.2",
"eslint-plugin-mdx": "3.1.5",
"eslint-plugin-react": "7.36.1",
"eslint-plugin-react": "7.37.2",
"html-minifier-terser": "7.2.0",
"npm-check-updates": "16.14.20",
"npm-run-all": "4.1.5",
"postcss": "8.4.47",
"prop-types": "15.8.1",
"rimraf": "3.0.2",
"sass": "1.79.3",
"tailwindcss": "3.4.13",
"sass": "1.80.4",
"tailwindcss": "3.4.14",
"ts-prune": "0.10.3",
"typescript": "5.6.2"
"typescript": "5.6.3"
},
"browserslist": {
"production": [
Expand Down
Loading