@workday/canvas-kit-react 16.0.13 → 16.1.0-0564-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/common/lib/CanvasProvider.tsx +3 -24
- package/common/lib/theming/brandScope.ts +0 -5
- package/common/lib/theming/sanaTheme.ts +65 -95
- package/common/lib/theming/types.ts +4 -21
- package/dist/commonjs/action-bar/lib/ActionBarList.js +1 -1
- package/dist/commonjs/action-bar/lib/ActionBarOverflowButton.js +1 -1
- package/dist/commonjs/avatar/lib/Avatar.js +13 -13
- package/dist/commonjs/avatar/lib/AvatarImage.js +1 -1
- package/dist/commonjs/avatar/lib/AvatarName.js +1 -1
- package/dist/commonjs/avatar/lib/BaseAvatar.js +14 -14
- package/dist/commonjs/badge/lib/CountBadge.js +6 -6
- package/dist/commonjs/banner/lib/Banner.js +5 -5
- package/dist/commonjs/banner/lib/BannerActionText.js +2 -2
- package/dist/commonjs/banner/lib/BannerIcon.js +1 -1
- package/dist/commonjs/banner/lib/BannerLabel.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsList.js +1 -1
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsMenu.js +2 -2
- package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
- package/dist/commonjs/button/lib/BaseButton.js +21 -21
- package/dist/commonjs/button/lib/DeleteButton.js +2 -2
- package/dist/commonjs/button/lib/ExternalHyperlink.js +1 -1
- package/dist/commonjs/button/lib/Hyperlink.js +5 -5
- package/dist/commonjs/button/lib/PrimaryButton.js +2 -2
- package/dist/commonjs/button/lib/SecondaryButton.js +2 -2
- package/dist/commonjs/button/lib/TertiaryButton.js +14 -14
- package/dist/commonjs/button/lib/ToolbarDropdownButton.js +3 -3
- package/dist/commonjs/button/lib/ToolbarIconButton.js +1 -1
- package/dist/commonjs/button/lib/parts/ButtonLabel.js +1 -1
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +5 -5
- package/dist/commonjs/card/lib/Card.js +3 -3
- package/dist/commonjs/card/lib/CardBody.js +1 -1
- package/dist/commonjs/card/lib/CardHeading.js +1 -1
- package/dist/commonjs/checkbox/lib/CheckBackground.js +6 -6
- package/dist/commonjs/checkbox/lib/CheckboxCheck.js +6 -6
- package/dist/commonjs/checkbox/lib/CheckboxContainer.js +2 -2
- package/dist/commonjs/checkbox/lib/CheckboxInput.js +5 -5
- package/dist/commonjs/checkbox/lib/CheckboxRipple.js +1 -1
- package/dist/commonjs/collection/lib/ListBox.js +3 -3
- package/dist/commonjs/color-picker/lib/ColorInput.js +3 -3
- package/dist/commonjs/color-picker/lib/ColorPreview.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/ColorSwatch.js +2 -2
- package/dist/commonjs/combobox/lib/ComboboxMenuList.js +1 -1
- package/dist/commonjs/common/lib/AccessibleHide.js +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.d.ts +0 -11
- package/dist/commonjs/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/commonjs/common/lib/CanvasProvider.js +5 -20
- package/dist/commonjs/common/lib/EllipsisText.js +1 -1
- package/dist/commonjs/common/lib/styles/cornerShape.js +1 -1
- package/dist/commonjs/common/lib/theming/brandScope.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/brandScope.js +0 -5
- package/dist/commonjs/common/lib/theming/sanaTheme.d.ts +2 -35
- package/dist/commonjs/common/lib/theming/sanaTheme.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/sanaTheme.js +64 -95
- package/dist/commonjs/common/lib/theming/types.d.ts +4 -4
- package/dist/commonjs/common/lib/theming/types.d.ts.map +1 -1
- package/dist/commonjs/expandable/lib/Expandable.js +1 -1
- package/dist/commonjs/expandable/lib/ExpandableAvatar.js +1 -1
- package/dist/commonjs/expandable/lib/ExpandableContent.js +1 -1
- package/dist/commonjs/expandable/lib/ExpandableIcon.js +10 -10
- package/dist/commonjs/expandable/lib/ExpandableTarget.js +1 -1
- package/dist/commonjs/expandable/lib/ExpandableTitle.js +1 -1
- package/dist/commonjs/form-field/lib/FormFieldField.js +1 -1
- package/dist/commonjs/form-field/lib/FormFieldGroupLabel.js +5 -5
- package/dist/commonjs/form-field/lib/FormFieldGroupList.js +3 -3
- package/dist/commonjs/form-field/lib/FormFieldHint.js +3 -3
- package/dist/commonjs/form-field/lib/FormFieldLabel.js +6 -6
- package/dist/commonjs/form-field/lib/formFieldStencil.js +8 -8
- package/dist/commonjs/icon/lib/AccentIcon.js +2 -2
- package/dist/commonjs/icon/lib/AppletIcon.js +1 -1
- package/dist/commonjs/icon/lib/ExpressiveIcon.js +1 -1
- package/dist/commonjs/icon/lib/Graphic.js +4 -4
- package/dist/commonjs/icon/lib/Svg.js +3 -3
- package/dist/commonjs/icon/lib/SystemIcon.js +1 -1
- package/dist/commonjs/icon/lib/SystemIconCircle.js +2 -2
- package/dist/commonjs/information-highlight/lib/InformationHighlight.js +9 -9
- package/dist/commonjs/information-highlight/lib/parts/Body.js +3 -3
- package/dist/commonjs/information-highlight/lib/parts/Heading.js +3 -3
- package/dist/commonjs/information-highlight/lib/parts/Link.js +3 -3
- package/dist/commonjs/loading-dots/lib/LoadingDots.js +3 -3
- package/dist/commonjs/menu/lib/MenuCard.js +1 -1
- package/dist/commonjs/menu/lib/MenuDivider.js +1 -1
- package/dist/commonjs/menu/lib/MenuGroup.js +1 -1
- package/dist/commonjs/menu/lib/MenuItem.js +1 -1
- package/dist/commonjs/menu/lib/MenuList.js +3 -3
- package/dist/commonjs/modal/lib/ModalBody.js +1 -1
- package/dist/commonjs/modal/lib/ModalCard.js +1 -1
- package/dist/commonjs/modal/lib/ModalHeading.js +1 -1
- package/dist/commonjs/modal/lib/ModalOverflowOverlay.js +1 -1
- package/dist/commonjs/modal/lib/ModalOverlay.js +2 -2
- package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.js +2 -2
- package/dist/commonjs/pagination/lib/Pagination/Controls.js +2 -2
- package/dist/commonjs/pagination/lib/Pagination/GoTo/Form.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/Nav.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/PageButton.js +2 -2
- package/dist/commonjs/pagination/lib/Pagination/PageList.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/Pagination.js +1 -1
- package/dist/commonjs/pagination/lib/Pagination/common/List.js +2 -2
- package/dist/commonjs/pill/lib/Pill.js +3 -3
- package/dist/commonjs/pill/lib/PillAvatar.js +1 -1
- package/dist/commonjs/pill/lib/PillCount.js +1 -1
- package/dist/commonjs/pill/lib/PillIcon.js +1 -1
- package/dist/commonjs/pill/lib/PillIconButton.js +1 -1
- package/dist/commonjs/pill/lib/PillLabel.js +1 -1
- package/dist/commonjs/popup/lib/PopupBody.js +1 -1
- package/dist/commonjs/popup/lib/PopupButtonGroup.js +5 -5
- package/dist/commonjs/popup/lib/PopupCard.js +2 -2
- package/dist/commonjs/popup/lib/PopupCloseIcon.js +1 -1
- package/dist/commonjs/popup/lib/PopupHeading.js +1 -1
- package/dist/commonjs/popup/lib/hooks/useDisableBodyScroll.js +1 -1
- package/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/hooks/usePopupStack.js +0 -21
- package/dist/commonjs/segmented-control/lib/SegmentedControlItem.js +16 -16
- package/dist/commonjs/segmented-control/lib/SegmentedControlList.js +6 -6
- package/dist/commonjs/select/lib/SelectCard.js +1 -1
- package/dist/commonjs/select/lib/SelectInput.js +3 -3
- package/dist/commonjs/side-panel/lib/SidePanel.js +8 -8
- package/dist/commonjs/side-panel/lib/SidePanelHeading.js +3 -3
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +7 -7
- package/dist/commonjs/skeleton/lib/Skeleton.js +2 -2
- package/dist/commonjs/skeleton/lib/parts/SkeletonHeader.js +1 -1
- package/dist/commonjs/skeleton/lib/parts/SkeletonShape.js +2 -2
- package/dist/commonjs/skeleton/lib/parts/SkeletonText.js +2 -2
- package/dist/commonjs/switch/lib/Switch.js +7 -7
- package/dist/commonjs/table/lib/BaseTable.js +1 -1
- package/dist/commonjs/table/lib/Table.js +7 -7
- package/dist/commonjs/table/lib/parts/BaseTableBody.js +1 -1
- package/dist/commonjs/table/lib/parts/BaseTableCaption.js +1 -1
- package/dist/commonjs/table/lib/parts/BaseTableCell.js +1 -1
- package/dist/commonjs/table/lib/parts/BaseTableHead.js +1 -1
- package/dist/commonjs/table/lib/parts/BaseTableHeader.js +1 -1
- package/dist/commonjs/table/lib/parts/css-grid-table/TableRow.js +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +1 -1
- package/dist/commonjs/tabs/lib/TabsList.js +8 -8
- package/dist/commonjs/tabs/lib/TabsOverflowButton.js +1 -1
- package/dist/commonjs/testing/lib/ComponentStatesTable.js +1 -1
- package/dist/commonjs/text/lib/LabelText.js +6 -6
- package/dist/commonjs/text/lib/Text.js +16 -16
- package/dist/commonjs/text/lib/TypeLevelComponents.js +4 -4
- package/dist/commonjs/text-area/lib/TextArea.js +5 -5
- package/dist/commonjs/text-input/lib/InputGroup.js +7 -7
- package/dist/commonjs/text-input/lib/TextInput.js +5 -5
- package/dist/commonjs/toast/lib/Toast.js +1 -1
- package/dist/commonjs/toast/lib/ToastBody.js +1 -1
- package/dist/commonjs/toast/lib/ToastCloseIcon.js +1 -1
- package/dist/commonjs/toast/lib/ToastIcon.js +1 -1
- package/dist/commonjs/toast/lib/ToastMessage.js +1 -1
- package/dist/commonjs/tooltip/lib/TooltipContainer.js +4 -4
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/action-bar/lib/ActionBarList.js +1 -1
- package/dist/es6/action-bar/lib/ActionBarOverflowButton.js +1 -1
- package/dist/es6/avatar/lib/Avatar.js +13 -13
- package/dist/es6/avatar/lib/AvatarImage.js +1 -1
- package/dist/es6/avatar/lib/AvatarName.js +1 -1
- package/dist/es6/avatar/lib/BaseAvatar.js +14 -14
- package/dist/es6/badge/lib/CountBadge.js +6 -6
- package/dist/es6/banner/lib/Banner.js +5 -5
- package/dist/es6/banner/lib/BannerActionText.js +2 -2
- package/dist/es6/banner/lib/BannerIcon.js +1 -1
- package/dist/es6/banner/lib/BannerLabel.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsCurrentItem.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsItem.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsList.js +1 -1
- package/dist/es6/breadcrumbs/lib/BreadcrumbsMenu.js +2 -2
- package/dist/es6/breadcrumbs/lib/BreadcrumbsOverflowButton.js +1 -1
- package/dist/es6/button/lib/BaseButton.js +21 -21
- package/dist/es6/button/lib/DeleteButton.js +2 -2
- package/dist/es6/button/lib/ExternalHyperlink.js +1 -1
- package/dist/es6/button/lib/Hyperlink.js +5 -5
- package/dist/es6/button/lib/PrimaryButton.js +2 -2
- package/dist/es6/button/lib/SecondaryButton.js +2 -2
- package/dist/es6/button/lib/TertiaryButton.js +14 -14
- package/dist/es6/button/lib/ToolbarDropdownButton.js +3 -3
- package/dist/es6/button/lib/ToolbarIconButton.js +1 -1
- package/dist/es6/button/lib/parts/ButtonLabel.js +1 -1
- package/dist/es6/button/lib/parts/ButtonLabelIcon.js +5 -5
- package/dist/es6/card/lib/Card.js +3 -3
- package/dist/es6/card/lib/CardBody.js +1 -1
- package/dist/es6/card/lib/CardHeading.js +1 -1
- package/dist/es6/checkbox/lib/CheckBackground.js +6 -6
- package/dist/es6/checkbox/lib/CheckboxCheck.js +6 -6
- package/dist/es6/checkbox/lib/CheckboxContainer.js +2 -2
- package/dist/es6/checkbox/lib/CheckboxInput.js +5 -5
- package/dist/es6/checkbox/lib/CheckboxRipple.js +1 -1
- package/dist/es6/collection/lib/ListBox.js +3 -3
- package/dist/es6/color-picker/lib/ColorInput.js +3 -3
- package/dist/es6/color-picker/lib/ColorPreview.js +1 -1
- package/dist/es6/color-picker/lib/parts/ColorSwatch.js +2 -2
- package/dist/es6/combobox/lib/ComboboxMenuList.js +1 -1
- package/dist/es6/common/lib/AccessibleHide.js +1 -1
- package/dist/es6/common/lib/CanvasProvider.d.ts +0 -11
- package/dist/es6/common/lib/CanvasProvider.d.ts.map +1 -1
- package/dist/es6/common/lib/CanvasProvider.js +4 -19
- package/dist/es6/common/lib/EllipsisText.js +1 -1
- package/dist/es6/common/lib/styles/cornerShape.js +1 -1
- package/dist/es6/common/lib/theming/brandScope.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/brandScope.js +0 -5
- package/dist/es6/common/lib/theming/sanaTheme.d.ts +2 -35
- package/dist/es6/common/lib/theming/sanaTheme.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/sanaTheme.js +64 -95
- package/dist/es6/common/lib/theming/types.d.ts +4 -4
- package/dist/es6/common/lib/theming/types.d.ts.map +1 -1
- package/dist/es6/expandable/lib/Expandable.js +1 -1
- package/dist/es6/expandable/lib/ExpandableAvatar.js +1 -1
- package/dist/es6/expandable/lib/ExpandableContent.js +1 -1
- package/dist/es6/expandable/lib/ExpandableIcon.js +10 -10
- package/dist/es6/expandable/lib/ExpandableTarget.js +1 -1
- package/dist/es6/expandable/lib/ExpandableTitle.js +1 -1
- package/dist/es6/form-field/lib/FormFieldField.js +1 -1
- package/dist/es6/form-field/lib/FormFieldGroupLabel.js +5 -5
- package/dist/es6/form-field/lib/FormFieldGroupList.js +3 -3
- package/dist/es6/form-field/lib/FormFieldHint.js +3 -3
- package/dist/es6/form-field/lib/FormFieldLabel.js +6 -6
- package/dist/es6/form-field/lib/formFieldStencil.js +8 -8
- package/dist/es6/icon/lib/AccentIcon.js +2 -2
- package/dist/es6/icon/lib/AppletIcon.js +1 -1
- package/dist/es6/icon/lib/ExpressiveIcon.js +1 -1
- package/dist/es6/icon/lib/Graphic.js +4 -4
- package/dist/es6/icon/lib/Svg.js +3 -3
- package/dist/es6/icon/lib/SystemIcon.js +1 -1
- package/dist/es6/icon/lib/SystemIconCircle.js +2 -2
- package/dist/es6/information-highlight/lib/InformationHighlight.js +9 -9
- package/dist/es6/information-highlight/lib/parts/Body.js +3 -3
- package/dist/es6/information-highlight/lib/parts/Heading.js +3 -3
- package/dist/es6/information-highlight/lib/parts/Link.js +3 -3
- package/dist/es6/loading-dots/lib/LoadingDots.js +3 -3
- package/dist/es6/menu/lib/MenuCard.js +1 -1
- package/dist/es6/menu/lib/MenuDivider.js +1 -1
- package/dist/es6/menu/lib/MenuGroup.js +1 -1
- package/dist/es6/menu/lib/MenuItem.js +1 -1
- package/dist/es6/menu/lib/MenuList.js +3 -3
- package/dist/es6/modal/lib/ModalBody.js +1 -1
- package/dist/es6/modal/lib/ModalCard.js +1 -1
- package/dist/es6/modal/lib/ModalHeading.js +1 -1
- package/dist/es6/modal/lib/ModalOverflowOverlay.js +1 -1
- package/dist/es6/modal/lib/ModalOverlay.js +2 -2
- package/dist/es6/pagination/lib/Pagination/AdditionalDetails.js +2 -2
- package/dist/es6/pagination/lib/Pagination/Controls.js +2 -2
- package/dist/es6/pagination/lib/Pagination/GoTo/Form.js +1 -1
- package/dist/es6/pagination/lib/Pagination/GoTo/Label.js +1 -1
- package/dist/es6/pagination/lib/Pagination/GoTo/TextInput.js +1 -1
- package/dist/es6/pagination/lib/Pagination/Nav.js +1 -1
- package/dist/es6/pagination/lib/Pagination/PageButton.js +2 -2
- package/dist/es6/pagination/lib/Pagination/PageList.js +1 -1
- package/dist/es6/pagination/lib/Pagination/Pagination.js +1 -1
- package/dist/es6/pagination/lib/Pagination/common/List.js +2 -2
- package/dist/es6/pill/lib/Pill.js +3 -3
- package/dist/es6/pill/lib/PillAvatar.js +1 -1
- package/dist/es6/pill/lib/PillCount.js +1 -1
- package/dist/es6/pill/lib/PillIcon.js +1 -1
- package/dist/es6/pill/lib/PillIconButton.js +1 -1
- package/dist/es6/pill/lib/PillLabel.js +1 -1
- package/dist/es6/popup/lib/PopupBody.js +1 -1
- package/dist/es6/popup/lib/PopupButtonGroup.js +5 -5
- package/dist/es6/popup/lib/PopupCard.js +2 -2
- package/dist/es6/popup/lib/PopupCloseIcon.js +1 -1
- package/dist/es6/popup/lib/PopupHeading.js +1 -1
- package/dist/es6/popup/lib/hooks/useDisableBodyScroll.js +1 -1
- package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map +1 -1
- package/dist/es6/popup/lib/hooks/usePopupStack.js +1 -22
- package/dist/es6/segmented-control/lib/SegmentedControlItem.js +16 -16
- package/dist/es6/segmented-control/lib/SegmentedControlList.js +6 -6
- package/dist/es6/select/lib/SelectCard.js +1 -1
- package/dist/es6/select/lib/SelectInput.js +3 -3
- package/dist/es6/side-panel/lib/SidePanel.js +8 -8
- package/dist/es6/side-panel/lib/SidePanelHeading.js +3 -3
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +7 -7
- package/dist/es6/skeleton/lib/Skeleton.js +2 -2
- package/dist/es6/skeleton/lib/parts/SkeletonHeader.js +1 -1
- package/dist/es6/skeleton/lib/parts/SkeletonShape.js +2 -2
- package/dist/es6/skeleton/lib/parts/SkeletonText.js +2 -2
- package/dist/es6/switch/lib/Switch.js +7 -7
- package/dist/es6/table/lib/BaseTable.js +1 -1
- package/dist/es6/table/lib/Table.js +7 -7
- package/dist/es6/table/lib/parts/BaseTableBody.js +1 -1
- package/dist/es6/table/lib/parts/BaseTableCaption.js +1 -1
- package/dist/es6/table/lib/parts/BaseTableCell.js +1 -1
- package/dist/es6/table/lib/parts/BaseTableHead.js +1 -1
- package/dist/es6/table/lib/parts/BaseTableHeader.js +1 -1
- package/dist/es6/table/lib/parts/css-grid-table/TableRow.js +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +1 -1
- package/dist/es6/tabs/lib/TabsList.js +8 -8
- package/dist/es6/tabs/lib/TabsOverflowButton.js +1 -1
- package/dist/es6/testing/lib/ComponentStatesTable.js +1 -1
- package/dist/es6/text/lib/LabelText.js +6 -6
- package/dist/es6/text/lib/Text.js +16 -16
- package/dist/es6/text/lib/TypeLevelComponents.js +4 -4
- package/dist/es6/text-area/lib/TextArea.js +5 -5
- package/dist/es6/text-input/lib/InputGroup.js +7 -7
- package/dist/es6/text-input/lib/TextInput.js +5 -5
- package/dist/es6/toast/lib/Toast.js +1 -1
- package/dist/es6/toast/lib/ToastBody.js +1 -1
- package/dist/es6/toast/lib/ToastCloseIcon.js +1 -1
- package/dist/es6/toast/lib/ToastIcon.js +1 -1
- package/dist/es6/toast/lib/ToastMessage.js +1 -1
- package/dist/es6/tooltip/lib/TooltipContainer.js +4 -4
- package/dist/es6/version/lib/version.js +1 -1
- package/package.json +4 -4
- package/popup/lib/hooks/usePopupStack.ts +1 -27
|
@@ -7,17 +7,6 @@ import { CanvasProviderTheme, CanvasThemingScope, EmotionCanvasTheme } from './t
|
|
|
7
7
|
* a numerical or legacy theme is used.
|
|
8
8
|
*/
|
|
9
9
|
export declare const CanvasBrandStyleContext: React.Context<React.CSSProperties>;
|
|
10
|
-
/**
|
|
11
|
-
* Context for providing the `data-theme` value to popup containers.
|
|
12
|
-
*
|
|
13
|
-
* Token stylesheets scope their variables to an attribute selector (e.g. Sana's
|
|
14
|
-
* `[data-theme="sana-canvas"]` block defines ~300 variables — palette, shape, depth, type).
|
|
15
|
-
* Portaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they
|
|
16
|
-
* never inherit a nested `data-theme` and none of those variables resolve. Forwarding the
|
|
17
|
-
* attribute itself lets the popup container match the same selector, so the whole theme applies
|
|
18
|
-
* through normal cascade — rather than trying to mirror every variable as an inline style.
|
|
19
|
-
*/
|
|
20
|
-
export declare const CanvasThemeAttributeContext: React.Context<string | undefined>;
|
|
21
10
|
export interface CanvasProviderProps {
|
|
22
11
|
/**
|
|
23
12
|
* ⚠️ Only use this prop if you intent to to theme a part of your application that is different from global theming.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAOnB,MAAM,WAAW,CAAC;AASnB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,oCAA+C,CAAC;AAEpF
|
|
1
|
+
{"version":3,"file":"CanvasProvider.d.ts","sourceRoot":"","sources":["../../../../common/lib/CanvasProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAOnB,MAAM,WAAW,CAAC;AASnB;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,oCAA+C,CAAC;AAEpF,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,QA+E1B,CAAC;AAEH,6EAA6E;AAC7E,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,SAAS,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAC5C,OAAO,CAAC,EAAE;IACR,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,mBAAmB,CAAC,EAAE,kBAAkB,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBF;AAED,eAAO,MAAM,uBAAuB,UAI3B,mBAAmB,GAAG,SAAS,aAC3B,MAAM,cAAc,CAAC,WAAW,CAAC,eAC/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYhC,CAAC;AAEF,eAAO,MAAM,cAAc,8CAKxB,mBAAmB,GAAG,MAAM,cAAc,CAAC,WAAW,CAAC,4CA2EzD,CAAC"}
|
|
@@ -13,21 +13,10 @@ import { sanaCanvasProviderTheme } from './theming/sanaTheme';
|
|
|
13
13
|
* a numerical or legacy theme is used.
|
|
14
14
|
*/
|
|
15
15
|
export const CanvasBrandStyleContext = React.createContext({});
|
|
16
|
-
/**
|
|
17
|
-
* Context for providing the `data-theme` value to popup containers.
|
|
18
|
-
*
|
|
19
|
-
* Token stylesheets scope their variables to an attribute selector (e.g. Sana's
|
|
20
|
-
* `[data-theme="sana-canvas"]` block defines ~300 variables — palette, shape, depth, type).
|
|
21
|
-
* Portaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they
|
|
22
|
-
* never inherit a nested `data-theme` and none of those variables resolve. Forwarding the
|
|
23
|
-
* attribute itself lets the popup container match the same selector, so the whole theme applies
|
|
24
|
-
* through normal cascade — rather than trying to mirror every variable as an inline style.
|
|
25
|
-
*/
|
|
26
|
-
export const CanvasThemeAttributeContext = React.createContext(undefined);
|
|
27
16
|
/**
|
|
28
17
|
* If you wish to reset the theme to the default, apply this class on the CanvasProvider.
|
|
29
18
|
*/
|
|
30
|
-
export const defaultBranding = createStyles({ name: "
|
|
19
|
+
export const defaultBranding = createStyles({ name: "41l34g", styles: "--cnvs-brand-common-alert-inner:var(--cnvs-base-palette-amber-400);--cnvs-brand-common-alert-outer:var(--cnvs-base-palette-amber-500);--cnvs-brand-common-error-inner:var(--cnvs-base-palette-red-500);--cnvs-brand-common-focus-outline:var(--cnvs-base-palette-blue-500);--cnvs-brand-neutral-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-neutral-darkest:var(--cnvs-base-palette-slate-800);--cnvs-brand-neutral-dark:var(--cnvs-base-palette-slate-700);--cnvs-brand-neutral-base:var(--cnvs-base-palette-slate-600);--cnvs-brand-neutral-light:var(--cnvs-base-palette-slate-200);--cnvs-brand-neutral-lighter:var(--cnvs-base-palette-slate-50);--cnvs-brand-neutral-lightest:var(--cnvs-base-palette-slate-25);--cnvs-brand-success-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-success-darkest:var(--cnvs-base-palette-green-800);--cnvs-brand-success-dark:var(--cnvs-base-palette-green-700);--cnvs-brand-success-base:var(--cnvs-base-palette-green-600);--cnvs-brand-success-light:var(--cnvs-base-palette-green-200);--cnvs-brand-success-lighter:var(--cnvs-base-palette-green-50);--cnvs-brand-success-lightest:var(--cnvs-base-palette-green-25);--cnvs-brand-error-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-error-darkest:var(--cnvs-base-palette-red-800);--cnvs-brand-error-dark:var(--cnvs-base-palette-red-700);--cnvs-brand-error-base:var(--cnvs-base-palette-red-600);--cnvs-brand-error-light:var(--cnvs-base-palette-red-200);--cnvs-brand-error-lighter:var(--cnvs-base-palette-red-50);--cnvs-brand-error-lightest:var(--cnvs-base-palette-red-25);--cnvs-brand-alert-accent:var(--cnvs-base-palette-neutral-900);--cnvs-brand-alert-darkest:var(--cnvs-base-palette-amber-600);--cnvs-brand-alert-dark:var(--cnvs-base-palette-amber-500);--cnvs-brand-alert-base:var(--cnvs-base-palette-amber-400);--cnvs-brand-alert-light:var(--cnvs-base-palette-amber-200);--cnvs-brand-alert-lighter:var(--cnvs-base-palette-amber-50);--cnvs-brand-alert-lightest:var(--cnvs-base-palette-amber-25);--cnvs-brand-primary-accent:var(--cnvs-base-palette-neutral-0);--cnvs-brand-primary-darkest:var(--cnvs-base-palette-blue-800);--cnvs-brand-primary-dark:var(--cnvs-base-palette-blue-700);--cnvs-brand-primary-base:var(--cnvs-base-palette-blue-600);--cnvs-brand-primary-light:var(--cnvs-base-palette-blue-200);--cnvs-brand-primary-lighter:var(--cnvs-base-palette-blue-50);--cnvs-brand-primary-lightest:var(--cnvs-base-palette-blue-25);--cnvs-brand-gradient-primary:linear-gradient(90deg, var(--cnvs-brand-primary-base) 0%, var(--cnvs-brand-primary-dark) 100%);--cnvs-sys-color-brand-focus-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-border-primary:var(--cnvs-brand-common-focus-outline);--cnvs-sys-color-brand-accent-primary:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-action:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-accent-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-accent-caution:var(--cnvs-brand-alert-base);--cnvs-sys-color-brand-accent-positive:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-primary-default:var(--cnvs-brand-primary-base);--cnvs-sys-color-brand-fg-primary-strong:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-fg-critical-default:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-fg-critical-strong:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-fg-caution-default:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-caution-strong:var(--cnvs-brand-alert-darkest);--cnvs-sys-color-brand-fg-positive-default:var(--cnvs-brand-success-base);--cnvs-sys-color-brand-fg-positive-strong:var(--cnvs-brand-success-dark);--cnvs-sys-color-brand-fg-selected:var(--cnvs-brand-primary-dark);--cnvs-sys-color-brand-focus-critical:var(--cnvs-brand-error-dark);--cnvs-sys-color-brand-border-critical:var(--cnvs-brand-error-base);--cnvs-sys-color-brand-focus-caution-inner:var(--cnvs-brand-common-alert-inner);--cnvs-sys-color-brand-focus-caution-outer:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-border-caution:var(--cnvs-brand-alert-dark);--cnvs-sys-color-brand-surface-primary-default:var(--cnvs-brand-primary-lightest);--cnvs-sys-color-brand-surface-primary-strong:var(--cnvs-brand-primary-lighter);--cnvs-sys-color-brand-surface-critical-default:var(--cnvs-brand-error-lightest);--cnvs-sys-color-brand-surface-critical-strong:var(--cnvs-brand-error-lighter);--cnvs-sys-color-brand-surface-caution-default:var(--cnvs-brand-alert-lightest);--cnvs-sys-color-brand-surface-caution-strong:var(--cnvs-brand-alert-lighter);--cnvs-sys-color-brand-surface-positive-default:var(--cnvs-brand-success-lightest);--cnvs-sys-color-brand-surface-positive-strong:var(--cnvs-brand-success-lighter);--cnvs-sys-color-brand-surface-selected:var(--cnvs-brand-primary-lighter);" });
|
|
31
20
|
/** Pure function — safe to call outside React hooks (e.g. usePopupStack). */
|
|
32
21
|
export function canvasThemeToCssVars(theme, elemProps, options) {
|
|
33
22
|
var _a, _b;
|
|
@@ -65,7 +54,7 @@ theme, elemProps, themeScope) => {
|
|
|
65
54
|
});
|
|
66
55
|
};
|
|
67
56
|
export const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
|
|
68
|
-
var _a
|
|
57
|
+
var _a;
|
|
69
58
|
// Add console warning for unnecessary sanaCanvasProviderTheme usage
|
|
70
59
|
React.useEffect(() => {
|
|
71
60
|
if (process.env.NODE_ENV !== 'production') {
|
|
@@ -86,10 +75,6 @@ export const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
|
|
|
86
75
|
const cache = getCache();
|
|
87
76
|
// Read parent context to support nested scoped providers
|
|
88
77
|
const parentBrandStyle = React.useContext(CanvasBrandStyleContext);
|
|
89
|
-
const parentThemeAttribute = React.useContext(CanvasThemeAttributeContext);
|
|
90
|
-
// `data-theme` on this provider wins; otherwise inherit from a parent provider so nested
|
|
91
|
-
// providers keep forwarding the outer theme attribute to popups.
|
|
92
|
-
const themeAttribute = (_a = props['data-theme']) !== null && _a !== void 0 ? _a : parentThemeAttribute;
|
|
93
78
|
// Popup forwarding only needs CSS custom properties (not consumer layout styles).
|
|
94
79
|
const mergedBrandStyle = React.useMemo(() => {
|
|
95
80
|
const merged = {};
|
|
@@ -108,7 +93,7 @@ export const CanvasProvider = ({ children, theme, themeScope, ...props }) => {
|
|
|
108
93
|
: undefined;
|
|
109
94
|
const content = (_jsx("div", { dir: isNumericalTheme(theme)
|
|
110
95
|
? theme.direction || defaultCanvasTheme.direction
|
|
111
|
-
: ((
|
|
112
|
-
const wrappedContent = (_jsx(
|
|
96
|
+
: ((_a = theme === null || theme === void 0 ? void 0 : theme.canvas) === null || _a === void 0 ? void 0 : _a.direction) || defaultCanvasTheme.direction, className: className, ...elemProps, style: style, children: children }));
|
|
97
|
+
const wrappedContent = (_jsx(CanvasBrandStyleContext.Provider, { value: mergedBrandStyle, children: content }));
|
|
113
98
|
return (_jsx(CacheProvider, { value: cache, children: emotionTheme ? (_jsx(ThemeProvider, { theme: emotionTheme, children: wrappedContent })) : (wrappedContent) }));
|
|
114
99
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createStyles, handleCsProp } from '@workday/canvas-kit-styling';
|
|
3
3
|
import { createComponent } from './utils';
|
|
4
|
-
const ellipsisStyles = createStyles({ name: "
|
|
4
|
+
const ellipsisStyles = createStyles({ name: "120jq", styles: "white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" });
|
|
5
5
|
export const EllipsisText = createComponent('span')({
|
|
6
6
|
displayName: 'EllipsisText',
|
|
7
7
|
Component({ children, ...elemProps }, ref, Element) {
|
|
@@ -8,5 +8,5 @@ export const cornerShapeStencil = createStencil({
|
|
|
8
8
|
vars: {
|
|
9
9
|
shape: '',
|
|
10
10
|
},
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "mwwm4", styles: "box-sizing:border-box;border-radius:var(--shape-corner-shape-ccab68);corner-shape:superellipse(1.1);" }
|
|
12
12
|
}, "corner-shape-ccab68");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"brandScope.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/brandScope.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,yBAAyB,EACzB,mBAAmB,EACnB,WAAW,EACX,yBAAyB,EAE1B,MAAM,SAAS,CAAC;AAEjB,oFAAoF;AACpF,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,mBAAmB,GACzB,KAAK,IAAI,yBAAyB,CAMpC;AAED,8EAA8E;AAC9E,eAAO,MAAM,0BAA0B;;;;;;;CAO7B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;CAS1B,CAAC;AASX,KAAK,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"brandScope.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/brandScope.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,sBAAsB,EACtB,yBAAyB,EACzB,mBAAmB,EACnB,WAAW,EACX,yBAAyB,EAE1B,MAAM,SAAS,CAAC;AAEjB,oFAAoF;AACpF,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,mBAAmB,GACzB,KAAK,IAAI,yBAAyB,CAMpC;AAED,8EAA8E;AAC9E,eAAO,MAAM,0BAA0B;;;;;;;CAO7B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,uBAAuB;;;;;;;;;CAS1B,CAAC;AASX,KAAK,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAsB9E,+EAA+E;AAC/E,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,UAAU,GAAG,QAAQ,EAC5B,IAAI,EAAE,eAAe,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,SAAS,EAClF,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CAAC,QA0BnC;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAiDvF;AAED,8EAA8E;AAC9E,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAmBzF;AAED,6EAA6E;AAC7E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAsBvF;AAED,gFAAgF;AAChF,wBAAgB,wBAAwB,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAYzF;AAED,+EAA+E;AAC/E,wBAAgB,uBAAuB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,aAAa,QAKvF;AAED,wEAAwE;AACxE,wBAAgB,sBAAsB,CACpC,QAAQ,EAAE,yBAAyB,CAAC,UAAU,CAAC,GAAG,SAAS,EAC3D,KAAK,EAAE,KAAK,CAAC,aAAa,QAW3B;AAED,6EAA6E;AAC7E,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,CAAC,OAAO,CAAC,GAAG,SAAS,EACrD,KAAK,EAAE,KAAK,CAAC,aAAa,QAK3B;AAaD;;;GAGG;AACH,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,mBAAmB,GAAG,SAAS,EACtC,KAAK,EAAE,KAAK,CAAC,aAAa,QAmD3B;AAED,6EAA6E;AAC7E,wBAAgB,yBAAyB,CACvC,eAAe,EAAE;IAAC,KAAK,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAC,CAAA;CAAC,GAAG,SAAS,EACxE,KAAK,EAAE,KAAK,CAAC,aAAa,QAyB3B;AAqBD,+FAA+F;AAC/F,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,EAC/B,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,OAAO,CAAC,EAAE;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAC,QA+G/B;AAED,mGAAmG;AACnG,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,EAC1B,KAAK,EAAE,OAAO,GAAG,MAAM,QA6CxB;AAED,qFAAqF;AACrF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,yBAAyB,EAChC,KAAK,EAAE,KAAK,CAAC,aAAa,QAoB3B"}
|
|
@@ -50,11 +50,6 @@ const EXTENDED_BRAND_TOKEN_MAP = {
|
|
|
50
50
|
neutral150: '--cnvs-brand-neutral-150',
|
|
51
51
|
neutral850: '--cnvs-brand-neutral-850',
|
|
52
52
|
neutralA150: '--cnvs-brand-neutral-a150',
|
|
53
|
-
neutralA850: '--cnvs-brand-neutral-a850',
|
|
54
|
-
primaryA300: '--cnvs-brand-primary-a300',
|
|
55
|
-
criticalA300: '--cnvs-brand-critical-a300',
|
|
56
|
-
cautionA300: '--cnvs-brand-caution-a300',
|
|
57
|
-
positiveA300: '--cnvs-brand-positive-a300',
|
|
58
53
|
};
|
|
59
54
|
const setStyleVar = (style, token, value) => {
|
|
60
55
|
// @ts-ignore - CSS custom property key
|
|
@@ -2,29 +2,6 @@ import type { CanvasNumericalBrandTheme } from './types';
|
|
|
2
2
|
/**
|
|
3
3
|
* Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
|
|
4
4
|
* Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
|
|
5
|
-
*
|
|
6
|
-
* Mirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of
|
|
7
|
-
* `primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a
|
|
8
|
-
* stronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana
|
|
9
|
-
* overrides. Every other key is intentionally omitted — Sana does not define a distinct value
|
|
10
|
-
* for it, so writing it here would only reference the very variable being written (a `var()`
|
|
11
|
-
* cycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).
|
|
12
|
-
*
|
|
13
|
-
* `action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define
|
|
14
|
-
* `--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are
|
|
15
|
-
* derived downstream from the root theme. Forcing them here would pin values the root is meant
|
|
16
|
-
* to own.
|
|
17
|
-
*
|
|
18
|
-
* Ramp values must reference `base.*` (the underlying palette), never `brand.*` of the same
|
|
19
|
-
* name — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS
|
|
20
|
-
* variable, so referencing `brand.*` here would create that same self-reference cycle. The
|
|
21
|
-
* `system.color.brand.*` overrides are the exception: they target *different* CSS variables
|
|
22
|
-
* (`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.
|
|
23
|
-
*
|
|
24
|
-
* Note this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand
|
|
25
|
-
* system colors) comes from the stylesheet's `[data-theme="sana-canvas"]` block — pass
|
|
26
|
-
* `data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups
|
|
27
|
-
* so the full theme applies there too.
|
|
28
5
|
*/
|
|
29
6
|
export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
|
|
30
7
|
/**
|
|
@@ -41,14 +18,6 @@ export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
|
|
|
41
18
|
* - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
|
|
42
19
|
* inherit brand variables from the document and no `theme` prop is needed.
|
|
43
20
|
*
|
|
44
|
-
* Pass `data-theme="sana-canvas"` alongside it. That attribute is forwarded to popup stack
|
|
45
|
-
* containers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to
|
|
46
|
-
* portaled content through the stylesheet's own `[data-theme="sana-canvas"]` block — this preset
|
|
47
|
-
* covers brand tokens, the attribute covers everything else.
|
|
48
|
-
*
|
|
49
|
-
* `action.*` and selected-state tokens are not set by this preset — Sana does not define them,
|
|
50
|
-
* and they resolve from the root theme.
|
|
51
|
-
*
|
|
52
21
|
* @example
|
|
53
22
|
* ```tsx
|
|
54
23
|
* // Preferred — control <html>
|
|
@@ -56,10 +25,8 @@ export declare const sanaCanvasNumericalTheme: CanvasNumericalBrandTheme;
|
|
|
56
25
|
* // <html data-theme="sana-canvas">
|
|
57
26
|
* <CanvasProvider><App /></CanvasProvider>
|
|
58
27
|
*
|
|
59
|
-
* // No access to <html> —
|
|
60
|
-
* <CanvasProvider theme={sanaCanvasProviderTheme}
|
|
61
|
-
* <App />
|
|
62
|
-
* </CanvasProvider>
|
|
28
|
+
* // No access to <html> — required for popup parity
|
|
29
|
+
* <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
|
|
63
30
|
* ```
|
|
64
31
|
*/
|
|
65
32
|
export declare const sanaCanvasProviderTheme: CanvasNumericalBrandTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sanaTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/sanaTheme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sanaTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/sanaTheme.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AAevD;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,yBAmEtC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,uBAAuB,2BAA2B,CAAC"}
|
|
@@ -15,109 +15,88 @@
|
|
|
15
15
|
* | `sanaCanvasNumericalTheme` | Numerical `brand` shape for popup forwarding |
|
|
16
16
|
* | `sanaCanvasProviderTheme` | Same — pass to root `CanvasProvider` when `<html>` is unavailable |
|
|
17
17
|
*/
|
|
18
|
-
import { cssVar } from '@workday/canvas-kit-styling';
|
|
19
18
|
import { base, brand } from '@workday/canvas-tokens-web';
|
|
19
|
+
/** Reference a canvas-tokens CSS variable (resolves under `[data-theme="sana-canvas"]`). */
|
|
20
|
+
const varRef = (token) => `var(${token})`;
|
|
20
21
|
/**
|
|
21
|
-
*
|
|
22
|
-
* canvas-tokens-web
|
|
23
|
-
* not `cssVar()` (which expects a bare variable name, not an already-wrapped `var()` string).
|
|
24
|
-
* Referencing `base.*` (not `brand.*` of the same name) avoids a `var()` self-reference cycle:
|
|
25
|
-
* CanvasProvider writes each ramp entry onto the identically-named `--cnvs-brand-*` variable, so
|
|
26
|
-
* `brand.sana.neutral150` (itself `var(--cnvs-brand-neutral-150, ...)`) would point right back at
|
|
27
|
-
* the variable being written.
|
|
22
|
+
* Sana extends the neutral ramp with steps not yet exported from canvas-tokens-web JS.
|
|
23
|
+
* Defined in `@workday/canvas-tokens-web/css/sana/_variables.css`.
|
|
28
24
|
*/
|
|
29
|
-
const
|
|
25
|
+
const sanaBrandNeutral = {
|
|
26
|
+
'150': '--cnvs-brand-neutral-150',
|
|
27
|
+
'850': '--cnvs-brand-neutral-850',
|
|
28
|
+
A150: '--cnvs-brand-neutral-a150',
|
|
29
|
+
};
|
|
30
30
|
/**
|
|
31
31
|
* Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
|
|
32
32
|
* Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
|
|
33
|
-
*
|
|
34
|
-
* Mirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of
|
|
35
|
-
* `primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a
|
|
36
|
-
* stronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana
|
|
37
|
-
* overrides. Every other key is intentionally omitted — Sana does not define a distinct value
|
|
38
|
-
* for it, so writing it here would only reference the very variable being written (a `var()`
|
|
39
|
-
* cycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).
|
|
40
|
-
*
|
|
41
|
-
* `action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define
|
|
42
|
-
* `--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are
|
|
43
|
-
* derived downstream from the root theme. Forcing them here would pin values the root is meant
|
|
44
|
-
* to own.
|
|
45
|
-
*
|
|
46
|
-
* Ramp values must reference `base.*` (the underlying palette), never `brand.*` of the same
|
|
47
|
-
* name — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS
|
|
48
|
-
* variable, so referencing `brand.*` here would create that same self-reference cycle. The
|
|
49
|
-
* `system.color.brand.*` overrides are the exception: they target *different* CSS variables
|
|
50
|
-
* (`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.
|
|
51
|
-
*
|
|
52
|
-
* Note this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand
|
|
53
|
-
* system colors) comes from the stylesheet's `[data-theme="sana-canvas"]` block — pass
|
|
54
|
-
* `data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups
|
|
55
|
-
* so the full theme applies there too.
|
|
56
33
|
*/
|
|
57
34
|
export const sanaCanvasNumericalTheme = {
|
|
58
35
|
// Explicit brand vars only — multi-key ramps write 1:1; no system shortcut bundles run.
|
|
59
36
|
themeScope: 'brand',
|
|
60
37
|
brand: {
|
|
38
|
+
action: {
|
|
39
|
+
base: varRef(brand.neutral975),
|
|
40
|
+
dark: varRef(brand.neutral950),
|
|
41
|
+
darkest: varRef(brand.neutral900),
|
|
42
|
+
accent: varRef(base.neutral0),
|
|
43
|
+
lightest: varRef(brand.neutral25),
|
|
44
|
+
lighter: varRef(brand.neutral50),
|
|
45
|
+
light: varRef(brand.neutral200),
|
|
46
|
+
},
|
|
47
|
+
neutral: {
|
|
48
|
+
'25': varRef(brand.neutral25),
|
|
49
|
+
'50': varRef(brand.neutral50),
|
|
50
|
+
'100': varRef(brand.neutral100),
|
|
51
|
+
'150': varRef(sanaBrandNeutral['150']),
|
|
52
|
+
'200': varRef(brand.neutral200),
|
|
53
|
+
'300': varRef(brand.neutral300),
|
|
54
|
+
'400': varRef(brand.neutral400),
|
|
55
|
+
'500': varRef(brand.neutral500),
|
|
56
|
+
'600': varRef(brand.neutral600),
|
|
57
|
+
'700': varRef(brand.neutral700),
|
|
58
|
+
'800': varRef(brand.neutral800),
|
|
59
|
+
'850': varRef(sanaBrandNeutral['850']),
|
|
60
|
+
'900': varRef(brand.neutral900),
|
|
61
|
+
'950': varRef(brand.neutral950),
|
|
62
|
+
'975': varRef(brand.neutral975),
|
|
63
|
+
A25: varRef(brand.neutralA25),
|
|
64
|
+
A50: varRef(brand.neutralA50),
|
|
65
|
+
A100: varRef(brand.neutralA100),
|
|
66
|
+
A150: varRef(sanaBrandNeutral.A150),
|
|
67
|
+
A200: varRef(brand.neutralA200),
|
|
68
|
+
},
|
|
61
69
|
primary: {
|
|
62
|
-
|
|
70
|
+
'500': varRef(brand.primary500),
|
|
71
|
+
'600': varRef(brand.primary600),
|
|
72
|
+
'700': varRef(brand.primary700),
|
|
73
|
+
A25: varRef(brand.primaryA25),
|
|
74
|
+
A50: varRef(brand.primaryA50),
|
|
75
|
+
A100: varRef(brand.primaryA100),
|
|
63
76
|
},
|
|
64
77
|
critical: {
|
|
65
|
-
|
|
78
|
+
'500': varRef(brand.critical500),
|
|
79
|
+
'600': varRef(brand.critical600),
|
|
80
|
+
'700': varRef(brand.critical700),
|
|
81
|
+
A25: varRef(brand.criticalA25),
|
|
82
|
+
A50: varRef(brand.criticalA50),
|
|
66
83
|
},
|
|
67
84
|
caution: {
|
|
68
|
-
|
|
85
|
+
'400': varRef(brand.caution400),
|
|
86
|
+
'500': varRef(brand.caution500),
|
|
87
|
+
A25: varRef(brand.cautionA25),
|
|
88
|
+
A50: varRef(brand.cautionA50),
|
|
69
89
|
},
|
|
70
90
|
positive: {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
'50': cssVar(base.neutral50),
|
|
76
|
-
'100': cssVar(base.neutral100),
|
|
77
|
-
'150': sanaBasePalette.neutral150,
|
|
78
|
-
'200': cssVar(base.neutral200),
|
|
79
|
-
'300': cssVar(base.neutral300),
|
|
80
|
-
'400': cssVar(base.neutral400),
|
|
81
|
-
'500': cssVar(base.neutral500),
|
|
82
|
-
'600': cssVar(base.neutral600),
|
|
83
|
-
'700': cssVar(base.neutral700),
|
|
84
|
-
'800': cssVar(base.neutral800),
|
|
85
|
-
'850': sanaBasePalette.neutral850,
|
|
86
|
-
'900': cssVar(base.neutral900),
|
|
87
|
-
'950': cssVar(base.neutral950),
|
|
88
|
-
'975': cssVar(base.neutral975),
|
|
89
|
-
A25: cssVar(base.neutralA25),
|
|
90
|
-
A50: cssVar(base.neutralA50),
|
|
91
|
-
A100: cssVar(base.neutralA100),
|
|
92
|
-
A150: sanaBasePalette.neutralA150,
|
|
93
|
-
A200: cssVar(base.neutralA200),
|
|
94
|
-
A300: cssVar(base.neutralA300),
|
|
95
|
-
A400: cssVar(base.neutralA400),
|
|
96
|
-
A500: cssVar(base.neutralA500),
|
|
97
|
-
A600: cssVar(base.neutralA600),
|
|
98
|
-
A700: cssVar(base.neutralA700),
|
|
99
|
-
A800: cssVar(base.neutralA800),
|
|
100
|
-
A850: sanaBasePalette.neutralA850,
|
|
101
|
-
A900: cssVar(base.neutralA900),
|
|
102
|
-
A950: cssVar(base.neutralA950),
|
|
103
|
-
A975: cssVar(base.neutralA975),
|
|
91
|
+
'600': varRef(brand.positive600),
|
|
92
|
+
'800': varRef(brand.positive800),
|
|
93
|
+
A25: varRef(brand.positiveA25),
|
|
94
|
+
A50: varRef(brand.positiveA50),
|
|
104
95
|
},
|
|
105
96
|
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
accent: {
|
|
110
|
-
primary: cssVar(brand.neutral975),
|
|
111
|
-
action: cssVar(brand.neutral975),
|
|
112
|
-
},
|
|
113
|
-
fg: {
|
|
114
|
-
primary: {
|
|
115
|
-
default: cssVar(brand.neutralA900),
|
|
116
|
-
strong: cssVar(brand.neutralA950),
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
},
|
|
120
|
-
},
|
|
97
|
+
selected: {
|
|
98
|
+
fg: varRef(brand.neutralA900),
|
|
99
|
+
surface: varRef(brand.neutralA100),
|
|
121
100
|
},
|
|
122
101
|
};
|
|
123
102
|
/**
|
|
@@ -134,14 +113,6 @@ export const sanaCanvasNumericalTheme = {
|
|
|
134
113
|
* - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
|
|
135
114
|
* inherit brand variables from the document and no `theme` prop is needed.
|
|
136
115
|
*
|
|
137
|
-
* Pass `data-theme="sana-canvas"` alongside it. That attribute is forwarded to popup stack
|
|
138
|
-
* containers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to
|
|
139
|
-
* portaled content through the stylesheet's own `[data-theme="sana-canvas"]` block — this preset
|
|
140
|
-
* covers brand tokens, the attribute covers everything else.
|
|
141
|
-
*
|
|
142
|
-
* `action.*` and selected-state tokens are not set by this preset — Sana does not define them,
|
|
143
|
-
* and they resolve from the root theme.
|
|
144
|
-
*
|
|
145
116
|
* @example
|
|
146
117
|
* ```tsx
|
|
147
118
|
* // Preferred — control <html>
|
|
@@ -149,10 +120,8 @@ export const sanaCanvasNumericalTheme = {
|
|
|
149
120
|
* // <html data-theme="sana-canvas">
|
|
150
121
|
* <CanvasProvider><App /></CanvasProvider>
|
|
151
122
|
*
|
|
152
|
-
* // No access to <html> —
|
|
153
|
-
* <CanvasProvider theme={sanaCanvasProviderTheme}
|
|
154
|
-
* <App />
|
|
155
|
-
* </CanvasProvider>
|
|
123
|
+
* // No access to <html> — required for popup parity
|
|
124
|
+
* <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
|
|
156
125
|
* ```
|
|
157
126
|
*/
|
|
158
127
|
export const sanaCanvasProviderTheme = sanaCanvasNumericalTheme;
|
|
@@ -285,12 +285,12 @@ export type EmotionCanvasTheme = {
|
|
|
285
285
|
*
|
|
286
286
|
* Neutral-only Sana steps (`'150'`, `'850'`, `'A150'`) live on {@link CanvasNeutralBrandRamp}.
|
|
287
287
|
*/
|
|
288
|
-
export type CanvasBrandRamp = Partial<Record<'25' | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | '975' | 'A25' | 'A50' | 'A100' | 'A200'
|
|
288
|
+
export type CanvasBrandRamp = Partial<Record<'25' | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | '975' | 'A25' | 'A50' | 'A100' | 'A200', string>>;
|
|
289
289
|
/**
|
|
290
|
-
* Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`
|
|
291
|
-
*
|
|
290
|
+
* Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
|
|
291
|
+
* exported for primary/critical/caution/positive families.
|
|
292
292
|
*/
|
|
293
|
-
export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150'
|
|
293
|
+
export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150', string>>;
|
|
294
294
|
/** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
|
|
295
295
|
export type CanvasActionBrandRamp = Partial<Record<'base' | 'lightest' | 'lighter' | 'light' | 'dark' | 'darkest' | 'darker' | 'accent', string>>;
|
|
296
296
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ import { ExpandableTarget } from './ExpandableTarget';
|
|
|
10
10
|
import { ExpandableTitle } from './ExpandableTitle';
|
|
11
11
|
import { useExpandableModel } from './hooks/useExpandableModel';
|
|
12
12
|
export const expandableContainerStencil = createStencil({
|
|
13
|
-
base: { name: "
|
|
13
|
+
base: { name: "3nc6dx", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
14
14
|
}, "expandable-container-f664d5");
|
|
15
15
|
/**
|
|
16
16
|
* `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a
|
|
@@ -5,7 +5,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
5
5
|
import { createStencil } from '@workday/canvas-kit-styling';
|
|
6
6
|
export const expandableAvatarStencil = createStencil({
|
|
7
7
|
extends: avatarStencil,
|
|
8
|
-
base: { name: "
|
|
8
|
+
base: { name: "44uex2", styles: "box-sizing:border-box;flex-shrink:0;" }
|
|
9
9
|
}, "expandable-avatar-65308e");
|
|
10
10
|
// When the component is created, it needs to be a button element to match AvatarProps.
|
|
11
11
|
// Once Avatar becomes a `createComponent` we can default the element type to a `div`
|
|
@@ -6,7 +6,7 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import { useExpandableContent } from './hooks/useExpandableContent';
|
|
7
7
|
import { useExpandableModel } from './hooks/useExpandableModel';
|
|
8
8
|
export const expandableContentStencil = createStencil({
|
|
9
|
-
base: { name: "
|
|
9
|
+
base: { name: "46v4df", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
10
10
|
}, "expandable-content-25e157");
|
|
11
11
|
export const ExpandableContent = createSubcomponent('div')({
|
|
12
12
|
modelHook: useExpandableModel,
|
|
@@ -9,34 +9,34 @@ import { useExpandableIcon } from './hooks/useExpandableIcon';
|
|
|
9
9
|
import { useExpandableModel } from './hooks/useExpandableModel';
|
|
10
10
|
export const expandableIconStencil = createStencil({
|
|
11
11
|
extends: systemIconStencil,
|
|
12
|
-
base: { name: "
|
|
12
|
+
base: { name: "1c0wo1", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
|
|
13
13
|
modifiers: {
|
|
14
14
|
isExpanded: {
|
|
15
|
-
true: { name: "
|
|
16
|
-
false: { name: "
|
|
15
|
+
true: { name: "2k8s5g", styles: "" },
|
|
16
|
+
false: { name: "23mywm", styles: "" }
|
|
17
17
|
},
|
|
18
18
|
position: {
|
|
19
|
-
start: { name: "
|
|
20
|
-
end: { name: "
|
|
21
|
-
only: { name: "
|
|
19
|
+
start: { name: "24dwc3", styles: "" },
|
|
20
|
+
end: { name: "3gizel", styles: "" },
|
|
21
|
+
only: { name: "1gdvfo", styles: "" }
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
compound: [
|
|
25
25
|
{
|
|
26
26
|
modifiers: { position: 'end', isExpanded: false },
|
|
27
|
-
styles: { name: "
|
|
27
|
+
styles: { name: "1czxjv", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
30
|
modifiers: { position: 'end', isExpanded: true },
|
|
31
|
-
styles: { name: "
|
|
31
|
+
styles: { name: "115btw", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
modifiers: { position: 'start', isExpanded: false },
|
|
35
|
-
styles: { name: "
|
|
35
|
+
styles: { name: "1o8jlc", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
|
|
36
36
|
},
|
|
37
37
|
{
|
|
38
38
|
modifiers: { position: 'start', isExpanded: true },
|
|
39
|
-
styles: { name: "
|
|
39
|
+
styles: { name: "3227tj", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
|
|
40
40
|
}
|
|
41
41
|
]
|
|
42
42
|
}, "expandable-icon-af0853");
|
|
@@ -8,7 +8,7 @@ import { useExpandableModel } from './hooks/useExpandableModel';
|
|
|
8
8
|
import { useExpandableTarget } from './hooks/useExpandableTarget';
|
|
9
9
|
export const expandableTargetStencil = createStencil({
|
|
10
10
|
extends: cornerShapeStencil,
|
|
11
|
-
base: { name: "
|
|
11
|
+
base: { name: "30was0", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
|
|
12
12
|
}, "expandable-target-6f2998");
|
|
13
13
|
export const ExpandableTarget = createSubcomponent('button')({
|
|
14
14
|
modelHook: useExpandableModel,
|
|
@@ -4,7 +4,7 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
|
4
4
|
import { createStencil, px2rem } from '@workday/canvas-kit-styling';
|
|
5
5
|
import { system } from '@workday/canvas-tokens-web';
|
|
6
6
|
export const expandableTitleStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "3w8vjo", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
|
|
8
8
|
}, "expandable-title-afdcf8");
|
|
9
9
|
export const ExpandableTitle = createComponent('div')({
|
|
10
10
|
displayName: 'Expandable.Title',
|
|
@@ -4,7 +4,7 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
|
|
|
4
4
|
import { system } from '@workday/canvas-tokens-web';
|
|
5
5
|
import { useFormFieldModel } from './hooks';
|
|
6
6
|
export const formFieldFieldStencil = createStencil({
|
|
7
|
-
base: { name: "
|
|
7
|
+
base: { name: "3f2qv8", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
|
|
8
8
|
}, "form-field-field-a35e82");
|
|
9
9
|
export const FormFieldField = createSubcomponent('div')({
|
|
10
10
|
displayName: 'FormField.Field',
|
|
@@ -7,15 +7,15 @@ import { system } from '@workday/canvas-tokens-web';
|
|
|
7
7
|
import { useFormFieldModel } from './hooks';
|
|
8
8
|
export const formFieldGroupLabelStencil = createStencil({
|
|
9
9
|
extends: textStencil,
|
|
10
|
-
base: { name: "
|
|
10
|
+
base: { name: "2ui5jv", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
|
|
11
11
|
modifiers: {
|
|
12
12
|
isRequired: {
|
|
13
|
-
true: { name: "
|
|
13
|
+
true: { name: "21c283", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
|
|
14
14
|
},
|
|
15
15
|
orientation: {
|
|
16
|
-
vertical: { name: "
|
|
17
|
-
horizontalStart: { name: "
|
|
18
|
-
horizontalEnd: { name: "
|
|
16
|
+
vertical: { name: "3kr20p", styles: "width:100%;" },
|
|
17
|
+
horizontalStart: { name: "3ma4w6", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
|
|
18
|
+
horizontalEnd: { name: "2v3pki", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
21
|
defaultModifiers: {
|
|
@@ -5,11 +5,11 @@ import { base, system } from '@workday/canvas-tokens-web';
|
|
|
5
5
|
import { useFormFieldModel } from './hooks';
|
|
6
6
|
const formFieldGroupListStencil = createStencil({
|
|
7
7
|
extends: cornerShapeStencil,
|
|
8
|
-
base: { name: "
|
|
8
|
+
base: { name: "13xnud", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
|
|
9
9
|
modifiers: {
|
|
10
10
|
error: {
|
|
11
|
-
error: { name: "
|
|
12
|
-
caution: { name: "
|
|
11
|
+
error: { name: "9ahjp", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" },
|
|
12
|
+
caution: { name: "47n2sh", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" }
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
}, "form-field-group-list-284850");
|