Skip to content

Commit

Permalink
chore: update doc (#247)
Browse files Browse the repository at this point in the history
  • Loading branch information
@deleonio
deleonio authored Oct 29, 2024
2 parents 084dacd + cffe8f8 commit 594168b
Show file tree
Hide file tree
Showing 28 changed files with 1,018 additions and 941 deletions.
39 changes: 11 additions & 28 deletions ...ocusaurus-plugin-content-docs/version-2.1/20-concepts/05-styling/34-theming.mdx
View file
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
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

0 comments on commit 594168b

Please sign in to comment.