Skip to content

feat(checkbox): add component tokens #8710

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

Merged
alisonailea merged 3 commits into from
Feb 22, 2024
+20 −17
Merged

feat(checkbox): add component tokens #8710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7236877
feat(checkbox): add component totkens
Feb 8, 2024
fefcb7f
Merge branch 'epic/7180-component-tokens' of github.com:Esri/calcite-…
Feb 22, 2024
9f2e77c
fix(checkbox): shadow component token
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-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-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
--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-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-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-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-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