From f5e56d60e65fd3d730e91e86051656e38184d7f7 Mon Sep 17 00:00:00 2001 From: DANIEL KATOTO Date: Fri, 7 Aug 2026 18:50:34 +0300 Subject: [PATCH 1/5] fix sistent's page layout issue Signed-off-by: DANIEL KATOTO --- src/components/SistentNavigation/toc.style.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js index 9fbe06c55056a6..d7765eb11d7f9b 100644 --- a/src/components/SistentNavigation/toc.style.js +++ b/src/components/SistentNavigation/toc.style.js @@ -7,6 +7,7 @@ const TOCWrapper = styled.div` margin-left: 3rem; margin-top: 3rem; width: 15rem; + min-width: 15rem; padding-bottom: 2rem; @media screen and (min-width: 1280px) and (max-width: 1350px) { margin-left: 0.2rem; @@ -135,7 +136,9 @@ const TOCWrapper = styled.div` background-color: transparent; } - .identity, .components, .getting-started { + .identity, + .components, + .getting-started { display: flex; width: 100%; justify-content: space-between; @@ -148,10 +151,12 @@ const TOCWrapper = styled.div` } } - .identity-sublinks, .components-sublinks { + .identity-sublinks, + .components-sublinks { padding-left: 0.56rem; - .identity-item, .components-item { + .identity-item, + .components-item { font-size: 1.05rem; margin-top: 0.45rem; } From 2e3542eb474564f71d4d410f3dbebcd38c39af8b Mon Sep 17 00:00:00 2001 From: DANIEL KATOTO Date: Mon, 17 Aug 2026 14:32:10 +0300 Subject: [PATCH 2/5] Chore getting start, identity, component sistent pages Signed-off-by: DANIEL KATOTO --- src/components/SistentNavigation/toc.style.js | 7 +- .../Projects/Sistent/components/index.js | 99 +-- .../Sistent/getting-started/about/index.js | 400 +++++---- .../getting-started/installation/index.js | 148 ++-- .../Sistent/getting-started/tokens/index.js | 474 ++++++----- .../Sistent/getting-started/usage/index.js | 771 +++++++++++------- .../Projects/Sistent/sistent-layout.js | 14 +- .../Projects/Sistent/sistent.style.js | 205 ++--- 8 files changed, 1204 insertions(+), 914 deletions(-) diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js index d7765eb11d7f9b..3c199e8f11cfe2 100644 --- a/src/components/SistentNavigation/toc.style.js +++ b/src/components/SistentNavigation/toc.style.js @@ -1,16 +1,13 @@ import styled from "styled-components"; const TOCWrapper = styled.div` - position: absolute; - top: 10rem; - left: 0rem; + padding-top: 3rem; margin-left: 3rem; - margin-top: 3rem; width: 15rem; min-width: 15rem; padding-bottom: 2rem; @media screen and (min-width: 1280px) and (max-width: 1350px) { - margin-left: 0.2rem; + margin-left: 0; } .go-back { diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index a0787b6b8355fc..f4845b78142df0 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -9,12 +9,13 @@ import { Link } from "gatsby"; const SistentComponents = ({ data }) => { // Transform GraphQL data - const componentsData = data?.allMdx?.nodes.map(node => ({ - id: node.id, - name: node.frontmatter.name, - description: node.frontmatter.description, - url: `/projects/sistent/components/${node.frontmatter.component}` - })) || []; + const componentsData = + data?.allMdx?.nodes.map((node) => ({ + id: node.id, + name: node.frontmatter.name, + description: node.frontmatter.description, + url: `/projects/sistent/components/${node.frontmatter.component}`, + })) || []; const [searchQuery, setSearchQuery] = useState(""); const { queryResults, searchData } = useDataList( @@ -22,11 +23,11 @@ const SistentComponents = ({ data }) => { setSearchQuery, searchQuery, ["name"], - "id" + "id", ); const compArray = [...queryResults].sort((a, b) => - a.name.localeCompare(b.name) + a.name.localeCompare(b.name), ); return ( @@ -34,56 +35,58 @@ const SistentComponents = ({ data }) => {

Components

- -
- -
- -

Components

- -

- Components are reusable elements that serve as the building blocks - of the design system. They are curated using the established - identity principles and can be combined to form various elements, - patterns, and templates that can be used to design user - interfaces. -

-
-
-
- +
+ +
+ +
+ +

Components

+ +

+ Components are reusable elements that serve as the building + blocks of the design system. They are curated using the + established identity principles and can be combined to form + various elements, patterns, and templates that can be used to + design user interfaces. +

-
-
- {compArray.map((comp) => ( - -
-
-
{comp.name}
-
{comp.description}
-
-
-
-
-
-
Learn more
-
- +
+
+ +
+
+
+ {compArray.map((comp) => ( + +
+
+
{comp.name}
+
{comp.description}
+
+
+
+
+
+
Learn more
+
+ +
-
- - ))} + + ))} +
-
- + +
); }; -export default SistentComponents; \ No newline at end of file +export default SistentComponents; diff --git a/src/sections/Projects/Sistent/getting-started/about/index.js b/src/sections/Projects/Sistent/getting-started/about/index.js index 9f3afc8c8f548f..f49efc3b3cdd01 100644 --- a/src/sections/Projects/Sistent/getting-started/about/index.js +++ b/src/sections/Projects/Sistent/getting-started/about/index.js @@ -32,203 +32,253 @@ const SistentAbout = () => {

About Sistent

- -
- -
- -

About Sistent

- -

- Sistent an open source design system - that offers building blocks to create consistent, accessible, and - user-friendly interfaces. It's aimed at developers who want to - design applications aligned with the same brand and ensure a - uniform user experience across different products. -

-

- Sistent leverages Material UI libraries and provides a custom - theme on top of it for a consistent look and feel. It includes - components, icons, and design tokens that developers can readily - integrate into their applications. By using Sistent, developers - can save time and effort while maintaining a high-quality user - experience. -

-

- - Sistent provides a consistent user experience across any frontend - software projects that choose to use it. - -

-

- 'Sistent' is a play on words to ensure that we have a{" "} - consistent theme, components, design tokens, etc across all - of the apps that will be using this library. Sistent is a design - system that uses the MUI v5 components and a{" "} - custom theme provider instead of using the default theme - from MUI v5. -

- -

- Sistent is built with Typescript and Reactjs and contains - components and a large collection of icons that can be reused - across projects. If you’re interested in joining the project - (please do!), let us know, and we will help you get started on - contributing. -

-

Layer5 Brand Resources

-
    -
  • Brand Guide
    • -
  • Logos and Brand Kits
    • -
- -

Installation and Quickstart

- -

To install the Sistent NPM package, run:

-
- -
-

- After installation, you can import Sistent theme and any Sistent - component from "@sistent/sistent". The component needs to be - included inside "SistentThemeProvider". -

-

Taking button as an example:

-
-
- - - - - -
- -
- - -

Using your Local Sistent Fork in a Project

- -
-
    -
  • -

    Method 1: File Installation

    -
    • -
      -
    1. - Install your local Sistent package in the project - -

      Example:

      - -

      This will update your Sistent dependency to:

      - -
      2. -
    2. - Build your local Sistent fork -

      - After making changes to your fork, run this command in your local Sistent package. -

      - -
      3. -
    3. - - Run the build command in the project where your local Sistent fork is installed - -

      Example for Meshery UI:

      - -
      4. -
    +
    + +
    + +
    + +

    About Sistent

    +     +

    + Sistent an open source design system that offers building blocks + to create consistent, accessible, and user-friendly interfaces. + It's aimed at developers who want to design applications aligned + with the same brand and ensure a uniform user experience across + different products. +

    - Now, your project should reflect changes from your local Sistent fork. + Sistent leverages Material UI libraries and provides a custom + theme on top of it for a consistent look and feel. It includes + components, icons, and design tokens that developers can readily + integrate into their applications. By using Sistent, developers + can save time and effort while maintaining a high-quality user + experience.

    - If you want to remove the local Sistent fork from your project, run: + + Sistent provides a consistent user experience across any + frontend software projects that choose to use it. +

    -

    - This will remove the local Sistent package from your project. You will have to install the standard package again after running this command: + 'Sistent' is a play on words to ensure that we have a{" "} + consistent theme, components, design tokens, etc across + all of the apps that will be using this library. Sistent is a + design system that uses the MUI v5 components and a{" "} + custom theme provider instead of using the default theme + from MUI v5.

    - +

    + Sistent is built with Typescript and Reactjs and contains + components and a large collection of icons that can be reused + across projects. If you’re interested in joining the project + (please do!), let us know, and we will help you get started on + contributing. +

    +

    Layer5 Brand Resources

    +
      +
    • + Brand Guide +
      • +
    • + Logos and Brand Kits +
      • +
    + +

    Installation and Quickstart

    +     +

    To install the Sistent NPM package, run:

    +
    + +
    +

    + After installation, you can import Sistent theme and any Sistent + component from "@sistent/sistent". The component needs to be + included inside "SistentThemeProvider". +

    +

    Taking button as an example:

    +
    +
    + + + + + +
    + +
    -
  • -

    Method 2: Using npm link

    -

    - This method allows you to link your local Sistent fork globally for easier development. Follow these steps: -

    + +

    Using your Local Sistent Fork in a Project

    +     +
    +
      +
    • +

      Method 1: File Installation

      +
      1. - Link your local Sistent package globally -

        In your local Sistent repo, run the following command:

        - \n npm link"} /> -
        2. -
      2. - Link Sistent in your project -

        In the project where you want to use your local Sistent fork, run:

        - -

        This will create a symlink in your project's node_modules, pointing to your local Sistent package.

        + Install your local Sistent package in the project + +

        Example:

        + +

        This will update your Sistent dependency to:

        +
      3. Build your local Sistent fork -

        After making changes to your fork, run this command in your local Sistent package.

        - -
        4. -
      4. - Run the build command in the project where your local Sistent fork is installed -

        Example for Meshery-UI:

        - -
        5. -

      5. - Verify that your local fork is correctly linked by running: + After making changes to your fork, run this command in + your local Sistent package.

        - ./../../../../"} /> -

        - You can also try this command to verify that your fork is correctly linked: -

        - ../../../../../sistent"} /> +
      6. -

        - To revert back to the official version of Sistent, run: -

        - -

        - Then reinstall the official version, using this command: -

        - + + Run the build command in the project where your local + Sistent fork is installed + +

        Example for Meshery UI:

        +
      - -
    +

    + Now, your project should reflect changes from your local + Sistent fork. +

    +

    + If you want to remove the local Sistent fork from your + project, run: +

    + +

    + This will remove the local Sistent package from your project. + You will have to install the standard package again after + running this command: +

    + + +
  • +

    Method 2: Using npm link

    +

    + This method allows you to link your local Sistent fork + globally for easier development. Follow these steps: +

    +
      +
    1. + Link your local Sistent package globally +

      + In your local Sistent repo, run the following command: +

      + \n npm link" + } + /> +
      2. +
    2. + Link Sistent in your project +

      + In the project where you want to use your local Sistent + fork, run: +

      + +

      + This will create a symlink in your project's + node_modules, pointing to your local Sistent package. +

      +
      3. +
    3. + Build your local Sistent fork +

      + After making changes to your fork, run this command in + your local Sistent package. +

      + +
      4. +
    4. + + Run the build command in the project where your local + Sistent fork is installed + +

      Example for Meshery-UI:

      + +
      5. +
    5. +

      + Verify that your local fork is correctly linked by + running: +

      + ./../../../../" + } + /> +

      + You can also try this command to verify that your fork + is correctly linked: +

      + ../../../../../sistent" + } + /> +
      6. +
    6. +

      + To revert back to the official version of Sistent, run: +

      + +

      + Then reinstall the official version, using this command: +

      + +
      7. +
    +
    • +
-

- To contribute to projects using Sistent e.g.{" "} - - meshery-ui - {" "} - and others, you can refer to the {" "} - - Sistent set-up guide - , {" "} - Hands-on Training Session: Migrating Components to MUI v5 and Sistent, {" "} - - Training: contributing to Sistent, - {" "} - and{" "} - - Websites call - {" "} - , where experienced contributors demonstrate how to use Sistent in various projects. -

-
- - - +

+ To contribute to projects using Sistent e.g.{" "} + + meshery-ui + {" "} + and others, you can refer to the{" "} + + Sistent set-up guide + + ,{" "} + + Hands-on Training Session: Migrating Components to MUI v5 and + Sistent + + ,{" "} + + Training: contributing to Sistent, + {" "} + and{" "} + + Websites call + {" "} + , where experienced contributors demonstrate how to use Sistent + in various projects. +

+
+ + + +
); }; -export default SistentAbout; \ No newline at end of file +export default SistentAbout; diff --git a/src/sections/Projects/Sistent/getting-started/installation/index.js b/src/sections/Projects/Sistent/getting-started/installation/index.js index 44f16e085b5eb1..8fd2b24f6363c7 100644 --- a/src/sections/Projects/Sistent/getting-started/installation/index.js +++ b/src/sections/Projects/Sistent/getting-started/installation/index.js @@ -39,80 +39,82 @@ const SistentInstallation = () => {

Installation

- -
- -
- -

Overview

- -

- Sistent is a React-based design system from Layer5. To get - started, make sure your environment meets the requirements - specified in the project's canonical{" "} - - package.json +

+ +
+ +
+ +

Overview

 - . You will also need Node.js{" "} - >=16.x. -

- -

Installation

- -

Install Sistent using your preferred package manager:

-

Using npm

- -

Using yarn

- - -

Quick Start

- -

- Wrap your application with SistentThemeProvider to - enable theming and start using components. The theme provider - automatically handles light/dark mode switching based on system - preferences. -

- -

- That's it! Your Sistent components will - automatically inherit the Layer5 design system with proper - theming, spacing, and colors. Components such as{" "} - Button will also respond to system dark mode changes - automatically. -

- -

Contributing

- -

- If you want to contribute or use it in your project locally, see - our   - - Contributing Guide - {" "} - for complete setup instructions. -

-
- - - +

+ Sistent is a React-based design system from Layer5. To get + started, make sure your environment meets the requirements + specified in the project's canonical{" "} + + package.json + + . You will also need Node.js{" "} + >=16.x. +

+ +

Installation

+ +

Install Sistent using your preferred package manager:

+

Using npm

+ +

Using yarn

+ + +

Quick Start

+ +

+ Wrap your application with SistentThemeProvider to + enable theming and start using components. The theme provider + automatically handles light/dark mode switching based on system + preferences. +

+ +

+ That's it! Your Sistent components will + automatically inherit the Layer5 design system with proper + theming, spacing, and colors. Components such as{" "} + Button will also respond to system dark mode + changes automatically. +

+ +

Contributing

+ +

+ If you want to contribute or use it in your project locally, see + our   + + Contributing Guide + {" "} + for complete setup instructions. +

+
+ + + +
); diff --git a/src/sections/Projects/Sistent/getting-started/tokens/index.js b/src/sections/Projects/Sistent/getting-started/tokens/index.js index 968484240bfbf6..176e30a6a4983e 100644 --- a/src/sections/Projects/Sistent/getting-started/tokens/index.js +++ b/src/sections/Projects/Sistent/getting-started/tokens/index.js @@ -15,7 +15,7 @@ const contents = [ { id: 2, link: "#color-system", text: "Color System" }, { id: 3, link: "#typography", text: "Typography" }, { id: 4, link: "#spacing", text: "Spacing" }, - { id: 5, link: "#examples", text: "Examples" } + { id: 5, link: "#examples", text: "Examples" }, ]; const codeExamples = { @@ -129,7 +129,7 @@ function ProductShowcase({ products }) { ))}
); -}` +}`, }; const SistentTokens = () => { @@ -140,216 +140,310 @@ const SistentTokens = () => {

Design Tokens

- - -
- -
+
+ - -

Overview

- -

- Design tokens are the foundation of Sistent's design system. They are named values that store - visual design attributes like colors, spacing, and typography scales. Instead of hardcoding - values like #00B39F or 16px, you reference semantic tokens that - automatically adapt to different themes and contexts. -

+
+ +
+ +

Overview

+ +

+ Design tokens are the foundation of Sistent's design system. + They are named values that store visual design attributes like + colors, spacing, and typography scales. Instead of hardcoding + values like #00B39F or 16px, you + reference semantic tokens that automatically adapt to different + themes and contexts. +

- - - Why tokens matter: They ensure visual consistency across Layer5 projects, - enable automatic theming (light/dark mode), and make maintenance significantly easier. - - + + + Why tokens matter: They ensure visual + consistency across Layer5 projects, enable automatic theming + (light/dark mode), and make maintenance significantly easier. + + - -

Accessing Tokens

- -

- All design tokens are available through the theme object using the useTheme hook: -

+ +

Accessing Tokens

+ +

+ All design tokens are available through the theme object using + the useTheme hook: +

-
- -
+
+ +
- -

Color System

- -

- Sistent uses Layer5's brand colors as the foundation, with additional semantic colors - for UI states. -

+ +

Color System

+ +

+ Sistent uses Layer5's brand colors as the foundation, with + additional semantic colors for UI states. +

-
-
- - - - Primary - - +
+ + - Secondary - - - Error - - - Success + + Primary + + + Secondary + + + Error + + + Success + - - + +
+
- -
- -

Typography

- -

- Typography tokens provide consistent text styling across all components. -

+ +

Typography

+ +

+ Typography tokens provide consistent text styling across all + components. +

-
-
- - - Heading 1 - Heading 3 - Heading 6 - Body text primary - Body text secondary - - +
+
+ + + + Heading 1 + + + Heading 3 + + + Heading 6 + + + Body text primary + + + Body text secondary + + + +
+
- -
- -

Spacing

- -

- Sistent uses an 8px-based spacing system. All spacing values are multiples of 8px - for consistent layouts. -

+ +

Spacing

+ +

+ Sistent uses an 8px-based spacing system. All spacing values are + multiples of 8px for consistent layouts. +

-
-
- - - {[1, 2, 3, 4, 6, 8].map((multiplier) => ( - - - spacing({multiplier}) - +
+
+ + + {[1, 2, 3, 4, 6, 8].map((multiplier) => ( - - {multiplier * 8}px - - - ))} - - + key={multiplier} + display="flex" + alignItems="center" + gap={2} + mb={1} + > + + spacing({multiplier}) + + + + {multiplier * 8}px + + + ))} + + +
+
- -
- -

Practical Examples

- -

- Here's how to use multiple token categories together in real components: -

+ +

Practical Examples

+ +

+ Here's how to use multiple token categories together in real + components: +

-
-
- - - - Product Card - - - A beautifully designed card component using Sistent design tokens for consistent styling and theming. - - - $99.99 - - - +
+
+ + + + Product Card + + + A beautifully designed card component using Sistent + design tokens for consistent styling and theming. + + + $99.99 + + + +
+
- -
- -

Implementation Guidelines

-
-
    -
  • Always use tokens instead of hardcoded values for maintainable code
    • -
  • Tokens automatically adapt to light/dark themes without additional configuration
    • -
  • Use useTheme() hook to access all available design tokens
    • -
  • Prefer semantic color names (primary, error) over specific hex values
    • -
  • Follow the 8px spacing grid system for consistent visual rhythm
    • -
  • Test components in both light and dark themes to ensure proper contrast
    • -
-
- - - +

Implementation Guidelines

+
+
    +
  • + Always use tokens instead of hardcoded values for maintainable + code +
    • +
  • + Tokens automatically adapt to light/dark themes without + additional configuration +
    • +
  • + Use useTheme() hook to access all available + design tokens +
    • +
  • + Prefer semantic color names (primary, error) over specific hex + values +
    • +
  • + Follow the 8px spacing grid system for consistent visual + rhythm +
    • +
  • + Test components in both light and dark themes to ensure proper + contrast +
    • +
+
+ + + +
); }; -export default SistentTokens; \ No newline at end of file +export default SistentTokens; diff --git a/src/sections/Projects/Sistent/getting-started/usage/index.js b/src/sections/Projects/Sistent/getting-started/usage/index.js index 62f7cf0920a87e..50f9ff7c3e292c 100644 --- a/src/sections/Projects/Sistent/getting-started/usage/index.js +++ b/src/sections/Projects/Sistent/getting-started/usage/index.js @@ -7,14 +7,21 @@ import SistentPagination from "../../../../../components/SistentNavigation/pagin import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; import CodeBlock from "../../../../../components/CodeBlock"; import { SistentThemeProvider } from "@sistent/sistent"; -import { Button, TextField, Card, CardContent, Typography, Alert } from "@sistent/sistent"; +import { + Button, + TextField, + Card, + CardContent, + Typography, + Alert, +} from "@sistent/sistent"; const contents = [ { id: 0, link: "#overview", text: "Overview" }, { id: 1, link: "#theme-provider", text: "Theme Provider" }, { id: 2, link: "#component-examples", text: "Component Examples" }, { id: 3, link: "#advanced-usage", text: "Advanced Usage" }, - { id: 4, link: "#best-practices", text: "Best Practices" } + { id: 4, link: "#best-practices", text: "Best Practices" }, ]; const codeExamples = { @@ -330,7 +337,7 @@ function ResponsiveGrid() {
); -}` +}`, }; const SistentUsage = () => { @@ -341,328 +348,462 @@ const SistentUsage = () => {

Usage Guide

+
+ +
+ +
+ +

Overview

+ +
+

+ After installing Sistent, you can immediately start using + components in your React application. The most important step + is wrapping your application with the + SistentThemeProvider + to ensure all components have access to the theme context. +

+ + + Prerequisites: Ensure you have React 16.8+ + and have installed Sistent using + + npm install @sistent/sistent + + + +

Quick Start Example

+

Here's the minimal setup to get started with Sistent:

+ +
+
+ + + +
+ +
+
+ + {/* Theme Provider Section */} +

Theme Provider Setup

+
+

+ The SistentThemeProvider is the foundation of + your Sistent application. It provides theme context, manages + color modes, and ensures consistent styling across all + components. +

+ +

Theme Configuration

+

Configure your theme provider with various options:

+ +
+ +
- -
- -
- -

Overview

- -
-

- After installing Sistent, you can immediately start using components in your React application. - The most important step is wrapping your application with the - SistentThemeProvider - to ensure all components have access to the theme context. -

- - - Prerequisites: Ensure you have React 16.8+ and have installed Sistent using - npm install @sistent/sistent - - -

Quick Start Example

-

- Here's the minimal setup to get started with Sistent: -

- -
-
- - - +
+

Theme Provider Props

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropTypeDefaultDescription
+ initialMode + + "light" | "dark" | "system" + + "system" + Sets the initial color mode
+ theme + + Theme + Default themeCustom theme object
+ children + + ReactNode + -Your application components
- -
-
- - {/* Theme Provider Section */} -

Theme Provider Setup

-
-

- The SistentThemeProvider is the foundation of your Sistent application. - It provides theme context, manages color modes, and ensures consistent styling across all components. -

- -

Theme Configuration

-

- Configure your theme provider with various options: -

- -
- -
- -
-

Theme Provider Props

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropTypeDefaultDescription
initialMode"light" | "dark" | "system""system"Sets the initial color mode
themeThemeDefault themeCustom theme object
childrenReactNode-Your application components
-
- - - Important: Place the SistentThemeProvider at the root of your - component tree, typically in your App.js or index.js file. - -
- - {/* Component Examples Section */} -
-

Component Examples

-

- Explore practical examples of Sistent components with different configurations and use cases. -

- -

Button Variations

-

- Sistent provides multiple button variants, colors, and sizes to fit different design needs: -

- -
-
- -
- - - - -
- + + + Important: Place the{" "} + SistentThemeProvider at the root of your + component tree, typically in your App.js or{" "} + index.js file. + +
+ + {/* Component Examples Section */} +
+

Component Examples

+

+ Explore practical examples of Sistent components with + different configurations and use cases. +

+ +

Button Variations

+

+ Sistent provides multiple button variants, colors, and sizes + to fit different design needs: +

+ +
+
+ +
+ + + + +
+ +
+
- -
- -

Interactive Form Example

-

- A complete form example showcasing multiple components working together: -

- -
-
- - - - - Get in Touch - - - Fill out the form below and we'll get back to you soon. - -
- - - - -
- - - + Fill out the form below and we'll get back to you + soon. + +
+ + + + +
+ + + +
+
- -
-
- - {/* Advanced Usage Section */} -

Advanced Usage

-
- -

Theme Customization

-

- Create custom themes and use the theme hook for advanced styling: -

- -
- -
- -

Import Strategies

-

- Optimize your bundle size with smart import strategies: -

- -
- -
- -

Working with Icons

-

- Integrate Sistent's comprehensive icon library: -

- -
-
- -
- - - - -
- +
+ + {/* Advanced Usage Section */} +

Advanced Usage

+
+

Theme Customization

+

+ Create custom themes and use the theme hook for advanced + styling: +

+ +
+
- -
- -

Responsive Design

-

- Build responsive layouts with Sistent's grid system and breakpoint utilities: -

-
-
- -
-
- - - - Responsive Card 1 - - - This card adapts to different screen sizes automatically. - - - - - - - Responsive Card 2 - - - On mobile, cards stack vertically for better readability. - - - - - - - Responsive Card 3 - - - Grid system provides flexible layouts across all devices. - - - - - - - Responsive Card 4 - - - Design system ensures visual unity. - - - + +

Import Strategies

+

Optimize your bundle size with smart import strategies:

+ +
+ +
+ +

Working with Icons

+

Integrate Sistent's comprehensive icon library:

+ +
+
+ +
+ + + + +
+ +
+ +
+ +

Responsive Design

+

+ Build responsive layouts with Sistent's grid system and + breakpoint utilities: +

+
+
+ +
+
+ + + + Responsive Card 1 + + + This card adapts to different screen sizes + automatically. + + + + + + + Responsive Card 2 + + + On mobile, cards stack vertically for better + readability. + + + + + + + Responsive Card 3 + + + Grid system provides flexible layouts across all + devices. + + + + + + + Responsive Card 4 + + + Design system ensures visual unity. + + + +
-
- + +
+
- -
- - {/* Best Practices Section */} -

Best Practices

-
-
    -
  • - Theme Provider: Always wrap your application root with SistentThemeProvider. - Place it as high as possible in your component tree to ensure all components - have access to the theme context. -
    • - -
  • - Import Optimization: Import only the components you need to keep your bundle size minimal. - Use individual imports or group related components together rather than - importing everything. -
    • - -
  • - Consistent Design: Use consistent component variants, colors, and sizing throughout your application. - Create reusable component wrappers for commonly used patterns. -
    • - -
  • - Mobile-First: Leverage Sistent's responsive utilities and breakpoints to create mobile-first - designs. Test your components across different screen sizes. -
    • - -
  • - Accessibility: Take advantage of Sistent's built-in accessibility features. Always provide - proper labels, ARIA attributes, and ensure adequate color contrast. -
    • - -
  • - Theme Customization: Use design tokens and theme customization for styling rather than overriding - CSS directly. This ensures consistency and easier maintenance. -
    • -
- - - Pro Tip: Create a custom hook to manage commonly used theme values - and component configurations across your application. - -
-
- - - + + {/* Best Practices Section */} +

Best Practices

+
+
    +
  • + Theme Provider: Always wrap your + application root with SistentThemeProvider. + Place it as high as possible in your component tree to + ensure all components have access to the theme context. +
    • + +
  • + Import Optimization: Import only the + components you need to keep your bundle size minimal. Use + individual imports or group related components together + rather than importing everything. +
    • + +
  • + Consistent Design: Use consistent component + variants, colors, and sizing throughout your application. + Create reusable component wrappers for commonly used + patterns. +
    • + +
  • + Mobile-First: Leverage Sistent's responsive + utilities and breakpoints to create mobile-first designs. + Test your components across different screen sizes. +
    • + +
  • + Accessibility: Take advantage of Sistent's + built-in accessibility features. Always provide proper + labels, ARIA attributes, and ensure adequate color contrast. +
    • + +
  • + Theme Customization: Use design tokens and + theme customization for styling rather than overriding CSS + directly. This ensures consistency and easier maintenance. +
    • +
+ + + Pro Tip: Create a custom hook to manage + commonly used theme values and component configurations across + your application. + +
+
+ + + +
); }; -export default SistentUsage; \ No newline at end of file +export default SistentUsage; diff --git a/src/sections/Projects/Sistent/sistent-layout.js b/src/sections/Projects/Sistent/sistent-layout.js index 1ed147cd0bbb31..e37cc60d27eee1 100644 --- a/src/sections/Projects/Sistent/sistent-layout.js +++ b/src/sections/Projects/Sistent/sistent-layout.js @@ -11,12 +11,14 @@ export const SistentLayout = ({ title, children }) => {

{title}

- -
- - {children} - - +
+ +
+ + {children} + + +
); diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 0e69050d2121bb..40a193e727427a 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -5,7 +5,7 @@ export const ActionBox = styled(Box)(() => ({ display: "flex", justifyContent: "end", width: "100%", - gap: "1rem" + gap: "1rem", })); const SistentWrapper = styled.div` @@ -38,31 +38,36 @@ const SistentWrapper = styled.div` transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } } + .page-container { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 2rem; + @media screen and (max-width: 751px) { + display: block; + } + } - h2 h3 { + h1, + h2, + h3 { margin: 0.5rem 0; color: ${(props) => props.theme.tertiaryColor}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .page-section { - h2 { - padding-top: 1rem; - margin-top: 1rem; - } + flex: 1 1 auto; + width: auto; + min-width: 0; + h1, + h2, h3 { padding-top: 1rem; margin-top: 1rem; } - padding-left: 20rem; - margin-top: 4rem; - display: flex; - } - .conduct-section { - @media screen and (min-width: 751px) { - margin-top: -43rem; - } } + .page-section .heading-top { @media screen and (min-width: 751px) { padding-top: 1rem; @@ -682,34 +687,33 @@ const SistentWrapper = styled.div` .card_head .title { font-size: 32px; font-weight: 700; - color: ${props => props.theme.text}; + color: ${(props) => props.theme.text}; + } + .card .text { + padding-top: 1rem; + padding-bottom: 2rem; + font-size: 16px; + font-style: normal; + font-weight: 400; + color: ${(props) => props.theme.whiteToBlack}; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + text-overflow: ellipsis; + max-height: calc(1.5rem * 4); } - .card .text { - padding-top: 1rem; - padding-bottom: 2rem; - font-size: 16px; - font-style: normal; - font-weight: 400; - color: ${(props) => props.theme.whiteToBlack}; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; - overflow: hidden; - text-overflow: ellipsis; - max-height: calc(1.5rem * 4); -} .card { - box-shadow: 0px 2px 6px 0px ${props => props.theme.green00D3A9ToBlackTwo}; + box-shadow: 0px 2px 6px 0px ${(props) => props.theme.green00D3A9ToBlackTwo}; transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0s; - &:hover { - box-shadow: 0px 2px 15px 4px ${props => props.theme.whiteNineToBlackOne}; - transform: scale(1.045); - } + &:hover { + box-shadow: 0px 2px 15px 4px ${(props) => props.theme.whiteNineToBlackOne}; + transform: scale(1.045); + } } - .card_bottom { border-top: 2px solid #2c2c2c; display: flex; @@ -945,70 +949,70 @@ const SistentWrapper = styled.div` } /* IconCard container */ -.icon-card-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 16px; - border-radius: 8px; - cursor: pointer; - transition: background-color 0.3s ease; -} - -.icon-card-container.dark { - background-color: #2d2d2d; - color: #fff; -} - -.icon-card-container.light { - background-color: #fff; - color: #000; -} - -.icon-card-container:hover { - background-color: #444; -} - -.icon-card-container.light:hover { - background-color: #f5f5f5; -} - -/* Icon container */ -.icon-container { - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 8px; -} - -/* Icon name */ -.icon-name { - font-size: 14px; - font-weight: 500; - text-align: center; -} - -.icon-name.dark { - color: #fff; -} - -.icon-name.light { - color: #000; -} - -/* No icons found message */ -.no-icons-found { - text-align: center; - font-size: 16px; - color: inherit; -} - -/* Code block styles */ -.code-block { - margin-top: 16px; - margin-bottom: 24px; -} + .icon-card-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 16px; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .icon-card-container.dark { + background-color: #2d2d2d; + color: #fff; + } + + .icon-card-container.light { + background-color: #fff; + color: #000; + } + + .icon-card-container:hover { + background-color: #444; + } + + .icon-card-container.light:hover { + background-color: #f5f5f5; + } + + /* Icon container */ + .icon-container { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 8px; + } + + /* Icon name */ + .icon-name { + font-size: 14px; + font-weight: 500; + text-align: center; + } + + .icon-name.dark { + color: #fff; + } + + .icon-name.light { + color: #000; + } + + /* No icons found message */ + .no-icons-found { + text-align: center; + font-size: 16px; + color: inherit; + } + + /* Code block styles */ + .code-block { + margin-top: 16px; + margin-bottom: 24px; + } /* Responsive adjustments */ @media (max-width: 768px) { .icon-grid { @@ -1022,6 +1026,3 @@ const SistentWrapper = styled.div` `; export default SistentWrapper; - - - From f3e369fb914d3dc1e053281daa10347e6ff3c3b2 Mon Sep 17 00:00:00 2001 From: DANIEL KATOTO Date: Mon, 17 Aug 2026 14:49:30 +0300 Subject: [PATCH 3/5] Remove padding-top on small divices Signed-off-by: DANIEL KATOTO --- src/sections/Projects/Sistent/sistent.style.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 40a193e727427a..2f2a61855fe199 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -66,13 +66,16 @@ const SistentWrapper = styled.div` padding-top: 1rem; margin-top: 1rem; } - } - - .page-section .heading-top { - @media screen and (min-width: 751px) { - padding-top: 1rem; + @media screen and (max-width: 751px) { + h1, + h2, + h3 { + padding-top: 0; + margin-top: 0; + } } } + .sidebar { margin: 0; padding: 0; @@ -287,9 +290,6 @@ const SistentWrapper = styled.div` } @media only screen and (max-width: 750px) { - .content > a:first-of-type > h2:first-of-type { - padding-top: 7rem; - } .page-section { margin-top: -2rem; margin-left: 0; From 8b67af46c4aa4ab3cac119e5b381167ee4b0cddd Mon Sep 17 00:00:00 2001 From: DANIEL KATOTO Date: Mon, 17 Aug 2026 22:14:27 +0300 Subject: [PATCH 4/5] resolve bot review Signed-off-by: DANIEL KATOTO --- src/components/SistentNavigation/toc.style.js | 4 ---- .../Projects/Sistent/getting-started/about/index.js | 10 +++++----- src/sections/Projects/Sistent/sistent.style.js | 4 ++-- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js index 3c199e8f11cfe2..61abd9b0f92df8 100644 --- a/src/components/SistentNavigation/toc.style.js +++ b/src/components/SistentNavigation/toc.style.js @@ -4,11 +4,7 @@ const TOCWrapper = styled.div` padding-top: 3rem; margin-left: 3rem; width: 15rem; - min-width: 15rem; padding-bottom: 2rem; - @media screen and (min-width: 1280px) and (max-width: 1350px) { - margin-left: 0; - } .go-back { margin-left: 1rem; diff --git a/src/sections/Projects/Sistent/getting-started/about/index.js b/src/sections/Projects/Sistent/getting-started/about/index.js index f49efc3b3cdd01..7acf547dc94cc6 100644 --- a/src/sections/Projects/Sistent/getting-started/about/index.js +++ b/src/sections/Projects/Sistent/getting-started/about/index.js @@ -41,11 +41,11 @@ const SistentAbout = () => {

About Sistent

- Sistent an open source design system that offers building blocks - to create consistent, accessible, and user-friendly interfaces. - It's aimed at developers who want to design applications aligned - with the same brand and ensure a uniform user experience across - different products. + Sistent is an open source design system that offers building + blocks to create consistent, accessible, and user-friendly + interfaces. It's aimed at developers who want to design + applications aligned with the same brand and ensure a uniform + user experience across different products.

Sistent leverages Material UI libraries and provides a custom diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 2f2a61855fe199..1f172fc6c478a5 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -43,7 +43,7 @@ const SistentWrapper = styled.div` align-items: flex-start; justify-content: space-between; gap: 2rem; - @media screen and (max-width: 751px) { + @media screen and (max-width: 750px) { display: block; } } @@ -66,7 +66,7 @@ const SistentWrapper = styled.div` padding-top: 1rem; margin-top: 1rem; } - @media screen and (max-width: 751px) { + @media screen and (max-width: 750px) { h1, h2, h3 { From f191d0bb2dc8b7cdeaf96d87a5fbfff63b4439a4 Mon Sep 17 00:00:00 2001 From: DANIEL KATOTO Date: Mon, 17 Aug 2026 23:20:10 +0300 Subject: [PATCH 5/5] resolve bot review 2 Signed-off-by: DANIEL KATOTO --- src/components/SistentNavigation/toc.style.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SistentNavigation/toc.style.js b/src/components/SistentNavigation/toc.style.js index 61abd9b0f92df8..fbbd25161c53b8 100644 --- a/src/components/SistentNavigation/toc.style.js +++ b/src/components/SistentNavigation/toc.style.js @@ -4,6 +4,7 @@ const TOCWrapper = styled.div` padding-top: 3rem; margin-left: 3rem; width: 15rem; + flex: 0 0 15rem; padding-bottom: 2rem; .go-back {