Skip to content

Commit a7bcdff

Browse files
ditmanditman
committed
Modify the Lit Button component to use the new theme.
1 parent 29499aa commit a7bcdff

File tree

4 files changed

+153
-4
lines changed

4 files changed

+153
-4
lines changed

‎renderers/lit/src/v0_9/catalogs/basic/components/Button.ts‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,87 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { html, nothing } from "lit";
17+
import { html, nothing, css } from "lit";
1818
import { customElement } from "lit/decorators.js";
1919
import { classMap } from "lit/directives/class-map.js";
2020
import { ButtonApi } from "@a2ui/web_core/v0_9/basic_catalog";
2121
import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";
22+
import { injectDefaultA2uiTheme } from "@a2ui/web_core/v0_9";
2223

24+
/**
25+
* A button component that can be used to trigger an action.
26+
*/
2327
@customElement("a2ui-basic-button")
2428
export class A2uiBasicButtonElement extends A2uiLitElement<typeof ButtonApi> {
29+
/**
30+
* The styles of the button can be customized by redefining the following
31+
* CSS variables:
32+
*
33+
* - Primary variant:
34+
* - `--a2ui-color-primary`: The color for the primary variant.
35+
* - `--a2ui-color-on-primary`: The color of the text on the primary variant.
36+
* - Standard/default variant:
37+
* - `--a2ui-color-secondary`: The color for the default variant.
38+
* - `--a2ui-color-on-secondary`: The color of the text on the default variant.
39+
* - `--a2ui-button-border`: The styling for the button border. Defaults to `--a2ui-border-width` width and `--a2ui-color-border` color.
40+
* - `--a2ui-button-border-radius`: The border radius of the button. Defaults to `--a2ui-border-radius`.
41+
* - `--a2ui-button-padding`: The padding of the button. Defaults to `--a2ui-spacing-m`.
42+
*/
43+
static styles = css`
44+
:where(:host) {
45+
--_color-primary: var(--a2ui-color-primary, #17e);
46+
--_button-border-radius: var(
47+
--a2ui-button-border-radius,
48+
var(--a2ui-spacing-s, 0.25rem)
49+
);
50+
--_button-padding: var(
51+
--a2ui-button-padding,
52+
var(--a2ui-spacing-m, 0.5rem) var(--a2ui-spacing-l, 1rem)
53+
);
54+
--_button-border: var(
55+
--a2ui-button-border,
56+
var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)
57+
);
58+
}
59+
.a2ui-button {
60+
--_a2ui-text-margin: 0;
61+
padding: var(--_button-padding);
62+
background-color: var(--a2ui-color-secondary, #ddd);
63+
color: var(--a2ui-color-on-secondary, #333);
64+
border: var(--_button-border);
65+
border-radius: var(--_button-border-radius);
66+
cursor: pointer;
67+
display: inline-flex;
68+
align-items: center;
69+
justify-content: center;
70+
}
71+
.a2ui-button.a2ui-button-primary {
72+
border-color: var(--_color-primary);
73+
background-color: var(--_color-primary);
74+
color: var(--a2ui-color-on-primary, #fff);
75+
}
76+
.a2ui-button:hover {
77+
background-color: var(--a2ui-color-secondary-hover, #ddd);
78+
}
79+
.a2ui-button.a2ui-button-primary:hover {
80+
background-color: var(--a2ui-color-primary-hover, #fbd);
81+
}
82+
.a2ui-button.a2ui-button-borderless {
83+
background: none;
84+
padding: 0;
85+
color: var(--_color-primary);
86+
}
87+
`;
88+
2589
protected createController() {
2690
return new A2uiController(this, ButtonApi);
2791
}
2892

93+
connectedCallback() {
94+
super.connectedCallback();
95+
injectDefaultA2uiTheme();
96+
}
97+
2998
render() {
3099
const props = this.controller.props;
31100
if (!props) return nothing;

‎renderers/lit/src/v0_9/catalogs/basic/components/Text.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { html, nothing } from "lit";
17+
import { html, nothing, css } from "lit";
1818
import { customElement } from "lit/decorators.js";
1919
import { consume } from "@lit/context";
2020
import { TextApi } from "@a2ui/web_core/v0_9/basic_catalog";
@@ -25,6 +25,11 @@ import { markdown } from "../../../directives/directives.js";
2525

2626
@customElement("a2ui-basic-text")
2727
export class A2uiBasicTextElement extends A2uiLitElement<typeof TextApi> {
28+
static styles = css`
29+
p, h1, h2, h3, h4, h5, h6 {
30+
margin: var(--_a2ui-text-margin, revert);
31+
}
32+
`;
2833

2934
// Retrieve a MarkdownRenderer provided by the application.
3035
@consume({ context: Context.markdown, subscribe: true })

‎renderers/lit/src/v0_9/catalogs/minimal/components/Button.ts‎

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,87 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { html, nothing } from "lit";
17+
import { html, nothing, css } from "lit";
1818
import { customElement } from "lit/decorators.js";
1919
import { classMap } from "lit/directives/class-map.js";
2020
import { ButtonApi } from "@a2ui/web_core/v0_9/basic_catalog";
2121
import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";
22+
import { injectDefaultA2uiTheme } from "@a2ui/web_core/v0_9";
2223

24+
/**
25+
* A button component that can be used to trigger an action.
26+
*/
2327
@customElement("a2ui-button")
2428
export class A2uiButtonElement extends A2uiLitElement<typeof ButtonApi> {
29+
/**
30+
* The styles of the button can be customized by redefining the following
31+
* CSS variables:
32+
*
33+
* - Primary variant:
34+
* - `--a2ui-color-primary`: The color for the primary variant.
35+
* - `--a2ui-color-on-primary`: The color of the text on the primary variant.
36+
* - Standard/default variant:
37+
* - `--a2ui-color-secondary`: The color for the default variant.
38+
* - `--a2ui-color-on-secondary`: The color of the text on the default variant.
39+
* - `--a2ui-button-border`: The styling for the button border. Defaults to `--a2ui-border-width` width and `--a2ui-color-border` color.
40+
* - `--a2ui-button-border-radius`: The border radius of the button. Defaults to `--a2ui-border-radius`.
41+
* - `--a2ui-button-padding`: The padding of the button. Defaults to `--a2ui-spacing-m`.
42+
*/
43+
static styles = css`
44+
:where(:host) {
45+
--_color-primary: var(--a2ui-color-primary, #17e);
46+
--_button-border-radius: var(
47+
--a2ui-button-border-radius,
48+
var(--a2ui-spacing-s, 0.25rem)
49+
);
50+
--_button-padding: var(
51+
--a2ui-button-padding,
52+
var(--a2ui-spacing-m, 0.5rem) var(--a2ui-spacing-l, 1rem)
53+
);
54+
--_button-border: var(
55+
--a2ui-button-border,
56+
var(--a2ui-border-width, 1px) solid var(--a2ui-color-border, #ccc)
57+
);
58+
}
59+
.a2ui-button {
60+
--_a2ui-text-margin: 0;
61+
padding: var(--_button-padding);
62+
background-color: var(--a2ui-color-secondary, #ddd);
63+
color: var(--a2ui-color-on-secondary, #333);
64+
border: var(--_button-border);
65+
border-radius: var(--_button-border-radius);
66+
cursor: pointer;
67+
display: inline-flex;
68+
align-items: center;
69+
justify-content: center;
70+
}
71+
.a2ui-button.a2ui-button-primary {
72+
border-color: var(--_color-primary);
73+
background-color: var(--_color-primary);
74+
color: var(--a2ui-color-on-primary, #fff);
75+
}
76+
.a2ui-button:hover {
77+
background-color: var(--a2ui-color-secondary-hover, #ddd);
78+
}
79+
.a2ui-button.a2ui-button-primary:hover {
80+
background-color: var(--a2ui-color-primary-hover, #fbd);
81+
}
82+
.a2ui-button.a2ui-button-borderless {
83+
background: none;
84+
padding: 0;
85+
color: var(--_color-primary);
86+
}
87+
`;
88+
2589
protected createController() {
2690
return new A2uiController(this, ButtonApi);
2791
}
2892

93+
connectedCallback() {
94+
super.connectedCallback();
95+
injectDefaultA2uiTheme();
96+
}
97+
2998
render() {
3099
const props = this.controller.props;
31100
if (!props) return nothing;

‎renderers/lit/src/v0_9/catalogs/minimal/components/Text.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,19 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { html, nothing } from "lit";
17+
import { html, nothing, css } from "lit";
1818
import { customElement } from "lit/decorators.js";
1919
import { TextApi } from "@a2ui/web_core/v0_9/basic_catalog";
2020
import { A2uiLitElement, A2uiController } from "@a2ui/lit/v0_9";
2121

2222
@customElement("a2ui-text")
2323
export class A2uiTextElement extends A2uiLitElement<typeof TextApi> {
24+
static styles = css`
25+
p, h1, h2, h3, h4, h5, h6 {
26+
margin: var(--_a2ui-text-margin, revert);
27+
}
28+
`;
29+
2430
protected createController() {
2531
return new A2uiController(this, TextApi);
2632
}

0 commit comments

Comments
 (0)