/
main.scss
63 lines (53 loc) · 2.44 KB
/
main.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// To learn more about theming carbon-components-svelte see:
// https://github.com/carbon-design-system/carbon-components-svelte#styling
// https://github.com/carbon-design-system/carbon-components-svelte/issues/713
// Note: The carbon-components-svelte library currently uses Carbon v10 styles
// As the library is updated to use Carbon v11 styling, it might become
// easier to theme. For more see issue:
// https://github.com/carbon-design-system/carbon-components-svelte/issues/1629
$feature-flags: (
ui-shell: true,
grid-columns-16: true,
enable-css-custom-properties: 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 "sass:map";
@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 "./popover";
// Use full path to popover file
@import "carbon-components-svelte/css/popover";
// The Carbon Design System comes with five themes (2 light, 3 dark). You can use any of
// these themes as the fallback theme for your project.
// This example uses the light grey (g10) theme as the fallback theme.
// The tokens from the Carbon g10 theme are overriden by tokens specified in your custom theme
// e.g. $carbon--theme--caladapt scss map in the caladapt-rokens file
@import "./themes/caladapt/carbon-tokens";
$carbon--theme: map.merge($carbon--theme--g10, $carbon--theme--caladapt);
@include carbon--theme();
@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 styles for all Carbon components
@import "carbon-components/scss/globals/scss/styles";
// Generate CSS variables
:root {
@include carbon--theme($carbon--theme, true) {
@include emit-component-tokens($tag-colors);
@include emit-component-tokens($notification-colors);
}
}
// Import your custom theme styles e.g. alternate font families, typography
// These files need to be imported after all the Carbon scss imports
@import "./themes/caladapt";