Skip to content

feat(checkbox): add component tokens #10221

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
merged 9 commits into from
Sep 13, 2024
Merged

feat(checkbox): add component tokens #10221

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7d9d84f
feat(checkbox): add component tokens
aPreciado88 Sep 5, 2024
b8eefa1
feat(checkbox): add component tokens
aPreciado88 Sep 5, 2024
5907007
feat(checkbox): add custom theme tokens
aPreciado88 Sep 5, 2024
ba442c6
feat(checkbox): add component tokens
aPreciado88 Sep 6, 2024
01ddeee
feat(checkbox): add component tokens
aPreciado88 Sep 10, 2024
bbbfebc
feat(checkbox): add component tokens
aPreciado88 Sep 10, 2024
e42b8ab
feat(checkbox): add component tokens
aPreciado88 Sep 11, 2024
70d8589
feat(checkbox): add component tokens
aPreciado88 Sep 13, 2024
6e129f5
feat(checkbox): add component tokens
aPreciado88 Sep 13, 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
100 changes: 100 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,93 +9,193 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
import { RequestedItem } from "./components/accordion/interfaces";
import { IconNameOrString } from "./components/icon/interfaces";
import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
import { ActionMessages } from "./components/action/assets/action/t9n";
import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
import { Columns } from "./components/action-group/interfaces";
import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
import { NumberingSystem } from "./utils/locale";
import { AlertMessages } from "./components/alert/assets/alert/t9n";
import { HeadingLevel } from "./components/functional/Heading";
import { BlockMessages } from "./components/block/assets/block/t9n";
import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
import { ButtonMessages } from "./components/button/assets/button/t9n";
import { CardMessages } from "./components/card/assets/card/t9n";
import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
import { MutableValidityState } from "./utils/form";
import { ChipMessages } from "./components/chip/assets/chip/t9n";
import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
import { Format } from "./components/color-picker/utils";
import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
import { DateLocaleData } from "./components/date-picker/utils";
import { HoverRange } from "./utils/date";
import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
import { OverlayPositioning as OverlayPositioning1 } from "./components";
import { DialogPlacement } from "./components/dialog/interfaces";
import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
import { FilterMessages } from "./components/filter/assets/filter/t9n";
import { FlowItemLikeElement } from "./components/flow/interfaces";
import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
import { ColorStop, DataSeries } from "./components/graph/interfaces";
import { HandleMessages } from "./components/handle/assets/handle/t9n";
import { HandleChange, HandleNudge } from "./components/handle/interfaces";
import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
import { InputPlacement } from "./components/input/interfaces";
import { InputMessages } from "./components/input/assets/input/t9n";
import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
import { ListDragDetail } from "./components/list/interfaces";
import { ItemData } from "./components/list-item/interfaces";
import { ListMessages } from "./components/list/assets/list/t9n";
import { SelectionAppearance } from "./components/list/resources";
import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
import { MenuMessages } from "./components/menu/assets/menu/t9n";
import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
import { ModalMessages } from "./components/modal/assets/modal/t9n";
import { NoticeMessages } from "./components/notice/assets/notice/t9n";
import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
import { PanelMessages } from "./components/panel/assets/panel/t9n";
import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
import { ICON_TYPES } from "./components/pick-list/resources";
import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
import { PopoverMessages } from "./components/popover/assets/popover/t9n";
import { RatingMessages } from "./components/rating/assets/rating/t9n";
import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
import { DisplayMode } from "./components/sheet/interfaces";
import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
import { DragDetail } from "./utils/sortableComponent";
import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
import { Element } from "@stencil/core";
import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
import { TableMessages } from "./components/table/assets/table/t9n";
import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
import { TileSelectType } from "./components/tile-select/interfaces";
import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
import { TipMessages } from "./components/tip/assets/tip/t9n";
import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
import { ListItemAndHandle } from "./components/value-list-item/interfaces";
export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
export { RequestedItem } from "./components/accordion/interfaces";
export { IconNameOrString } from "./components/icon/interfaces";
export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
export { ActionMessages } from "./components/action/assets/action/t9n";
export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
export { Columns } from "./components/action-group/interfaces";
export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
export { NumberingSystem } from "./utils/locale";
export { AlertMessages } from "./components/alert/assets/alert/t9n";
export { HeadingLevel } from "./components/functional/Heading";
export { BlockMessages } from "./components/block/assets/block/t9n";
export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
export { ButtonMessages } from "./components/button/assets/button/t9n";
export { CardMessages } from "./components/card/assets/card/t9n";
export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
export { MutableValidityState } from "./utils/form";
export { ChipMessages } from "./components/chip/assets/chip/t9n";
export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
export { Format } from "./components/color-picker/utils";
export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
export { DateLocaleData } from "./components/date-picker/utils";
export { HoverRange } from "./utils/date";
export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
export { OverlayPositioning as OverlayPositioning1 } from "./components";
export { DialogPlacement } from "./components/dialog/interfaces";
export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
export { FilterMessages } from "./components/filter/assets/filter/t9n";
export { FlowItemLikeElement } from "./components/flow/interfaces";
export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
export { ColorStop, DataSeries } from "./components/graph/interfaces";
export { HandleMessages } from "./components/handle/assets/handle/t9n";
export { HandleChange, HandleNudge } from "./components/handle/interfaces";
export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
export { InputPlacement } from "./components/input/interfaces";
export { InputMessages } from "./components/input/assets/input/t9n";
export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
export { ListDragDetail } from "./components/list/interfaces";
export { ItemData } from "./components/list-item/interfaces";
export { ListMessages } from "./components/list/assets/list/t9n";
export { SelectionAppearance } from "./components/list/resources";
export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
export { MenuMessages } from "./components/menu/assets/menu/t9n";
export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
export { ModalMessages } from "./components/modal/assets/modal/t9n";
export { NoticeMessages } from "./components/notice/assets/notice/t9n";
export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
export { PanelMessages } from "./components/panel/assets/panel/t9n";
export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
export { ICON_TYPES } from "./components/pick-list/resources";
export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
export { PopoverMessages } from "./components/popover/assets/popover/t9n";
export { RatingMessages } from "./components/rating/assets/rating/t9n";
export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
export { DisplayMode } from "./components/sheet/interfaces";
export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
export { DragDetail } from "./utils/sortableComponent";
export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
export { Element } from "@stencil/core";
export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
export { TableMessages } from "./components/table/assets/table/t9n";
export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
export { TileSelectType } from "./components/tile-select/interfaces";
export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
export { TipMessages } from "./components/tip/assets/tip/t9n";
export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
export { ListItemAndHandle } from "./components/value-list-item/interfaces";
export namespace Components {
interface CalciteAccordion {
Expand Down
21 changes: 21 additions & 0 deletions packages/calcite-components/src/components/checkbox/checkbox.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@ import {
HYDRATED_ATTR,
labelable,
hidden,
themed,
} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { Scale } from "../interfaces";
import { Direction } from "../../utils/dom";
import { CSS } from "./resources";

describe("calcite-checkbox", () => {
describe("honors hidden attribute", () => {
Expand Down Expand Up @@ -219,4 +221,23 @@ describe("calcite-checkbox", () => {
});
});
});

describe("theme", () => {
themed(html` <calcite-checkbox name="s-unchecked" scale="s"></calcite-checkbox> `, {
"--calcite-checkbox-size": [
{
shadowSelector: `.${CSS.check}`,
targetProp: "inlineSize",
},
{
shadowSelector: `.${CSS.check}`,
targetProp: "blockSize",
},
],
"--calcite-checkbox-color": {
shadowSelector: `.${CSS.check}`,
targetProp: "color",
},
});
});
});
33 changes: 21 additions & 12 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 @@ -4,16 +4,31 @@
* 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-box-shadow: Specifies the component's color.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Upldate this to --calcite-checkbox-box-shadow-color

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought we were using shadow, not box-shadow here? https://github.com/Esri/calcite-design-system/wiki/component-tokens#3-review-component-for-tokenizable-styles

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, I totally missed this. The preferred naming for the CSS properties is parenthesized in the linked doc above, right? E.g., * border-radius (corner-radius)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I renamed this one to --calcite-checkbox-shadow-color, as suggested in the doc above.

Copy link
Contributor

@macandcheese macandcheese Sep 10, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realize it's basically being used as a border - but that begs the question.. Shouldn't this be a separate --calcite-checkbox-border-color (obfuscating the implementation detail of it using box-shadow from the user) - and then a separate calcite-checkbox-shadow css prop that defaults to shadow-none to allow for theming?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@macandcheese Right again. I thought these new props were used for a drop shadow, but I overlooked how they were being applied.

@aPreciado88 The shadow props will need to be updated. The themed helper handles this and another case here. You can use this as a reference to confirm if we’re dealing with a border prop or not. LMK if you have any questions.

Sorry for the hassle, y'all!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the tokens to --calcite-checkbox-border-color and --calcite-checkbox-border-color-hover.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I'm sorry. I agree with @macandcheese and @jcfranco

* @prop --calcite-checkbox-box-shadow-hover: Specifies the component's color when hovered.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--calcite-checkbox-box-shadow-color-hover

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just sanity check here on our patterns as it has changed a few times - this is preferable to calcite-checkbox:hover { --calcite-checkbox-shadow: "whatever" }, correct?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I renamed this one to --calcite-checkbox-shadow-color-hover

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just sanity check here on our patterns as it has changed a few times - this is preferable to calcite-checkbox:hover { --calcite-checkbox-shadow: "whatever" }, correct?

I believe so, but I'll let @alisonailea confirm. This approach is more consistent and intuitive than the previous one. It's also not mentioned as an example in the latest Component Tokens wiki.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed.

* @prop --calcite-checkbox-color: Specifies the component's font color.
Copy link
Member

@jcfranco jcfranco Sep 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we revisit this description? It is used to set the color prop, but from a user's perspective, it's setting the check's color.

@alisonailea Do we need to specify icon in the name or is this an exception because the component is mostly an icon? If it's the latter, we could add a note and/or example to the Component Token doc.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could use -checkbox-icon-color but I think -checkbox-color makes sense here but I'm open to either

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll leave it as -checkbox-color.

Copy link
Member

@jcfranco jcfranco Sep 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s use --calcite-checkbox-icon-color for consistency. Since we already differentiate the border color, I think sticking with the icon color makes sense.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the token to --calcite-checkbox-icon-color 🚀

*/

:host([scale="s"]) {
--calcite-checkbox-size: theme("spacing.3");
.check-svg,
.toggle {
inline-size: var(--calcite-checkbox-size, theme("spacing.3"));
block-size: var(--calcite-checkbox-size, theme("spacing.3"));
}
}
:host([scale="m"]) {
--calcite-checkbox-size: theme("fontSize.n1");
.check-svg,
.toggle {
inline-size: var(--calcite-checkbox-size, theme("fontSize.n1"));
block-size: var(--calcite-checkbox-size, theme("fontSize.n1"));
}
}
:host([scale="l"]) {
--calcite-checkbox-size: theme("spacing.4");
.check-svg,
.toggle {
inline-size: var(--calcite-checkbox-size, theme("spacing.4"));
block-size: var(--calcite-checkbox-size, theme("spacing.4"));
}
}

:host {
Expand All @@ -23,12 +38,6 @@
select-none;
-webkit-tap-highlight-color: transparent;

.check-svg,
.toggle {
inline-size: var(--calcite-checkbox-size);
block-size: var(--calcite-checkbox-size);
}

.check-svg {
@apply bg-foreground-1
pointer-events-none
Expand All @@ -39,8 +48,8 @@
stroke-current
stroke-1
transition-default;
box-shadow: inset 0 0 0 1px var(--calcite-color-border-input);
color: theme("backgroundColor.background");
box-shadow: inset 0 0 0 1px var(--calcite-checkbox-box-shadow, var(--calcite-color-border-input));
color: var(--calcite-checkbox-color, theme("backgroundColor.background"));
}
}

Expand All @@ -63,7 +72,7 @@
:host([hovered]) .toggle,
:host .toggle:hover {
.check-svg {
box-shadow: inset 0 0 0 2px var(--calcite-color-brand);
box-shadow: inset 0 0 0 2px var(--calcite-checkbox-box-shadow-hover, var(--calcite-color-brand));
}
}

Expand Down
4 changes: 3 additions & 1 deletion packages/calcite-components/src/custom-theme.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import { accordion } from "./custom-theme/accordion";
import { buttons } from "./custom-theme/button";
import { card, cardThumbnail, cardTokens } from "./custom-theme/card";
import { checkbox } from "./custom-theme/checkbox";
import { checkbox, checkboxTokens } from "./custom-theme/checkbox";
import { chips } from "./custom-theme/chips";
import { datePicker } from "./custom-theme/date-picker";
import { dropdown } from "./custom-theme/dropdown";
Expand Down Expand Up @@ -119,6 +119,7 @@ export default {
...actionPadTokens,
...actionGroupTokens,
...cardTokens,
...checkboxTokens,
},
};

Expand All @@ -135,6 +136,7 @@ export const theming_TestOnly = (): string => {
...actionPadTokens,
...actionGroupTokens,
...cardTokens,
...checkboxTokens,
},
true,
);
Expand Down
5 changes: 5 additions & 0 deletions packages/calcite-components/src/custom-theme/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import { html } from "../../support/formatting";

export const checkboxTokens = {
calciteCheckboxSize: "",
calciteCheckboxColor: "",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add calciteCheckboxBorderColor

};

export const checkbox = html`<label>
<calcite-checkbox indeterminate></calcite-checkbox>
Initially indeterminate and unchecked
Expand Down
Loading