Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(checkbox): add component tokens #8710

Merged
merged 3 commits into from
Feb 22, 2024
Merged

feat(checkbox): add component tokens #8710

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7236877
feat(checkbox): add component totkens
alisonailea Feb 8, 2024
fefcb7f
Merge branch 'epic/7180-component-tokens' of github.com:Esri/calcite-…
alisonailea Feb 22, 2024
9f2e77c
fix(checkbox): shadow component token
alisonailea Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions packages/calcite-components/src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,18 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-checkbox-size: Specifies the component's height and width.
* @prop --calcite-checkbox-size: defines the checkbox's size vertically and horizontally.
* @prop --calcite-checkbox-background-color: defines the background color of the checkbox.
* @prop --calcite-checkbox-box-shadow: defines the box shadow of the checkbox.
* @prop --calcite-checkbox-icon-color: defines the icon color of the checkbox.
*/

:host {
--calcite-checkbox-background-color: var(--calcite-color-foreground-1);
--calcite-checkbox-box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
alisonailea marked this conversation as resolved.
Show resolved Hide resolved
--calcite-checkbox-icon-color: var(--calcite-color-background);
}

:host([scale="s"]) {
--calcite-checkbox-size: theme("spacing.3");
}
Expand All @@ -30,41 +39,36 @@
}

.check-svg {
@apply bg-foreground-1
pointer-events-none
@apply pointer-events-none
box-border
block
overflow-hidden
fill-current
stroke-current
stroke-1
transition-default;
box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
color: theme("backgroundColor.background");
background-color: var(--calcite-checkbox-background-color);
box-shadow: var(--calcite-checkbox-box-shadow);
color: var(--calcite-checkbox-icon-color);
}
}

:host([status="invalid"]:not([checked])) {
.check-svg {
box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);
}
--calcite-checkbox-box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger);

.toggle:focus {
@apply focus-outset-danger;
}
}

:host([checked]),
:host([indeterminate]) {
.check-svg {
@apply bg-brand;
box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
}
--calcite-checkbox-box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
--calcite-checkbox-background-color: var(--calcite-color-brand);
}
:host([hovered]) .toggle,
:host .toggle:hover {
.check-svg {
box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
}
--calcite-checkbox-box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
}

.toggle {
Expand Down
3 changes: 1 addition & 2 deletions packages/calcite-components/src/components/checkbox/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ export class Checkbox
*
* When not set, the component will be associated with its ancestor form element, if any.
*/
@Prop({ reflect: true })
form: string;
@Prop({ reflect: true }) form: string;

/** The `id` attribute of the component. When omitted, a globally unique identifier is used. */
@Prop({ reflect: true, mutable: true }) guid: string;
Expand Down
Loading