repository·main·Indexed 43 days ago
https://github.com/gabrieldrn/carbon-composeAn unofficial implementation of IBM's Carbon Design System for Compose Multiplatform. It provides a suite of UI components, foundation elements (colors, themes, and typography), and testing utilities for building consistent interfaces across Android, iOS, Desktop, and Web (Wasm). Includes the core `io.github.gabrieldrn:carbon` library and a specialized `carbon-test` library for verifying design system states.
The :carbon module is the core foundation of the Carbon library. It is the source for the published io.github.gabrieldrn:carbon artifact. This module provides the essential design system elements, including:
:carbon-common is a shared library containing common code used by both the :carbon and :carbon-test modules. It is also published as the standalone carbon-common library for use in other projects.Carbon | Compose Multiplatform is an unofficial Compose Multiplatform implementation of IBM's Carbon Design System. It provides UI components designed according to Carbon specifications for use in multiplatform applications.
Supported Platforms:
The carbon-test library provides testing utilities specifically designed for the Carbon API. It includes convenience functions for testing states that are not natively provided by the Compose framework, such as verifying the read-only state of a component.
Important Constraint:
Do not use this module as a dependency in your production code (commonMain). It is strictly intended for use within test source sets.
The library provides a variety of UI components. Note that implementations are currently limited as the library is under development.
Button, Icon button, Icon button with popover.Checkbox, Radio button, Toggle (Default and Small), Slider.Default text input, Text area, Password input.Default dropdown, Multi-select dropdown.Simple date input, Single with calendar.Breadcrumb, TabItem.Accordion, ContentSwitcher (Default and Icon), Popover (Popover box, Caret tip popover).Actionable inline notification, Actionable toast notification, Callout notification, Inline notification, Toast notification.Default loading, Small loading.Default progress bar, Indeterminate progress bar.Tag (Read-only), Tooltip.Some components in Carbon Compose may lack certain size options (like Small or Medium) depending on the target platform. This is primarily driven by accessibility requirements for touch targets:
48x48dp.44x44pt.Carbon Compose follows these platform guidelines to ensure usability. For example, the Button and Dropdown components may lack Small and Medium sizes to maintain compliant touch targets.
Warning: Some components currently provide sizes that do not comply with these accessibility guidelines; these non-compliant sizes are scheduled to be removed before version 1.0.0.
The :catalog module is a Kotlin Multiplatform (KMP) application that serves as an interactive showcase. It allows you to test, explore, and visualize implemented components across all supported platforms (Android, iOS, Desktop, and Web via Wasm).
To build and run the catalog app, refer to the specific documentation in the catalog/README.md file.
The :code-gen module is responsible for generating Kotlin implementations of Carbon tokens. Currently, its scope is limited to generating Carbon theme implementations.
When the main.kt entry point is executed, the module performs the following steps:
resources folder.:carbon module under the package com.gabrieldrn.carbon.foundation.color.Each generated file corresponds to a specific theme and contains the color definitions for that theme.
Carbon Compose provides foundational design elements to ensure visual consistency across your application. These include:
White, Grey10, Grey90, and Grey100.IBM Plex font family.To run the desktop version of the component catalog, execute the run Gradle task.
./gradlew :catalog:runYou can view the web version of the component catalog online or run it locally using the WASM/JS target. To run it locally, execute the wasmJsBrowserRun Gradle task.
./gradlew :catalog:wasmJsBrowserRun/iosCatalog directory and run it using ⌘R.