carbon-components-svelte 0.82.7 → 1.0.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -7
- package/css/all.css +9 -1
- package/css/all.scss +23 -69
- package/css/g10.css +9 -1
- package/css/g10.scss +19 -30
- package/css/g100.css +9 -1
- package/css/g100.scss +19 -29
- package/css/g90.css +9 -1
- package/css/g90.scss +19 -29
- package/lib/index.js +1 -1
- package/lib/index.mjs +1835 -2445
- package/package.json +7 -7
- package/src/Accordion/Accordion.svelte +2 -2
- package/src/AspectRatio/AspectRatio.svelte +1 -3
- package/src/Button/Button.svelte +12 -7
- package/src/Button/ButtonSkeleton.svelte +4 -0
- package/src/ComboBox/ComboBox.svelte +1 -1
- package/src/ContentSwitcher/ContentSwitcher.svelte +2 -2
- package/src/DatePicker/DatePickerInput.svelte +2 -2
- package/src/Dropdown/Dropdown.svelte +6 -6
- package/src/FileUploader/FileUploaderItem.svelte +4 -4
- package/src/ListBox/ListBox.svelte +2 -2
- package/src/MultiSelect/MultiSelect.svelte +1 -1
- package/src/NumberInput/NumberInput.svelte +3 -5
- package/src/OverflowMenu/OverflowMenu.svelte +3 -3
- package/src/Popover/Popover.svelte +2 -4
- package/src/Popover/PopoverContent.svelte +10 -0
- package/src/Popover/index.js +1 -0
- package/src/Search/Search.svelte +4 -4
- package/src/Search/SearchSkeleton.svelte +3 -3
- package/src/Select/Select.svelte +3 -3
- package/src/Tabs/Tab.svelte +12 -17
- package/src/Tabs/Tabs.svelte +5 -48
- package/src/Tabs/TabsSkeleton.svelte +6 -9
- package/src/TextArea/TextArea.svelte +6 -2
- package/src/TextInput/PasswordInput.svelte +4 -4
- package/src/TextInput/TextInput.svelte +4 -6
- package/src/Theme/Theme.svelte +3 -4
- package/src/TimePicker/TimePicker.svelte +2 -2
- package/src/Toggle/Toggle.svelte +36 -20
- package/src/Toggle/index.js +0 -1
- package/src/TreeView/TreeView.svelte +4 -4
- package/src/Truncate/Truncate.svelte +2 -2
- package/src/Truncate/truncate.js +1 -1
- package/src/UIShell/HeaderAction.svelte +1 -0
- package/src/UIShell/HeaderActionLink.svelte +2 -5
- package/src/UIShell/HeaderGlobalAction.svelte +1 -0
- package/src/index.js +2 -2
- package/types/Accordion/Accordion.svelte.d.ts +1 -1
- package/types/Button/Button.svelte.d.ts +6 -4
- package/types/Button/ButtonSkeleton.svelte.d.ts +2 -0
- package/types/ComboBox/ComboBox.svelte.d.ts +1 -1
- package/types/ContentSwitcher/ContentSwitcher.svelte.d.ts +1 -1
- package/types/DatePicker/DatePickerInput.svelte.d.ts +1 -1
- package/types/Dropdown/Dropdown.svelte.d.ts +1 -1
- package/types/FileUploader/FileUploaderItem.svelte.d.ts +2 -2
- package/types/ListBox/ListBox.svelte.d.ts +1 -1
- package/types/MultiSelect/MultiSelect.svelte.d.ts +1 -1
- package/types/NumberInput/NumberInput.svelte.d.ts +1 -1
- package/types/OverflowMenu/OverflowMenu.svelte.d.ts +1 -1
- package/types/Popover/PopoverContent.svelte.d.ts +19 -0
- package/types/Search/Search.svelte.d.ts +2 -2
- package/types/Search/SearchSkeleton.svelte.d.ts +2 -2
- package/types/Select/Select.svelte.d.ts +1 -1
- package/types/Tabs/Tab.svelte.d.ts +1 -1
- package/types/Tabs/Tabs.svelte.d.ts +4 -20
- package/types/TextArea/TextArea.svelte.d.ts +1 -1
- package/types/TextInput/PasswordInput.svelte.d.ts +1 -1
- package/types/TextInput/TextInput.svelte.d.ts +1 -1
- package/types/Theme/Theme.svelte.d.ts +1 -1
- package/types/TimePicker/TimePicker.svelte.d.ts +1 -1
- package/types/Toggle/Toggle.svelte.d.ts +3 -3
- package/types/TreeView/TreeView.svelte.d.ts +2 -2
- package/types/index.d.ts +1 -1
- package/css/_popover.scss +0 -325
- package/css/g80.css +0 -1
- package/css/g80.scss +0 -34
- package/css/white.css +0 -1
- package/css/white.scss +0 -33
- package/types/Toggle/ToggleSkeleton.svelte.d.ts +0 -37
package/README.md
CHANGED
|
@@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte
|
|
|
45
45
|
|
|
46
46
|
### Styling
|
|
47
47
|
|
|
48
|
-
Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports
|
|
48
|
+
Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports four themes (2 light, 2 dark).
|
|
49
49
|
|
|
50
50
|
- **white.css**: Default Carbon theme (light)
|
|
51
51
|
- **g10.css**: Gray 10 theme (light)
|
|
52
|
-
- **g80.css**: Gray 80 theme (dark)
|
|
53
52
|
- **g90.css**: Gray 90 theme (dark)
|
|
54
53
|
- **g100.css**: Gray 100 theme (dark)
|
|
55
54
|
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
|
|
@@ -60,7 +59,6 @@ The compiled CSS is generated from the following `.scss` files:
|
|
|
60
59
|
|
|
61
60
|
- [css/white.scss](css/white.scss)
|
|
62
61
|
- [css/g10.scss](css/g10.scss)
|
|
63
|
-
- [css/g80.scss](css/g80.scss)
|
|
64
62
|
- [css/g90.scss](css/g90.scss)
|
|
65
63
|
- [css/g100.scss](css/g100.scss)
|
|
66
64
|
- [css/all.scss](css/all.scss)
|
|
@@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
|
|
|
74
72
|
// Gray 10 theme
|
|
75
73
|
import "carbon-components-svelte/css/g10.css";
|
|
76
74
|
|
|
77
|
-
// Gray 80 theme
|
|
78
|
-
import "carbon-components-svelte/css/g80.css";
|
|
79
|
-
|
|
80
75
|
// Gray 90 theme
|
|
81
76
|
import "carbon-components-svelte/css/g90.css";
|
|
82
77
|
|
|
@@ -147,7 +142,7 @@ Programmatically switch between each of the five Carbon themes by setting the "t
|
|
|
147
142
|
|
|
148
143
|
```html
|
|
149
144
|
<script>
|
|
150
|
-
let theme = "white"; // "white" | "g10" | "
|
|
145
|
+
let theme = "white"; // "white" | "g10" | "g90" | "g100"
|
|
151
146
|
|
|
152
147
|
$: document.documentElement.setAttribute("theme", theme);
|
|
153
148
|
</script>
|