From acead26eeb6f15ec6d39970e4af08aa23ee48cdc Mon Sep 17 00:00:00 2001 From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com> Date: Thu, 6 Oct 2022 14:50:16 -0500 Subject: [PATCH] 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 Co-authored-by: Alessandra Davila --- examples/custom-theme/.gitignore | 24 ++++++++++ examples/custom-theme/index.html | 13 +++++ examples/custom-theme/package.json | 22 +++++++++ examples/custom-theme/src/App.jsx | 20 ++++++++ examples/custom-theme/src/favicon.svg | 15 ++++++ examples/custom-theme/src/index.scss | 69 +++++++++++++++++++++++++++ examples/custom-theme/src/main.jsx | 12 +++++ examples/custom-theme/vite.config.js | 11 +++++ packages/styles/docs/sass.md | 8 ++-- yarn.lock | 15 ++++++ 10 files changed, 204 insertions(+), 5 deletions(-) create mode 100644 examples/custom-theme/.gitignore create mode 100644 examples/custom-theme/index.html create mode 100644 examples/custom-theme/package.json create mode 100644 examples/custom-theme/src/App.jsx create mode 100644 examples/custom-theme/src/favicon.svg create mode 100644 examples/custom-theme/src/index.scss create mode 100644 examples/custom-theme/src/main.jsx create mode 100644 examples/custom-theme/vite.config.js diff --git a/examples/custom-theme/.gitignore b/examples/custom-theme/.gitignore new file mode 100644 index 000000000000..a547bf36d8d1 --- /dev/null +++ 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 new file mode 100644 index 000000000000..b46ab83364e3 --- /dev/null +++ b/examples/custom-theme/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json new file mode 100644 index 000000000000..ebd9900197bd --- /dev/null +++ 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 new file mode 100644 index 000000000000..29b9237decc2 --- /dev/null +++ b/examples/custom-theme/src/App.jsx @@ -0,0 +1,20 @@ +import { Button } from '@carbon/react'; +import React from 'react'; + +function App() { + return ( +
+ +
$background
+
$background-active
+
$background-inverse
+
$focus
+
$interactive
+
$text-error
+
$button-primary
+
$custom-token
+
+ ); +} + +export default App; diff --git a/examples/custom-theme/src/favicon.svg b/examples/custom-theme/src/favicon.svg new file mode 100644 index 000000000000..de4aeddc12bd --- /dev/null +++ b/examples/custom-theme/src/favicon.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/examples/custom-theme/src/index.scss b/examples/custom-theme/src/index.scss new file mode 100644 index 000000000000..cb948032c55e --- /dev/null +++ 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 new file mode 100644 index 000000000000..475f242ecfef --- /dev/null +++ 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( + + + , + document.getElementById('root') +); diff --git a/examples/custom-theme/vite.config.js b/examples/custom-theme/vite.config.js new file mode 100644 index 000000000000..a50be4eeb474 --- /dev/null +++ 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 index 2d65f622acfe..8f9b5e92b924 100644 --- 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 index 0521781949bf..658eb77bcc08 100644 --- 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"