mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(theme): add g80 theme

Browse source
This commit is contained in:
Eric Y Liu 2021-05-02 14:14:49 -07:00
commit a79d753618
10 changed files with 69 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

9
docs/src/App.svelte
View file

@ -48,6 +48,15 @@
}
}
// 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"] {

2
docs/src/components/Theme.svelte
View file

@ -1,7 +1,7 @@
<script>
export let persist = false;
export let persistKey = "carbon-theme";
export const themes = ["white", "g10", "g90", "g100"];
export const themes = ["white", "g10", "g80", "g90", "g100"];
import { onMount, afterUpdate } from "svelte";
import { theme } from "../store";

1
docs/src/layouts/ComponentLayout.svelte
View file

@ -62,6 +62,7 @@
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>

13
docs/src/pages/components/Select.svx
View file

@ -12,15 +12,17 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
### Helper text
<Select helperText="Carbon offers 4 themes (2 light, 2 dark)" labelText="Carbon theme" selected="g10" >
<Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -30,6 +32,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select hideLabel labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -43,6 +46,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<SelectItem value="g10" text="Gray 10" />
</SelectItemGroup>
<SelectItemGroup label="Dark theme">
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</SelectItemGroup>
@ -53,6 +57,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select light labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -62,6 +67,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select inline labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -71,6 +77,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="xl" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -80,6 +87,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select size="sm" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -89,6 +97,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select invalid invalidText="Theme must be a dark variant" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -98,6 +107,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select warn warnText="The selected theme will not be persisted" labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
@ -107,6 +117,7 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
<Select disabled labelText="Carbon theme" selected="g10" >
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g80" text="Gray 80" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>