feat: add custom theme example with docs (#12244)

* feat: add custom theme example with docs * Update examples/custom-theme/src/index.scss Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: Alessandra Davila <[email protected]>
carbon-design-system · Oct 6, 2022 · acead26 · acead26
1 parent b9d7107
commit acead26
Show file tree

Hide file tree

Showing 10 changed files with 204 additions and 5 deletions.
diff --git a/examples/custom-theme/.gitignore b/examples/custom-theme/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/custom-theme/index.html b/examples/custom-theme/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "custom-theme",
+  "private": true,
+  "version": "0.12.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.14.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "1.1.3",
+    "sass": "^1.51.0",
+    "vite": "^2.9.5"
+  }
+}
diff --git a/examples/custom-theme/src/App.jsx b/examples/custom-theme/src/App.jsx
@@ -0,0 +1,20 @@
+import { Button } from '@carbon/react';
+import React from 'react';
+
+function App() {
+  return (
+    <div>
+      <Button>Button with custom theme</Button>
+      <div className="background color">$background</div>
+      <div className="background-active color">$background-active</div>
+      <div className="background-inverse color">$background-inverse</div>
+      <div className="focus color">$focus</div>
+      <div className="interactive color">$interactive</div>
+      <div className="text-error color">$text-error</div>
+      <div className="button-primary color">$button-primary</div>
+      <div className="custom-token color">$custom-token</div>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/custom-theme/src/favicon.svg b/examples/custom-theme/src/favicon.svg
diff --git a/examples/custom-theme/src/index.scss b/examples/custom-theme/src/index.scss
@@ -0,0 +1,69 @@
+// Full token list: https://github.com/carbon-design-system/carbon/blob/main/packages/themes/docs/sass.md#api
+
+@use '@carbon/react/scss/themes' as *;
+
+//overriding theme tokens and adding a custom token
+@use '@carbon/react/scss/theme' with (
+  $theme: (
+    // add a completely new token
+    custom-token: #bada44,
+    // redefine existing tokens to new values
+    text-error: rebeccapurple,
+    focus: pink,
+  )
+);
+
+// override a component token
+@use '@carbon/react/scss/components/button/tokens' as button-tokens with (
+  $button-primary: #3f51b5
+);
+@use '@carbon/react';
+
+:root {
+  @include theme.theme();
+}
+
+.color {
+  padding: 1rem;
+  margin: 1rem;
+  height: 3rem;
+  width: 20rem;
+}
+
+.background {
+  background: theme.$background;
+  border: 2px solid rgba(theme.get('custom-token'), 0.95);
+}
+
+.background-active {
+  background: theme.$background-active;
+}
+
+.background-inverse {
+  background: theme.$background-inverse;
+  color: theme.$focus;
+}
+
+.focus {
+  background: theme.$focus;
+}
+
+.interactive {
+  background: theme.$interactive;
+  color: white;
+}
+
+.text-error {
+  background: theme.$text-error;
+  color: white;
+}
+
+.button-primary {
+  background: button-tokens.$button-primary;
+  color: white;
+}
+
+// You can access a custom variable via the theme.get() mixin
+.custom-token {
+  background: rgba(theme.get('custom-token'), 0.95);
+}
diff --git a/examples/custom-theme/src/main.jsx b/examples/custom-theme/src/main.jsx
@@ -0,0 +1,12 @@
+import './index.scss'
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
diff --git a/examples/custom-theme/vite.config.js b/examples/custom-theme/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react({
+      jsxRuntime: 'classic',
+    }),
+  ],
+});
diff --git a/packages/styles/docs/sass.md b/packages/styles/docs/sass.md
@@ -279,16 +279,14 @@ There are also some helpers that you can use from this entrypoint. These
 include:
 
 - `theme.get` to get access to the value of a token from the theme
-- `theme.extend` to extend the current theme with new values
 
 You can use these in the following way:
 
 ```scss
 @use '@carbon/styles/scss/theme';
-
-@include theme.extend(
-  (
-    custom-token: #000000,
+@use '@carbon/styles/scss/theme' with (
+  $theme: (
+    custom-token: #bada44,
   )
 );
 

diff --git a/yarn.lock b/yarn.lock
@@ -12802,6 +12802,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"custom-theme@workspace:examples/custom-theme":
+  version: 0.0.0-use.local
+  resolution: "custom-theme@workspace:examples/custom-theme"
+  dependencies:
+    "@carbon/react": ^1.14.0
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18.0.0
+    "@vitejs/plugin-react": 1.1.3
+    react: ^17.0.0
+    react-dom: ^17.0.0
+    sass: ^1.51.0
+    vite: ^2.9.5
+  languageName: unknown
+  linkType: soft
+
 "cyclist@npm:^1.0.1":
   version: 1.0.1
   resolution: "cyclist@npm:1.0.1"