diff --git a/examples/carbon-for-ibm-products/APIKeyModal/index.html b/examples/carbon-for-ibm-products/APIKeyModal/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/index.html +++ b/examples/carbon-for-ibm-products/APIKeyModal/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/APIKeyModal/package.json b/examples/carbon-for-ibm-products/APIKeyModal/package.json index 455895eab1..5195e76e59 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/package.json +++ b/examples/carbon-for-ibm-products/APIKeyModal/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss b/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss +++ b/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/APIKeyModal/vite.config.js b/examples/carbon-for-ibm-products/APIKeyModal/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/vite.config.js +++ b/examples/carbon-for-ibm-products/APIKeyModal/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/AboutModal/index.html b/examples/carbon-for-ibm-products/AboutModal/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/AboutModal/index.html +++ b/examples/carbon-for-ibm-products/AboutModal/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/AboutModal/package.json b/examples/carbon-for-ibm-products/AboutModal/package.json index 46c7e31f44..75a547c059 100644 --- a/examples/carbon-for-ibm-products/AboutModal/package.json +++ b/examples/carbon-for-ibm-products/AboutModal/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/AboutModal/src/index.scss b/examples/carbon-for-ibm-products/AboutModal/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/AboutModal/src/index.scss +++ b/examples/carbon-for-ibm-products/AboutModal/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/AboutModal/vite.config.js b/examples/carbon-for-ibm-products/AboutModal/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/AboutModal/vite.config.js +++ b/examples/carbon-for-ibm-products/AboutModal/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/BigNumbers/index.html b/examples/carbon-for-ibm-products/BigNumbers/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/index.html +++ b/examples/carbon-for-ibm-products/BigNumbers/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/BigNumbers/package.json b/examples/carbon-for-ibm-products/BigNumbers/package.json index eb67588b2d..3580c253f2 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/package.json +++ b/examples/carbon-for-ibm-products/BigNumbers/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/BigNumbers/src/index.scss b/examples/carbon-for-ibm-products/BigNumbers/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/src/index.scss +++ b/examples/carbon-for-ibm-products/BigNumbers/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/BigNumbers/vite.config.js b/examples/carbon-for-ibm-products/BigNumbers/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/vite.config.js +++ b/examples/carbon-for-ibm-products/BigNumbers/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/Cascade/index.html b/examples/carbon-for-ibm-products/Cascade/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/Cascade/index.html +++ b/examples/carbon-for-ibm-products/Cascade/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/Cascade/package.json b/examples/carbon-for-ibm-products/Cascade/package.json index 37ccd395d8..9771e460b2 100644 --- a/examples/carbon-for-ibm-products/Cascade/package.json +++ b/examples/carbon-for-ibm-products/Cascade/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/Cascade/src/index.scss b/examples/carbon-for-ibm-products/Cascade/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/Cascade/src/index.scss +++ b/examples/carbon-for-ibm-products/Cascade/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/Cascade/vite.config.js b/examples/carbon-for-ibm-products/Cascade/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/Cascade/vite.config.js +++ b/examples/carbon-for-ibm-products/Cascade/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/Coachmark/index.html b/examples/carbon-for-ibm-products/Coachmark/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/Coachmark/index.html +++ b/examples/carbon-for-ibm-products/Coachmark/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/Coachmark/package.json b/examples/carbon-for-ibm-products/Coachmark/package.json index fd38daec7e..aa6c71631f 100644 --- a/examples/carbon-for-ibm-products/Coachmark/package.json +++ b/examples/carbon-for-ibm-products/Coachmark/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/Coachmark/src/index.scss b/examples/carbon-for-ibm-products/Coachmark/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/Coachmark/src/index.scss +++ b/examples/carbon-for-ibm-products/Coachmark/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/Coachmark/vite.config.js b/examples/carbon-for-ibm-products/Coachmark/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/Coachmark/vite.config.js +++ b/examples/carbon-for-ibm-products/Coachmark/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/index.html b/examples/carbon-for-ibm-products/CoachmarkBeacon/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/index.html +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/package.json b/examples/carbon-for-ibm-products/CoachmarkBeacon/package.json index 340c8be191..06799b38e6 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/package.json +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/vite.config.js b/examples/carbon-for-ibm-products/CoachmarkBeacon/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/vite.config.js +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/index.html b/examples/carbon-for-ibm-products/CoachmarkButton/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/index.html +++ b/examples/carbon-for-ibm-products/CoachmarkButton/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/package.json b/examples/carbon-for-ibm-products/CoachmarkButton/package.json index d38893a482..a8ff773d89 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/package.json +++ b/examples/carbon-for-ibm-products/CoachmarkButton/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/vite.config.js b/examples/carbon-for-ibm-products/CoachmarkButton/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/vite.config.js +++ b/examples/carbon-for-ibm-products/CoachmarkButton/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/index.html b/examples/carbon-for-ibm-products/CoachmarkFixed/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/index.html +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/package.json b/examples/carbon-for-ibm-products/CoachmarkFixed/package.json index 50f617a948..66f9c42faa 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/package.json +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/vite.config.js b/examples/carbon-for-ibm-products/CoachmarkFixed/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/vite.config.js +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/index.html b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/index.html +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/package.json b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/package.json index 529c8c7162..d321f1346f 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/package.json +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/vite.config.js b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/vite.config.js +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/index.html b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/index.html +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/package.json b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/package.json index 9d9c6dc8e8..25b3009a87 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/package.json +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/vite.config.js b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/vite.config.js +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/index.html b/examples/carbon-for-ibm-products/CoachmarkStack/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/index.html +++ b/examples/carbon-for-ibm-products/CoachmarkStack/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/package.json b/examples/carbon-for-ibm-products/CoachmarkStack/package.json index 06ae1696a3..10ca37c6fc 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/package.json +++ b/examples/carbon-for-ibm-products/CoachmarkStack/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/vite.config.js b/examples/carbon-for-ibm-products/CoachmarkStack/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/vite.config.js +++ b/examples/carbon-for-ibm-products/CoachmarkStack/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/README.md b/examples/carbon-for-ibm-products/ConditionBuilder/README.md new file mode 100644 index 0000000000..7fe2245096 --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/README.md @@ -0,0 +1,61 @@ +# Carbon for IBM Products `ConditionBuilder` example + +This example was initially generated by `@carbon/ibm-products` using the script `update-gallery-config` found in `package.json`. + +## Adding an example + +If using the `generate` script then a base example should be created for you. If for some reason this is not the case do the following: + +1. Duplicate an existing example e.g. `examples/carbon-for-ibm-products/AboutModal` and rename it to your match your component e.g. `MyComponent` +2. Edit `gallery.config.json` which has the following form. + +```json +{ + "label": "Name of example in gallery", + "package-config": { + "flags": { + "component": { + "MyComponent": true + }, + "feature": { + "MyFeature": true + } + "prefix": "alt-prefix", + }, + "templates-variation": "templates-react-16" + } +} +``` + +NOTE: All fields are optional, although most specify a label. + +The `package-config` section is used to specify the config used with the example, including prefix and any flags enabled. + +The `template-variation` is used to specify an alternative to the default template. This is currently used for React versions only. + +3. Edit the `src/Example` folder to show your component. +4. Run the example and replace `thumbnail.png` with a picture of your example. + +NOTE 2: The only files retained after each run of the update script are `thumbnail.png`, `gallery.config.json`, and those in `src/Example`, so ensure all of your example source sits in the `src/Example` folder. + +## Updating examples + +Skip step 1 for `Adding an example` otherwise the same. + +## Adding / Updating a template or variant + +The simplest way to update a template is as follows. + +1. Copy the a generated example to the `scripts/example-gallery-builder/update-example` folder. +2. Update it as necessary. +3. Test that it works. +4. Remove the folder `scripts/example-gallery-builder/update-example/templates` and rename your folder to this. +5. Review the changes made and restore/rectify the template TAGS typically in capitals. These are replaced as part of the build process. E.g. ConditionBuilder, 2024, import './config' +. For a full set of current tags review the code in `scripts/example-gallery-builder/update-example/index.js`. +6. Remove the files `gallery.config.json`, `thumbnail.png` and the folder `src/Example`. + +### If a variant + +To reduce maintenance variants only need files which differ from the core `templates` folder. Delete any new files you did not intend to add. + +Variants are selected by folder name in the `gallery.config.json` file. diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/index.html b/examples/carbon-for-ibm-products/ConditionBuilder/index.html new file mode 100644 index 0000000000..5d37ff8603 --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + Vite + React + + + +
+ + + + \ No newline at end of file diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/package.json b/examples/carbon-for-ibm-products/ConditionBuilder/package.json index 1d0d023863..204aa71c49 100644 --- a/examples/carbon-for-ibm-products/ConditionBuilder/package.json +++ b/examples/carbon-for-ibm-products/ConditionBuilder/package.json @@ -1,4 +1,56 @@ { "name": "ConditionBuilder-component-example", - "note": "Run `update-gallery-config to generate." + "description": "An example showing use of the ConditionBuilder component from the @carbon/ibm-products component library.", + "keywords": [ + "carbon", + "ibm", + "ibm-products", + "component", + "conditionbuilder", + "condition", + "builder" + ], + "license": "Apache-2.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@carbon/ibm-products": "^2.21.0", + "@carbon/react": "^1.60.3", + "lodash": "^4.17.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sass": "^1.70.0" + }, + "devDependencies": { + "@types/react": "^18.2.48", + "@types/react-dom": "^18.2.18", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.56.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "vite": "^4.5.3" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "eslintConfig": { + "extends": [ + "react-app" + ] + } } diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/App.jsx b/examples/carbon-for-ibm-products/ConditionBuilder/src/App.jsx new file mode 100644 index 0000000000..3406fb08c3 --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/App.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { ThemeProvider } from './ThemeSelector/ThemeContext'; +import { ThemeDropdown } from './ThemeSelector/ThemeDropdown'; +import './config'; +import Example from './Example/Example'; + +function App() { + return ( +
+ + + + +
+ ); +} + +export default App; diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/ThemeContext.jsx new file mode 100644 index 0000000000..c3972fc82c --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/ThemeContext.jsx @@ -0,0 +1,61 @@ +import React, { createContext, useReducer } from 'react'; + +export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, + { + text: 'White', + value: 'carbon-theme--white', + }, + { + text: 'Gray 10', + value: 'carbon-theme--g10', + }, + { + text: 'Gray 90', + value: 'carbon-theme--g90', + }, + { + text: 'Gray 100', + value: 'carbon-theme--g100', + }, +]; + +export const ThemeContext = createContext(); + +const initialState = { + currentTheme: themeData[1], +}; + +const themeReducer = (state, action) => { + switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': + case 'carbon-theme--white': + case 'carbon-theme--g10': + case 'carbon-theme--g90': + case 'carbon-theme--g100': + return { currentTheme: action.type }; + default: + return state; + } +}; + +export function ThemeProvider(props) { + const [state, dispatch] = useReducer(themeReducer, initialState); + + return ( + + { + // eslint-disable-next-line react/prop-types + props.children + } + + ); +} diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/ThemeDropdown.jsx b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/ThemeDropdown.jsx new file mode 100644 index 0000000000..091f7241da --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/ThemeDropdown.jsx @@ -0,0 +1,31 @@ +import React, { useContext } from 'react'; +import { Dropdown } from '@carbon/react'; +import { ThemeContext, themeData } from './ThemeContext'; + +import './_theme-dropdown.scss'; + +export const ThemeDropdown = () => { + const theme = useContext(ThemeContext); + + const setTheme = (selectedItem) => { + const bodyElement = document.body; + bodyElement.className = selectedItem.value; + theme.dispatch({ type: selectedItem }); + }; + + return ( +
+ (item ? item.text : '')} + onChange={(event) => setTheme(event.selectedItem)} + selectedItem={theme.state.currentTheme} + label="Select a Carbon theme" + titleText="Select a Carbon theme" + /> +
+ ); +}; diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/_theme-dropdown.scss new file mode 100644 index 0000000000..dfffdea257 --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/_theme-dropdown.scss @@ -0,0 +1,68 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/themes'; +@use '@carbon/styles/scss/type'; +@use '@carbon/styles/scss/config'; + +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + +.carbon-theme--white { + @include theme(themes.$white, true); +} + +.carbon-theme--g10 { + @include theme(themes.$g10, true); +} + +.carbon-theme--g90 { + @include theme(themes.$g90, true); +} + +.carbon-theme--g100 { + @include theme(themes.$g100, true); +} + +.carbon-theme-dropdown { + position: fixed; + bottom: 1rem; // stylelint-disable-line carbon/layout-token-use + left: 1rem; // stylelint-disable-line carbon/layout-token-use + min-width: 11.5rem; +} + +.carbon-theme-dropdown .#{config.$prefix}--label { + @include type.type-style('label-01'); +} diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/config.js b/examples/carbon-for-ibm-products/ConditionBuilder/src/config.js new file mode 100644 index 0000000000..e733b064bd --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/config.js @@ -0,0 +1,3 @@ +import { pkg } from '@carbon/ibm-products'; + +pkg.component.ConditionBuilder = true; diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/favicon.svg b/examples/carbon-for-ibm-products/ConditionBuilder/src/favicon.svg new file mode 100644 index 0000000000..9fef3d7aab --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/favicon.svg @@ -0,0 +1,4 @@ + + + diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/index.scss b/examples/carbon-for-ibm-products/ConditionBuilder/src/index.scss new file mode 100644 index 0000000000..b008a957c7 --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/index.scss @@ -0,0 +1,11 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@use '@carbon/react' with ( + $font-path: '@ibm/plex' +); +@use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/main.jsx b/examples/carbon-for-ibm-products/ConditionBuilder/src/main.jsx new file mode 100644 index 0000000000..91e8d06798 --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/main.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { createRoot } from 'react-dom'; +import App from './App.jsx'; +import './index.scss'; + +const root = createRoot(document.getElementById('root')); + +root.render( + + + +); diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/vite.config.js b/examples/carbon-for-ibm-products/ConditionBuilder/vite.config.js new file mode 100644 index 0000000000..5ad2480f5b --- /dev/null +++ b/examples/carbon-for-ibm-products/ConditionBuilder/vite.config.js @@ -0,0 +1,18 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + react({ + jsxRuntime: 'classic', + }), + ], +}); diff --git a/examples/carbon-for-ibm-products/CreateFullPage/index.html b/examples/carbon-for-ibm-products/CreateFullPage/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/index.html +++ b/examples/carbon-for-ibm-products/CreateFullPage/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CreateFullPage/package.json b/examples/carbon-for-ibm-products/CreateFullPage/package.json index 4d7acd901d..b0af7b2212 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/package.json +++ b/examples/carbon-for-ibm-products/CreateFullPage/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss b/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CreateFullPage/vite.config.js b/examples/carbon-for-ibm-products/CreateFullPage/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/vite.config.js +++ b/examples/carbon-for-ibm-products/CreateFullPage/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CreateModal/index.html b/examples/carbon-for-ibm-products/CreateModal/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CreateModal/index.html +++ b/examples/carbon-for-ibm-products/CreateModal/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CreateModal/package.json b/examples/carbon-for-ibm-products/CreateModal/package.json index b585c4a9d4..ffb43676f7 100644 --- a/examples/carbon-for-ibm-products/CreateModal/package.json +++ b/examples/carbon-for-ibm-products/CreateModal/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CreateModal/src/index.scss b/examples/carbon-for-ibm-products/CreateModal/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CreateModal/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateModal/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CreateModal/vite.config.js b/examples/carbon-for-ibm-products/CreateModal/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CreateModal/vite.config.js +++ b/examples/carbon-for-ibm-products/CreateModal/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/index.html b/examples/carbon-for-ibm-products/CreateSidePanel/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/index.html +++ b/examples/carbon-for-ibm-products/CreateSidePanel/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/package.json b/examples/carbon-for-ibm-products/CreateSidePanel/package.json index e216378cf9..5ec9821ce4 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/package.json +++ b/examples/carbon-for-ibm-products/CreateSidePanel/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss b/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/vite.config.js b/examples/carbon-for-ibm-products/CreateSidePanel/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/vite.config.js +++ b/examples/carbon-for-ibm-products/CreateSidePanel/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/index.html b/examples/carbon-for-ibm-products/CreateTearsheet/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/index.html +++ b/examples/carbon-for-ibm-products/CreateTearsheet/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/package.json b/examples/carbon-for-ibm-products/CreateTearsheet/package.json index 03af588001..ae8b6244ab 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/package.json +++ b/examples/carbon-for-ibm-products/CreateTearsheet/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss b/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/vite.config.js b/examples/carbon-for-ibm-products/CreateTearsheet/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/vite.config.js +++ b/examples/carbon-for-ibm-products/CreateTearsheet/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/index.html b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/index.html +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/package.json b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/package.json index 01a1cf9a51..8a9de6d4b3 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/package.json +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/vite.config.js b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/vite.config.js +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/index.html b/examples/carbon-for-ibm-products/DataSpreadsheet/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/index.html +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/package.json b/examples/carbon-for-ibm-products/DataSpreadsheet/package.json index dae7371559..7e42a5c6c7 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/package.json +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss b/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/vite.config.js b/examples/carbon-for-ibm-products/DataSpreadsheet/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/vite.config.js +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/Datagrid/index.html b/examples/carbon-for-ibm-products/Datagrid/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/Datagrid/index.html +++ b/examples/carbon-for-ibm-products/Datagrid/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/Datagrid/package.json b/examples/carbon-for-ibm-products/Datagrid/package.json index d9c638341e..f9ff272137 100644 --- a/examples/carbon-for-ibm-products/Datagrid/package.json +++ b/examples/carbon-for-ibm-products/Datagrid/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/Datagrid/src/index.scss b/examples/carbon-for-ibm-products/Datagrid/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/Datagrid/src/index.scss +++ b/examples/carbon-for-ibm-products/Datagrid/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/Datagrid/vite.config.js b/examples/carbon-for-ibm-products/Datagrid/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/Datagrid/vite.config.js +++ b/examples/carbon-for-ibm-products/Datagrid/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/Decorator/index.html b/examples/carbon-for-ibm-products/Decorator/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/Decorator/index.html +++ b/examples/carbon-for-ibm-products/Decorator/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/Decorator/package.json b/examples/carbon-for-ibm-products/Decorator/package.json index 304402e3ce..2f38d6da63 100644 --- a/examples/carbon-for-ibm-products/Decorator/package.json +++ b/examples/carbon-for-ibm-products/Decorator/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/Decorator/src/index.scss b/examples/carbon-for-ibm-products/Decorator/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/Decorator/src/index.scss +++ b/examples/carbon-for-ibm-products/Decorator/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/Decorator/vite.config.js b/examples/carbon-for-ibm-products/Decorator/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/Decorator/vite.config.js +++ b/examples/carbon-for-ibm-products/Decorator/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/DelimitedList/index.html b/examples/carbon-for-ibm-products/DelimitedList/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/index.html +++ b/examples/carbon-for-ibm-products/DelimitedList/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/DelimitedList/package.json b/examples/carbon-for-ibm-products/DelimitedList/package.json index d5368f7282..0d732d302d 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/package.json +++ b/examples/carbon-for-ibm-products/DelimitedList/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/DelimitedList/src/index.scss b/examples/carbon-for-ibm-products/DelimitedList/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/src/index.scss +++ b/examples/carbon-for-ibm-products/DelimitedList/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/DelimitedList/vite.config.js b/examples/carbon-for-ibm-products/DelimitedList/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/vite.config.js +++ b/examples/carbon-for-ibm-products/DelimitedList/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/DescriptionList/index.html b/examples/carbon-for-ibm-products/DescriptionList/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/index.html +++ b/examples/carbon-for-ibm-products/DescriptionList/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/DescriptionList/package.json b/examples/carbon-for-ibm-products/DescriptionList/package.json index 3df2fbdbd2..b6f27d8283 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/package.json +++ b/examples/carbon-for-ibm-products/DescriptionList/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/DescriptionList/src/index.scss b/examples/carbon-for-ibm-products/DescriptionList/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/src/index.scss +++ b/examples/carbon-for-ibm-products/DescriptionList/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/DescriptionList/vite.config.js b/examples/carbon-for-ibm-products/DescriptionList/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/vite.config.js +++ b/examples/carbon-for-ibm-products/DescriptionList/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/EditInPlace/index.html b/examples/carbon-for-ibm-products/EditInPlace/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/index.html +++ b/examples/carbon-for-ibm-products/EditInPlace/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/EditInPlace/package.json b/examples/carbon-for-ibm-products/EditInPlace/package.json index 26b52351dd..b5ccf763a7 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/package.json +++ b/examples/carbon-for-ibm-products/EditInPlace/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/EditInPlace/src/index.scss b/examples/carbon-for-ibm-products/EditInPlace/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/src/index.scss +++ b/examples/carbon-for-ibm-products/EditInPlace/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/EditInPlace/vite.config.js b/examples/carbon-for-ibm-products/EditInPlace/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/vite.config.js +++ b/examples/carbon-for-ibm-products/EditInPlace/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/EmptyStates/index.html b/examples/carbon-for-ibm-products/EmptyStates/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/index.html +++ b/examples/carbon-for-ibm-products/EmptyStates/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/EmptyStates/package.json b/examples/carbon-for-ibm-products/EmptyStates/package.json index 92ac884733..dc8e303e36 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/package.json +++ b/examples/carbon-for-ibm-products/EmptyStates/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/EmptyStates/src/index.scss b/examples/carbon-for-ibm-products/EmptyStates/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/src/index.scss +++ b/examples/carbon-for-ibm-products/EmptyStates/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/EmptyStates/vite.config.js b/examples/carbon-for-ibm-products/EmptyStates/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/vite.config.js +++ b/examples/carbon-for-ibm-products/EmptyStates/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/ExportModal/index.html b/examples/carbon-for-ibm-products/ExportModal/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/ExportModal/index.html +++ b/examples/carbon-for-ibm-products/ExportModal/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/ExportModal/package.json b/examples/carbon-for-ibm-products/ExportModal/package.json index 463587d9c2..6f365993e2 100644 --- a/examples/carbon-for-ibm-products/ExportModal/package.json +++ b/examples/carbon-for-ibm-products/ExportModal/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/ExportModal/src/index.scss b/examples/carbon-for-ibm-products/ExportModal/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/ExportModal/src/index.scss +++ b/examples/carbon-for-ibm-products/ExportModal/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/ExportModal/vite.config.js b/examples/carbon-for-ibm-products/ExportModal/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/ExportModal/vite.config.js +++ b/examples/carbon-for-ibm-products/ExportModal/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/index.html b/examples/carbon-for-ibm-products/ExpressiveCard/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/index.html +++ b/examples/carbon-for-ibm-products/ExpressiveCard/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/package.json b/examples/carbon-for-ibm-products/ExpressiveCard/package.json index 1f49187cc8..5926568931 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/package.json +++ b/examples/carbon-for-ibm-products/ExpressiveCard/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss b/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss +++ b/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/vite.config.js b/examples/carbon-for-ibm-products/ExpressiveCard/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/vite.config.js +++ b/examples/carbon-for-ibm-products/ExpressiveCard/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/FilterPanel/index.html b/examples/carbon-for-ibm-products/FilterPanel/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/index.html +++ b/examples/carbon-for-ibm-products/FilterPanel/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/FilterPanel/package.json b/examples/carbon-for-ibm-products/FilterPanel/package.json index cd4bc43a12..af247dea3a 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/package.json +++ b/examples/carbon-for-ibm-products/FilterPanel/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/FilterPanel/src/index.scss b/examples/carbon-for-ibm-products/FilterPanel/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/src/index.scss +++ b/examples/carbon-for-ibm-products/FilterPanel/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/FilterPanel/vite.config.js b/examples/carbon-for-ibm-products/FilterPanel/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/vite.config.js +++ b/examples/carbon-for-ibm-products/FilterPanel/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/FullPageError/index.html b/examples/carbon-for-ibm-products/FullPageError/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/FullPageError/index.html +++ b/examples/carbon-for-ibm-products/FullPageError/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/FullPageError/package.json b/examples/carbon-for-ibm-products/FullPageError/package.json index 51dcb6635e..fd1dbd22f8 100644 --- a/examples/carbon-for-ibm-products/FullPageError/package.json +++ b/examples/carbon-for-ibm-products/FullPageError/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/FullPageError/src/index.scss b/examples/carbon-for-ibm-products/FullPageError/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/FullPageError/src/index.scss +++ b/examples/carbon-for-ibm-products/FullPageError/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/FullPageError/vite.config.js b/examples/carbon-for-ibm-products/FullPageError/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/FullPageError/vite.config.js +++ b/examples/carbon-for-ibm-products/FullPageError/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/GetStartedCard/README.md b/examples/carbon-for-ibm-products/GetStartedCard/README.md new file mode 100644 index 0000000000..102e05b63c --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/README.md @@ -0,0 +1,61 @@ +# Carbon for IBM Products `GetStartedCard` example + +This example was initially generated by `@carbon/ibm-products` using the script `update-gallery-config` found in `package.json`. + +## Adding an example + +If using the `generate` script then a base example should be created for you. If for some reason this is not the case do the following: + +1. Duplicate an existing example e.g. `examples/carbon-for-ibm-products/AboutModal` and rename it to your match your component e.g. `MyComponent` +2. Edit `gallery.config.json` which has the following form. + +```json +{ + "label": "Name of example in gallery", + "package-config": { + "flags": { + "component": { + "MyComponent": true + }, + "feature": { + "MyFeature": true + } + "prefix": "alt-prefix", + }, + "templates-variation": "templates-react-16" + } +} +``` + +NOTE: All fields are optional, although most specify a label. + +The `package-config` section is used to specify the config used with the example, including prefix and any flags enabled. + +The `template-variation` is used to specify an alternative to the default template. This is currently used for React versions only. + +3. Edit the `src/Example` folder to show your component. +4. Run the example and replace `thumbnail.png` with a picture of your example. + +NOTE 2: The only files retained after each run of the update script are `thumbnail.png`, `gallery.config.json`, and those in `src/Example`, so ensure all of your example source sits in the `src/Example` folder. + +## Updating examples + +Skip step 1 for `Adding an example` otherwise the same. + +## Adding / Updating a template or variant + +The simplest way to update a template is as follows. + +1. Copy the a generated example to the `scripts/example-gallery-builder/update-example` folder. +2. Update it as necessary. +3. Test that it works. +4. Remove the folder `scripts/example-gallery-builder/update-example/templates` and rename your folder to this. +5. Review the changes made and restore/rectify the template TAGS typically in capitals. These are replaced as part of the build process. E.g. GetStartedCard, 2024, import './config' +. For a full set of current tags review the code in `scripts/example-gallery-builder/update-example/index.js`. +6. Remove the files `gallery.config.json`, `thumbnail.png` and the folder `src/Example`. + +### If a variant + +To reduce maintenance variants only need files which differ from the core `templates` folder. Delete any new files you did not intend to add. + +Variants are selected by folder name in the `gallery.config.json` file. diff --git a/examples/carbon-for-ibm-products/GetStartedCard/index.html b/examples/carbon-for-ibm-products/GetStartedCard/index.html new file mode 100644 index 0000000000..5d37ff8603 --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + Vite + React + + + +
+ + + + \ No newline at end of file diff --git a/examples/carbon-for-ibm-products/GetStartedCard/package.json b/examples/carbon-for-ibm-products/GetStartedCard/package.json index 60b3d26b2c..275a582394 100644 --- a/examples/carbon-for-ibm-products/GetStartedCard/package.json +++ b/examples/carbon-for-ibm-products/GetStartedCard/package.json @@ -1,4 +1,57 @@ { "name": "GetStartedCard-component-example", - "note": "Run `update-gallery-config to generate." + "description": "An example showing use of the GetStartedCard component from the @carbon/ibm-products component library.", + "keywords": [ + "carbon", + "ibm", + "ibm-products", + "component", + "getstartedcard", + "get", + "started", + "card" + ], + "license": "Apache-2.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, + "dependencies": { + "@carbon/ibm-products": "^2.21.0", + "@carbon/react": "^1.60.3", + "lodash": "^4.17.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sass": "^1.70.0" + }, + "devDependencies": { + "@types/react": "^18.2.48", + "@types/react-dom": "^18.2.18", + "@vitejs/plugin-react": "^4.2.1", + "eslint": "^8.56.0", + "eslint-plugin-react": "^7.33.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-react-refresh": "^0.4.5", + "vite": "^4.5.3" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + }, + "eslintConfig": { + "extends": [ + "react-app" + ] + } } diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/App.jsx b/examples/carbon-for-ibm-products/GetStartedCard/src/App.jsx new file mode 100644 index 0000000000..3406fb08c3 --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/App.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { ThemeProvider } from './ThemeSelector/ThemeContext'; +import { ThemeDropdown } from './ThemeSelector/ThemeDropdown'; +import './config'; +import Example from './Example/Example'; + +function App() { + return ( +
+ + + + +
+ ); +} + +export default App; diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/Example/Example.jsx b/examples/carbon-for-ibm-products/GetStartedCard/src/Example/Example.jsx index 7442b7df03..d5859358ea 100644 --- a/examples/carbon-for-ibm-products/GetStartedCard/src/Example/Example.jsx +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/Example/Example.jsx @@ -32,7 +32,7 @@ export const Example = () => { footerActionIcon: () => , onClick: () => {}, step: 3, - status: 'incomplete' + status: 'incomplete', }; return ( diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/ThemeContext.jsx new file mode 100644 index 0000000000..c3972fc82c --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/ThemeContext.jsx @@ -0,0 +1,61 @@ +import React, { createContext, useReducer } from 'react'; + +export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, + { + text: 'White', + value: 'carbon-theme--white', + }, + { + text: 'Gray 10', + value: 'carbon-theme--g10', + }, + { + text: 'Gray 90', + value: 'carbon-theme--g90', + }, + { + text: 'Gray 100', + value: 'carbon-theme--g100', + }, +]; + +export const ThemeContext = createContext(); + +const initialState = { + currentTheme: themeData[1], +}; + +const themeReducer = (state, action) => { + switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': + case 'carbon-theme--white': + case 'carbon-theme--g10': + case 'carbon-theme--g90': + case 'carbon-theme--g100': + return { currentTheme: action.type }; + default: + return state; + } +}; + +export function ThemeProvider(props) { + const [state, dispatch] = useReducer(themeReducer, initialState); + + return ( + + { + // eslint-disable-next-line react/prop-types + props.children + } + + ); +} diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/ThemeDropdown.jsx b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/ThemeDropdown.jsx new file mode 100644 index 0000000000..091f7241da --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/ThemeDropdown.jsx @@ -0,0 +1,31 @@ +import React, { useContext } from 'react'; +import { Dropdown } from '@carbon/react'; +import { ThemeContext, themeData } from './ThemeContext'; + +import './_theme-dropdown.scss'; + +export const ThemeDropdown = () => { + const theme = useContext(ThemeContext); + + const setTheme = (selectedItem) => { + const bodyElement = document.body; + bodyElement.className = selectedItem.value; + theme.dispatch({ type: selectedItem }); + }; + + return ( +
+ (item ? item.text : '')} + onChange={(event) => setTheme(event.selectedItem)} + selectedItem={theme.state.currentTheme} + label="Select a Carbon theme" + titleText="Select a Carbon theme" + /> +
+ ); +}; diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/_theme-dropdown.scss new file mode 100644 index 0000000000..dfffdea257 --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/_theme-dropdown.scss @@ -0,0 +1,68 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/themes'; +@use '@carbon/styles/scss/type'; +@use '@carbon/styles/scss/config'; + +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + +.carbon-theme--white { + @include theme(themes.$white, true); +} + +.carbon-theme--g10 { + @include theme(themes.$g10, true); +} + +.carbon-theme--g90 { + @include theme(themes.$g90, true); +} + +.carbon-theme--g100 { + @include theme(themes.$g100, true); +} + +.carbon-theme-dropdown { + position: fixed; + bottom: 1rem; // stylelint-disable-line carbon/layout-token-use + left: 1rem; // stylelint-disable-line carbon/layout-token-use + min-width: 11.5rem; +} + +.carbon-theme-dropdown .#{config.$prefix}--label { + @include type.type-style('label-01'); +} diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/config.js b/examples/carbon-for-ibm-products/GetStartedCard/src/config.js new file mode 100644 index 0000000000..c4927216b3 --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/config.js @@ -0,0 +1,3 @@ +import { pkg } from '@carbon/ibm-products'; + +pkg.component.GetStartedCard = true; diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/favicon.svg b/examples/carbon-for-ibm-products/GetStartedCard/src/favicon.svg new file mode 100644 index 0000000000..9fef3d7aab --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/favicon.svg @@ -0,0 +1,4 @@ + + + diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/index.scss b/examples/carbon-for-ibm-products/GetStartedCard/src/index.scss new file mode 100644 index 0000000000..b008a957c7 --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/index.scss @@ -0,0 +1,11 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +@use '@carbon/react' with ( + $font-path: '@ibm/plex' +); +@use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/main.jsx b/examples/carbon-for-ibm-products/GetStartedCard/src/main.jsx new file mode 100644 index 0000000000..91e8d06798 --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/main.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { createRoot } from 'react-dom'; +import App from './App.jsx'; +import './index.scss'; + +const root = createRoot(document.getElementById('root')); + +root.render( + + + +); diff --git a/examples/carbon-for-ibm-products/GetStartedCard/vite.config.js b/examples/carbon-for-ibm-products/GetStartedCard/vite.config.js new file mode 100644 index 0000000000..5ad2480f5b --- /dev/null +++ b/examples/carbon-for-ibm-products/GetStartedCard/vite.config.js @@ -0,0 +1,18 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + react({ + jsxRuntime: 'classic', + }), + ], +}); diff --git a/examples/carbon-for-ibm-products/HTTPErrors/index.html b/examples/carbon-for-ibm-products/HTTPErrors/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/index.html +++ b/examples/carbon-for-ibm-products/HTTPErrors/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/HTTPErrors/package.json b/examples/carbon-for-ibm-products/HTTPErrors/package.json index bc310e95c7..a9c28e1612 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/package.json +++ b/examples/carbon-for-ibm-products/HTTPErrors/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss b/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss +++ b/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/HTTPErrors/vite.config.js b/examples/carbon-for-ibm-products/HTTPErrors/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/vite.config.js +++ b/examples/carbon-for-ibm-products/HTTPErrors/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/ImportModal/index.html b/examples/carbon-for-ibm-products/ImportModal/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/ImportModal/index.html +++ b/examples/carbon-for-ibm-products/ImportModal/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/ImportModal/package.json b/examples/carbon-for-ibm-products/ImportModal/package.json index efd5456f0c..eda8799e41 100644 --- a/examples/carbon-for-ibm-products/ImportModal/package.json +++ b/examples/carbon-for-ibm-products/ImportModal/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/ImportModal/src/index.scss b/examples/carbon-for-ibm-products/ImportModal/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/ImportModal/src/index.scss +++ b/examples/carbon-for-ibm-products/ImportModal/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/ImportModal/vite.config.js b/examples/carbon-for-ibm-products/ImportModal/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/ImportModal/vite.config.js +++ b/examples/carbon-for-ibm-products/ImportModal/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/index.html b/examples/carbon-for-ibm-products/InterstitialScreen/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/index.html +++ b/examples/carbon-for-ibm-products/InterstitialScreen/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/package.json b/examples/carbon-for-ibm-products/InterstitialScreen/package.json index bc5cbf4793..b4afccc1de 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/package.json +++ b/examples/carbon-for-ibm-products/InterstitialScreen/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss b/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/vite.config.js b/examples/carbon-for-ibm-products/InterstitialScreen/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/vite.config.js +++ b/examples/carbon-for-ibm-products/InterstitialScreen/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/index.html b/examples/carbon-for-ibm-products/InterstitialScreenView/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/index.html +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/package.json b/examples/carbon-for-ibm-products/InterstitialScreenView/package.json index a0968dc6e3..501ed04010 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/package.json +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss b/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/vite.config.js b/examples/carbon-for-ibm-products/InterstitialScreenView/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/vite.config.js +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/index.html b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/index.html +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/package.json b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/package.json index 80302d07f9..afddec23b3 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/package.json +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/package.json @@ -22,7 +22,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/vite.config.js b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/vite.config.js +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/Nav/index.html b/examples/carbon-for-ibm-products/Nav/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/Nav/index.html +++ b/examples/carbon-for-ibm-products/Nav/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/Nav/package.json b/examples/carbon-for-ibm-products/Nav/package.json index 82ffc44344..1834566d56 100644 --- a/examples/carbon-for-ibm-products/Nav/package.json +++ b/examples/carbon-for-ibm-products/Nav/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/Nav/src/index.scss b/examples/carbon-for-ibm-products/Nav/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/Nav/src/index.scss +++ b/examples/carbon-for-ibm-products/Nav/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/Nav/vite.config.js b/examples/carbon-for-ibm-products/Nav/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/Nav/vite.config.js +++ b/examples/carbon-for-ibm-products/Nav/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/index.html b/examples/carbon-for-ibm-products/NotificationsPanel/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/index.html +++ b/examples/carbon-for-ibm-products/NotificationsPanel/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/package.json b/examples/carbon-for-ibm-products/NotificationsPanel/package.json index e0507282fc..a726156d2d 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/package.json +++ b/examples/carbon-for-ibm-products/NotificationsPanel/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss b/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss +++ b/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/vite.config.js b/examples/carbon-for-ibm-products/NotificationsPanel/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/vite.config.js +++ b/examples/carbon-for-ibm-products/NotificationsPanel/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/OptionsTile/index.html b/examples/carbon-for-ibm-products/OptionsTile/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/index.html +++ b/examples/carbon-for-ibm-products/OptionsTile/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/OptionsTile/package.json b/examples/carbon-for-ibm-products/OptionsTile/package.json index c51cf574b6..1c55b2ab99 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/package.json +++ b/examples/carbon-for-ibm-products/OptionsTile/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/OptionsTile/src/index.scss b/examples/carbon-for-ibm-products/OptionsTile/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/src/index.scss +++ b/examples/carbon-for-ibm-products/OptionsTile/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/OptionsTile/vite.config.js b/examples/carbon-for-ibm-products/OptionsTile/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/vite.config.js +++ b/examples/carbon-for-ibm-products/OptionsTile/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/PageHeader/index.html b/examples/carbon-for-ibm-products/PageHeader/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/PageHeader/index.html +++ b/examples/carbon-for-ibm-products/PageHeader/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/PageHeader/package.json b/examples/carbon-for-ibm-products/PageHeader/package.json index 2a536617fc..c088d2f455 100644 --- a/examples/carbon-for-ibm-products/PageHeader/package.json +++ b/examples/carbon-for-ibm-products/PageHeader/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/PageHeader/src/index.scss b/examples/carbon-for-ibm-products/PageHeader/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/PageHeader/src/index.scss +++ b/examples/carbon-for-ibm-products/PageHeader/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/PageHeader/vite.config.js b/examples/carbon-for-ibm-products/PageHeader/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/PageHeader/vite.config.js +++ b/examples/carbon-for-ibm-products/PageHeader/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/ProductiveCard/index.html b/examples/carbon-for-ibm-products/ProductiveCard/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/index.html +++ b/examples/carbon-for-ibm-products/ProductiveCard/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/ProductiveCard/package.json b/examples/carbon-for-ibm-products/ProductiveCard/package.json index a914080780..f172e2a7e0 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/package.json +++ b/examples/carbon-for-ibm-products/ProductiveCard/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss b/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss +++ b/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/ProductiveCard/vite.config.js b/examples/carbon-for-ibm-products/ProductiveCard/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/vite.config.js +++ b/examples/carbon-for-ibm-products/ProductiveCard/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/RemoveModal/index.html b/examples/carbon-for-ibm-products/RemoveModal/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/index.html +++ b/examples/carbon-for-ibm-products/RemoveModal/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/RemoveModal/package.json b/examples/carbon-for-ibm-products/RemoveModal/package.json index 40359b6828..878c51c980 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/package.json +++ b/examples/carbon-for-ibm-products/RemoveModal/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/RemoveModal/src/index.scss b/examples/carbon-for-ibm-products/RemoveModal/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/src/index.scss +++ b/examples/carbon-for-ibm-products/RemoveModal/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/RemoveModal/vite.config.js b/examples/carbon-for-ibm-products/RemoveModal/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/vite.config.js +++ b/examples/carbon-for-ibm-products/RemoveModal/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/Saving/index.html b/examples/carbon-for-ibm-products/Saving/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/Saving/index.html +++ b/examples/carbon-for-ibm-products/Saving/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/Saving/package.json b/examples/carbon-for-ibm-products/Saving/package.json index 5465344921..eb05fae3b2 100644 --- a/examples/carbon-for-ibm-products/Saving/package.json +++ b/examples/carbon-for-ibm-products/Saving/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/Saving/src/index.scss b/examples/carbon-for-ibm-products/Saving/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/Saving/src/index.scss +++ b/examples/carbon-for-ibm-products/Saving/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/Saving/vite.config.js b/examples/carbon-for-ibm-products/Saving/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/Saving/vite.config.js +++ b/examples/carbon-for-ibm-products/Saving/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/ScrollGradient/index.html b/examples/carbon-for-ibm-products/ScrollGradient/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/index.html +++ b/examples/carbon-for-ibm-products/ScrollGradient/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/ScrollGradient/package.json b/examples/carbon-for-ibm-products/ScrollGradient/package.json index 4b77daa246..f8d7229379 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/package.json +++ b/examples/carbon-for-ibm-products/ScrollGradient/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss b/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss +++ b/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/ScrollGradient/vite.config.js b/examples/carbon-for-ibm-products/ScrollGradient/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/vite.config.js +++ b/examples/carbon-for-ibm-products/ScrollGradient/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/SearchBar/index.html b/examples/carbon-for-ibm-products/SearchBar/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/SearchBar/index.html +++ b/examples/carbon-for-ibm-products/SearchBar/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/SearchBar/package.json b/examples/carbon-for-ibm-products/SearchBar/package.json index 22eae19228..7caf69d21a 100644 --- a/examples/carbon-for-ibm-products/SearchBar/package.json +++ b/examples/carbon-for-ibm-products/SearchBar/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/SearchBar/src/index.scss b/examples/carbon-for-ibm-products/SearchBar/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/SearchBar/src/index.scss +++ b/examples/carbon-for-ibm-products/SearchBar/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/SearchBar/vite.config.js b/examples/carbon-for-ibm-products/SearchBar/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/SearchBar/vite.config.js +++ b/examples/carbon-for-ibm-products/SearchBar/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/SidePanel/index.html b/examples/carbon-for-ibm-products/SidePanel/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/SidePanel/index.html +++ b/examples/carbon-for-ibm-products/SidePanel/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/SidePanel/package.json b/examples/carbon-for-ibm-products/SidePanel/package.json index a5226bdf87..a0b6e663d5 100644 --- a/examples/carbon-for-ibm-products/SidePanel/package.json +++ b/examples/carbon-for-ibm-products/SidePanel/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/SidePanel/src/index.scss b/examples/carbon-for-ibm-products/SidePanel/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/SidePanel/src/index.scss +++ b/examples/carbon-for-ibm-products/SidePanel/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/SidePanel/vite.config.js b/examples/carbon-for-ibm-products/SidePanel/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/SidePanel/vite.config.js +++ b/examples/carbon-for-ibm-products/SidePanel/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/StatusIcon/index.html b/examples/carbon-for-ibm-products/StatusIcon/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/index.html +++ b/examples/carbon-for-ibm-products/StatusIcon/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/StatusIcon/package.json b/examples/carbon-for-ibm-products/StatusIcon/package.json index 2cd3910008..d9af656e1a 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/package.json +++ b/examples/carbon-for-ibm-products/StatusIcon/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/StatusIcon/src/index.scss b/examples/carbon-for-ibm-products/StatusIcon/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/src/index.scss +++ b/examples/carbon-for-ibm-products/StatusIcon/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/StatusIcon/vite.config.js b/examples/carbon-for-ibm-products/StatusIcon/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/vite.config.js +++ b/examples/carbon-for-ibm-products/StatusIcon/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/StatusIndicator/index.html b/examples/carbon-for-ibm-products/StatusIndicator/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/index.html +++ b/examples/carbon-for-ibm-products/StatusIndicator/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/StatusIndicator/package.json b/examples/carbon-for-ibm-products/StatusIndicator/package.json index 0ad6ab4e29..f7cf1e5d98 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/package.json +++ b/examples/carbon-for-ibm-products/StatusIndicator/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss b/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss +++ b/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/StatusIndicator/vite.config.js b/examples/carbon-for-ibm-products/StatusIndicator/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/vite.config.js +++ b/examples/carbon-for-ibm-products/StatusIndicator/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/StringFormatter/index.html b/examples/carbon-for-ibm-products/StringFormatter/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/index.html +++ b/examples/carbon-for-ibm-products/StringFormatter/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/StringFormatter/package.json b/examples/carbon-for-ibm-products/StringFormatter/package.json index 55de72b79e..23ed6debac 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/package.json +++ b/examples/carbon-for-ibm-products/StringFormatter/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/StringFormatter/src/index.scss b/examples/carbon-for-ibm-products/StringFormatter/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/src/index.scss +++ b/examples/carbon-for-ibm-products/StringFormatter/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/StringFormatter/vite.config.js b/examples/carbon-for-ibm-products/StringFormatter/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/vite.config.js +++ b/examples/carbon-for-ibm-products/StringFormatter/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/TagOverflow/index.html b/examples/carbon-for-ibm-products/TagOverflow/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/index.html +++ b/examples/carbon-for-ibm-products/TagOverflow/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/TagOverflow/package.json b/examples/carbon-for-ibm-products/TagOverflow/package.json index dc2410eb39..b71f6a199f 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/package.json +++ b/examples/carbon-for-ibm-products/TagOverflow/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/TagOverflow/src/index.scss b/examples/carbon-for-ibm-products/TagOverflow/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/src/index.scss +++ b/examples/carbon-for-ibm-products/TagOverflow/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/TagOverflow/vite.config.js b/examples/carbon-for-ibm-products/TagOverflow/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/vite.config.js +++ b/examples/carbon-for-ibm-products/TagOverflow/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/TagSet/index.html b/examples/carbon-for-ibm-products/TagSet/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/TagSet/index.html +++ b/examples/carbon-for-ibm-products/TagSet/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/TagSet/package.json b/examples/carbon-for-ibm-products/TagSet/package.json index ca98899ea4..4a2064de6b 100644 --- a/examples/carbon-for-ibm-products/TagSet/package.json +++ b/examples/carbon-for-ibm-products/TagSet/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/TagSet/src/index.scss b/examples/carbon-for-ibm-products/TagSet/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/TagSet/src/index.scss +++ b/examples/carbon-for-ibm-products/TagSet/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/TagSet/vite.config.js b/examples/carbon-for-ibm-products/TagSet/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/TagSet/vite.config.js +++ b/examples/carbon-for-ibm-products/TagSet/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/Tearsheet/index.html b/examples/carbon-for-ibm-products/Tearsheet/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/index.html +++ b/examples/carbon-for-ibm-products/Tearsheet/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/Tearsheet/package.json b/examples/carbon-for-ibm-products/Tearsheet/package.json index 9a9c6fb8ec..4de13f2738 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/package.json +++ b/examples/carbon-for-ibm-products/Tearsheet/package.json @@ -18,7 +18,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/Tearsheet/src/index.scss b/examples/carbon-for-ibm-products/Tearsheet/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/src/index.scss +++ b/examples/carbon-for-ibm-products/Tearsheet/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/Tearsheet/vite.config.js b/examples/carbon-for-ibm-products/Tearsheet/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/vite.config.js +++ b/examples/carbon-for-ibm-products/Tearsheet/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/TruncatedList/index.html b/examples/carbon-for-ibm-products/TruncatedList/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/index.html +++ b/examples/carbon-for-ibm-products/TruncatedList/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/TruncatedList/package.json b/examples/carbon-for-ibm-products/TruncatedList/package.json index 48620b9dd3..6cbbca0d1e 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/package.json +++ b/examples/carbon-for-ibm-products/TruncatedList/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/TruncatedList/src/index.scss b/examples/carbon-for-ibm-products/TruncatedList/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/src/index.scss +++ b/examples/carbon-for-ibm-products/TruncatedList/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/TruncatedList/vite.config.js b/examples/carbon-for-ibm-products/TruncatedList/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/vite.config.js +++ b/examples/carbon-for-ibm-products/TruncatedList/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/UserAvatar/index.html b/examples/carbon-for-ibm-products/UserAvatar/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/index.html +++ b/examples/carbon-for-ibm-products/UserAvatar/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/UserAvatar/package.json b/examples/carbon-for-ibm-products/UserAvatar/package.json index 5e032f9fc4..dfef026ffd 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/package.json +++ b/examples/carbon-for-ibm-products/UserAvatar/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/UserAvatar/src/index.scss b/examples/carbon-for-ibm-products/UserAvatar/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/src/index.scss +++ b/examples/carbon-for-ibm-products/UserAvatar/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/UserAvatar/vite.config.js b/examples/carbon-for-ibm-products/UserAvatar/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/vite.config.js +++ b/examples/carbon-for-ibm-products/UserAvatar/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/UserProfileImage/index.html b/examples/carbon-for-ibm-products/UserProfileImage/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/index.html +++ b/examples/carbon-for-ibm-products/UserProfileImage/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/UserProfileImage/package.json b/examples/carbon-for-ibm-products/UserProfileImage/package.json index 706fdcb7b3..3474869192 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/package.json +++ b/examples/carbon-for-ibm-products/UserProfileImage/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss b/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss +++ b/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/UserProfileImage/vite.config.js b/examples/carbon-for-ibm-products/UserProfileImage/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/vite.config.js +++ b/examples/carbon-for-ibm-products/UserProfileImage/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/WebTerminal/index.html b/examples/carbon-for-ibm-products/WebTerminal/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/index.html +++ b/examples/carbon-for-ibm-products/WebTerminal/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/WebTerminal/package.json b/examples/carbon-for-ibm-products/WebTerminal/package.json index 5e9ee74ded..a47f40c66d 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/package.json +++ b/examples/carbon-for-ibm-products/WebTerminal/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/WebTerminal/src/index.scss b/examples/carbon-for-ibm-products/WebTerminal/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/src/index.scss +++ b/examples/carbon-for-ibm-products/WebTerminal/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/WebTerminal/vite.config.js b/examples/carbon-for-ibm-products/WebTerminal/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/vite.config.js +++ b/examples/carbon-for-ibm-products/WebTerminal/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/ConditionBuilder--thumbnail.png b/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/ConditionBuilder--thumbnail.png new file mode 100644 index 0000000000..d35ccc6b99 Binary files /dev/null and b/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/ConditionBuilder--thumbnail.png differ diff --git a/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/GetStartedCard--thumbnail.png b/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/GetStartedCard--thumbnail.png new file mode 100644 index 0000000000..d35ccc6b99 Binary files /dev/null and b/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/GetStartedCard--thumbnail.png differ diff --git a/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/index.js b/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/index.js index a2b0aed845..9faf0beebf 100644 --- a/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/index.js +++ b/examples/carbon-for-ibm-products/example-gallery/src/gallery-config/index.js @@ -19,6 +19,7 @@ import imageCoachmarkFixed from './CoachmarkFixed--thumbnail.png'; import imageCoachmarkOverlayElement from './CoachmarkOverlayElement--thumbnail.png'; import imageCoachmarkOverlayElements from './CoachmarkOverlayElements--thumbnail.png'; import imageCoachmarkStack from './CoachmarkStack--thumbnail.png'; +import imageConditionBuilder from './ConditionBuilder--thumbnail.png'; import imageCreateFullPage from './CreateFullPage--thumbnail.png'; import imageCreateModal from './CreateModal--thumbnail.png'; import imageCreateSidePanel from './CreateSidePanel--thumbnail.png'; @@ -35,6 +36,7 @@ import imageExportModal from './ExportModal--thumbnail.png'; import imageExpressiveCard from './ExpressiveCard--thumbnail.png'; import imageFilterPanel from './FilterPanel--thumbnail.png'; import imageFullPageError from './FullPageError--thumbnail.png'; +import imageGetStartedCard from './GetStartedCard--thumbnail.png'; import imageHTTPErrors from './HTTPErrors--thumbnail.png'; import imageImportModal from './ImportModal--thumbnail.png'; import imageInterstitialScreen from './InterstitialScreen--thumbnail.png'; @@ -115,6 +117,11 @@ const config = [ directory: 'CoachmarkStack', thumbnail: `url(${imageCoachmarkStack}`, }, + { + label: 'Condition-Builder', + directory: 'ConditionBuilder', + thumbnail: `url(${imageConditionBuilder}`, + }, { label: 'Create Full Page', directory: 'CreateFullPage', @@ -195,6 +202,11 @@ const config = [ directory: 'FullPageError', thumbnail: `url(${imageFullPageError}`, }, + { + label: 'Get-Started-Card', + directory: 'GetStartedCard', + thumbnail: `url(${imageGetStartedCard}`, + }, { label: 'HTTP Error', directory: 'HTTPErrors', diff --git a/examples/carbon-for-ibm-products/gallery-examples.test.js b/examples/carbon-for-ibm-products/gallery-examples.test.js index ce69653da4..39d8593fc7 100644 --- a/examples/carbon-for-ibm-products/gallery-examples.test.js +++ b/examples/carbon-for-ibm-products/gallery-examples.test.js @@ -20,6 +20,7 @@ import { Example as CoachmarkFixedExample } from './CoachmarkFixed/src/Example/E import { Example as CoachmarkOverlayElementExample } from './CoachmarkOverlayElement/src/Example/Example'; import { Example as CoachmarkOverlayElementsExample } from './CoachmarkOverlayElements/src/Example/Example'; import { Example as CoachmarkStackExample } from './CoachmarkStack/src/Example/Example'; +import { Example as ConditionBuilderExample } from './ConditionBuilder/src/Example/Example'; import { Example as CreateFullPageExample } from './CreateFullPage/src/Example/Example'; import { Example as CreateModalExample } from './CreateModal/src/Example/Example'; import { Example as CreateSidePanelExample } from './CreateSidePanel/src/Example/Example'; @@ -36,6 +37,7 @@ import { Example as ExportModalExample } from './ExportModal/src/Example/Example import { Example as ExpressiveCardExample } from './ExpressiveCard/src/Example/Example'; import { Example as FilterPanelExample } from './FilterPanel/src/Example/Example'; import { Example as FullPageErrorExample } from './FullPageError/src/Example/Example'; +import { Example as GetStartedCardExample } from './GetStartedCard/src/Example/Example'; import { Example as HTTPErrorsExample } from './HTTPErrors/src/Example/Example'; import { Example as ImportModalExample } from './ImportModal/src/Example/Example'; import { Example as InterstitialScreenExample } from './InterstitialScreen/src/Example/Example'; @@ -134,6 +136,12 @@ describe('All examples', () => { expect(console.error).not.toHaveBeenCalled(); }); + it('ConditionBuilder renders', () => { + render(); + // expect no errors int the console + expect(console.error).not.toHaveBeenCalled(); + }); + it('CreateFullPage renders', () => { render(); // expect no errors int the console @@ -230,6 +238,12 @@ describe('All examples', () => { expect(console.error).not.toHaveBeenCalled(); }); + it('GetStartedCard renders', () => { + render(); + // expect no errors int the console + expect(console.error).not.toHaveBeenCalled(); + }); + it('HTTPErrors renders', () => { render(); // expect no errors int the console diff --git a/examples/carbon-for-ibm-products/prefix-example/index.html b/examples/carbon-for-ibm-products/prefix-example/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/prefix-example/index.html +++ b/examples/carbon-for-ibm-products/prefix-example/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/prefix-example/package.json b/examples/carbon-for-ibm-products/prefix-example/package.json index e714cf2c87..dfbeea9277 100644 --- a/examples/carbon-for-ibm-products/prefix-example/package.json +++ b/examples/carbon-for-ibm-products/prefix-example/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/prefix-example/src/index.scss b/examples/carbon-for-ibm-products/prefix-example/src/index.scss index da5000a4af..f5e1f035ea 100644 --- a/examples/carbon-for-ibm-products/prefix-example/src/index.scss +++ b/examples/carbon-for-ibm-products/prefix-example/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/prefix-example/vite.config.js b/examples/carbon-for-ibm-products/prefix-example/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/prefix-example/vite.config.js +++ b/examples/carbon-for-ibm-products/prefix-example/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/react-16-example/index.html b/examples/carbon-for-ibm-products/react-16-example/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/react-16-example/index.html +++ b/examples/carbon-for-ibm-products/react-16-example/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/react-16-example/package.json b/examples/carbon-for-ibm-products/react-16-example/package.json index bd5e7ca18a..88d5fc537c 100644 --- a/examples/carbon-for-ibm-products/react-16-example/package.json +++ b/examples/carbon-for-ibm-products/react-16-example/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^16.14.0", "react-dom": "^16.14.0", diff --git a/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/react-16-example/src/index.scss b/examples/carbon-for-ibm-products/react-16-example/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/react-16-example/src/index.scss +++ b/examples/carbon-for-ibm-products/react-16-example/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/react-16-example/vite.config.js b/examples/carbon-for-ibm-products/react-16-example/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/react-16-example/vite.config.js +++ b/examples/carbon-for-ibm-products/react-16-example/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; diff --git a/examples/carbon-for-ibm-products/react-17-example/index.html b/examples/carbon-for-ibm-products/react-17-example/index.html index 56d5e127b5..5d37ff8603 100644 --- a/examples/carbon-for-ibm-products/react-17-example/index.html +++ b/examples/carbon-for-ibm-products/react-17-example/index.html @@ -1,3 +1,12 @@ + + diff --git a/examples/carbon-for-ibm-products/react-17-example/package.json b/examples/carbon-for-ibm-products/react-17-example/package.json index 62ada8fe0c..ec2d93e3d1 100644 --- a/examples/carbon-for-ibm-products/react-17-example/package.json +++ b/examples/carbon-for-ibm-products/react-17-example/package.json @@ -21,7 +21,7 @@ }, "dependencies": { "@carbon/ibm-products": "^2.21.0", - "@carbon/react": "^1.51.1", + "@carbon/react": "^1.60.3", "lodash": "^4.17.21", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/ThemeContext.jsx b/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/ThemeContext.jsx index 55a9b2dda8..c3972fc82c 100644 --- a/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/ThemeContext.jsx +++ b/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/ThemeContext.jsx @@ -1,6 +1,14 @@ import React, { createContext, useReducer } from 'react'; export const themeData = [ + { + text: 'System W/90', + value: 'carbon-theme--user-preference-white-90', + }, + { + text: 'System 10/100', + value: 'carbon-theme--user-preference-10-100', + }, { text: 'White', value: 'carbon-theme--white', @@ -22,17 +30,16 @@ export const themeData = [ export const ThemeContext = createContext(); const initialState = { - currentTheme: themeData[0], + currentTheme: themeData[1], }; const themeReducer = (state, action) => { switch (action.type.value) { + case 'carbon-theme--user-preference-white-90': + case 'carbon-theme--user-preference-10-100': case 'carbon-theme--white': - return { currentTheme: action.type }; case 'carbon-theme--g10': - return { currentTheme: action.type }; case 'carbon-theme--g90': - return { currentTheme: action.type }; case 'carbon-theme--g100': return { currentTheme: action.type }; default: diff --git a/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss index 01378bd385..dfffdea257 100644 --- a/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss @@ -1,8 +1,45 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/styles/scss/theme' as *; @use '@carbon/styles/scss/themes'; @use '@carbon/styles/scss/type'; @use '@carbon/styles/scss/config'; +// Best to stick with user preference - DARK +@media (prefers-color-scheme: dark) { + :root { + @include theme(themes.$g100, true); // dark default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g100, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$g90, true); + } +} + +// Best to stick with user preference - LIGHT +@media (prefers-color-scheme: light) { + :root { + @include theme(themes.$white, true); // light default + } + + .carbon-theme--user-preference-10-100 { + @include theme(themes.$g10, true); + } + + .carbon-theme--user-preference-white-90 { + @include theme(themes.$white, true); + } +} + .carbon-theme--white { @include theme(themes.$white, true); } diff --git a/examples/carbon-for-ibm-products/react-17-example/src/index.scss b/examples/carbon-for-ibm-products/react-17-example/src/index.scss index 603100b1c9..b008a957c7 100644 --- a/examples/carbon-for-ibm-products/react-17-example/src/index.scss +++ b/examples/carbon-for-ibm-products/react-17-example/src/index.scss @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + @use '@carbon/react' with ( $font-path: '@ibm/plex' ); diff --git a/examples/carbon-for-ibm-products/react-17-example/vite.config.js b/examples/carbon-for-ibm-products/react-17-example/vite.config.js index a50be4eeb4..5ad2480f5b 100644 --- a/examples/carbon-for-ibm-products/react-17-example/vite.config.js +++ b/examples/carbon-for-ibm-products/react-17-example/vite.config.js @@ -1,3 +1,10 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react';