graham.systems
+2
-2
packages/wc/components/slide.ts
+2
-2
packages/wc/components/slide.ts
···
1
1
import { css, html } from "lit";
2
2
import { customElement } from "lit/decorators.js";
3
3
import { consume } from "@lit/context";
4
-
import { token } from "@morkdeck/theme/css";
4
+
import { color } from "@morkdeck/theme/css";
5
5
import { observerContext } from "../context.ts";
6
6
import { MorkdeckElement } from "../element.ts";
7
7
···
32
32
align-items: center;
33
33
34
34
padding: 6cqmin;
35
-
background: ${token("color.surface")};
35
+
background: ${color("surface")};
36
36
}
37
37
`;
38
38
+5
-5
packages/wc/components/toolbar.ts
+5
-5
packages/wc/components/toolbar.ts
···
1
1
import { css, html } from "lit";
2
2
import { customElement } from "lit/decorators.js";
3
-
import { token } from "@morkdeck/theme/css";
3
+
import { color } from "@morkdeck/theme/css";
4
4
import { MorkdeckElement, subscribe } from "../element.ts";
5
5
6
6
@customElement("morkdeck-toolbar")
···
38
38
grid-row-start: 2;
39
39
align-items: center;
40
40
justify-content: space-between;
41
-
background-color: ${token("color.overlay")};
42
-
border-top: 1px solid ${token("color.highlight.med")};
41
+
background-color: ${color("overlay")};
42
+
border-top: 1px solid ${color("highlight.med")};
43
43
transition: transform var(--presentation-spring);
44
44
}
45
45
46
46
.toolset {
47
47
border-left: 1px solid;
48
48
border-right: 1px solid;
49
-
border-color: ${token("color.highlight.med")};
49
+
border-color: ${color("highlight.med")};
50
50
display: grid;
51
51
grid-auto-columns: auto;
52
52
grid-auto-flow: column;
···
56
56
57
57
.toolset > * + * {
58
58
border-left: 1px solid;
59
-
border-color: ${token("color.highlight.med")};
59
+
border-color: ${color("highlight.med")};
60
60
}
61
61
62
62
.tool {