mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update docs (#965)

Browse source 
* chore(docs): run "npx browserslist@latest --update-db"

* chore(docs): upgrade carbon-icons-svelte to latest

* refactor(docs): re-use styles from css/all.scss

* chore(docs): add pnpm install command

* chore(docs): upgrade prettier, prettier-plugin-svelte

* docs(date-picker): improve "DatePicker in a modal" example

* fix(docs): restore "scripts-markup-styles" svelte sort order

* chore(docs): upgrade mdsvex

* chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte

* refactor(docs): use svelte:fragment where applicable

* fix(docs): include missing "options" in svelteSortOrder prettier config
This commit is contained in:
Eric Liu 2022-01-01 10:58:42 -08:00 • committed by GitHub
commit dce2dda72a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 119 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

84
docs/src/App.svelte
View file

@ -4,87 +4,3 @@
</script>
<Router routes="{routes}" />
<style lang="scss" global>
// This is a recipe for dynamic, client-side theming
// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
$feature-flags: (
// Custom CSS properties must be enabled to dynamically switch themes
enable-css-custom-properties: true,
ui-shell: true,
grid-columns-16: true
);
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
// Use all Carbon themes
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
@import "carbon-components/scss/globals/scss/component-tokens";
@import "carbon-components/src/components/tag/tag";
@import "carbon-components/src/components/notification/inline-notification";
@import "carbon-components/src/components/notification/toast-notification";
@import "carbon-components-10.47/src/components/popover/popover";
// The default theme is "white" (White)
:root {
@include carbon--theme($carbon--theme--white, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g10" to use the Gray 10 theme
// <html theme="g10">
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g80" to use the Gray 90 theme
// <html theme="g80">
:root[theme="g80"] {
@include carbon--theme($carbon--theme--g80, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
// <html theme="g90">
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Set the <html> theme attribute to "g100" to use the Gray 100 theme
// <html theme="g100">
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Programmatically update the theme in JavaScript:
// document.documentElement.setAttribute("theme", "g90");
@import "carbon-components/scss/globals/scss/_css--reset";
@import "carbon-components/scss/globals/scss/_css--font-face";
@import "carbon-components/scss/globals/scss/_css--helpers";
@import "carbon-components/scss/globals/scss/_css--body";
@import "carbon-components/scss/globals/grid/grid";
// Import all component styles
@import "carbon-components/scss/globals/scss/styles";
</style>