Liferay Companion Workspace For:

How to Implement Your Design System in LXC Using Clay (DevCon 2023)

This workspace contains two examples of implementing the Carbon Design System as a Liferay Theme CSS Client Extension.

carbon-v11-direct-css-copy

This is a direct copy of Carbon's css. It's quick and easy but it will only work with markup designed for Carbon. As a result none of Liferay's components will be restyled to look like Carbon.
carbon-gray-100-v11

This example is applying Carbon's design system to Clay by using Clay's Sass API. This takes a bit more work, but it results in all of Liferay's OOTB components also being styled to match Carbon's design system. This let's you leverage more of Liferay's features and will likely save you time in the long run.

Update liferay.workspace.home.dir= in your gradle.properties file to point towards your Liferay bundle.
From the client-extensions directory run blade gw deploy.

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
client-extensions		client-extensions
configs/local		configs/local
gradle/wrapper		gradle/wrapper
modules		modules
poshi		poshi
themes		themes
.gitignore		.gitignore
.yarnrc		.yarnrc
README.markdown		README.markdown
gradle.properties		gradle.properties
gradlew		gradlew
package.json		package.json
settings.gradle		settings.gradle
test.properties		test.properties
yarn.lock		yarn.lock