diff --git a/.changeset/fluffy-hotels-obey.md b/.changeset/fluffy-hotels-obey.md new file mode 100644 index 00000000..92b91311 --- /dev/null +++ b/.changeset/fluffy-hotels-obey.md @@ -0,0 +1,50 @@ +--- +"@igloo-ui/action-menu": patch +"@igloo-ui/alert": patch +"@igloo-ui/area-chart": patch +"@igloo-ui/avatar": patch +"@igloo-ui/bar-chart": patch +"@igloo-ui/breadcrumb": patch +"@igloo-ui/button": patch +"@igloo-ui/button-group": patch +"@igloo-ui/card": patch +"@igloo-ui/carousel": patch +"@igloo-ui/checkbox": patch +"@igloo-ui/color": patch +"@igloo-ui/color-picker": patch +"@igloo-ui/combobox": patch +"@igloo-ui/datepicker": patch +"@igloo-ui/disclosure": patch +"@igloo-ui/dropdown": patch +"@igloo-ui/ellipsis": patch +"@igloo-ui/filter": patch +"@igloo-ui/form-group": patch +"@igloo-ui/helper-text": patch +"@igloo-ui/hyperlink": patch +"@igloo-ui/icon-button": patch +"@igloo-ui/input": patch +"@igloo-ui/list": patch +"@igloo-ui/metric": patch +"@igloo-ui/modal": patch +"@igloo-ui/option-button": patch +"@igloo-ui/pager": patch +"@igloo-ui/pie-chart": patch +"@igloo-ui/popover": patch +"@igloo-ui/progress-bar": patch +"@igloo-ui/provider": patch +"@igloo-ui/radio": patch +"@igloo-ui/select": patch +"@igloo-ui/stacked-bar": patch +"@igloo-ui/stepper": patch +"@igloo-ui/tabs": patch +"@igloo-ui/tag": patch +"@igloo-ui/tag-picker": patch +"@igloo-ui/text-editor": patch +"@igloo-ui/textarea": patch +"@igloo-ui/toaster": patch +"@igloo-ui/toggle": patch +"@igloo-ui/tooltip": patch +"@igloo-ui/vertical-bar-chart": patch +--- + +Updated Hopper depedency diff --git a/packages/ActionMenu/package.json b/packages/ActionMenu/package.json index c744f7a8..9826e10d 100644 --- a/packages/ActionMenu/package.json +++ b/packages/ActionMenu/package.json @@ -27,7 +27,7 @@ "@igloo-ui/tokens": "^2.1.0", "@igloo-ui/dropdown": "^1.8.2", "@igloo-ui/list": "^0.7.3", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "devDependencies": { diff --git a/packages/Alert/package.json b/packages/Alert/package.json index 9f90ff5a..36b4b559 100644 --- a/packages/Alert/package.json +++ b/packages/Alert/package.json @@ -30,7 +30,7 @@ "@igloo-ui/icons": "^1.12.2", "@igloo-ui/tokens": "^2.1.0", "@hopper-ui/icons-react16": "1.2.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "devDependencies": { diff --git a/packages/AreaChart/package.json b/packages/AreaChart/package.json index e555eaff..e475e407 100644 --- a/packages/AreaChart/package.json +++ b/packages/AreaChart/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "luxon": "^3.4.4", "recharts": "^2.12.0" diff --git a/packages/Avatar/package.json b/packages/Avatar/package.json index 54524bb9..9088716d 100644 --- a/packages/Avatar/package.json +++ b/packages/Avatar/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/BarChart/package.json b/packages/BarChart/package.json index 76fdf1ce..e34902ec 100644 --- a/packages/BarChart/package.json +++ b/packages/BarChart/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "framer-motion": "^6.5.1" }, diff --git a/packages/Breadcrumb/package.json b/packages/Breadcrumb/package.json index 0524919d..14c8ee3c 100644 --- a/packages/Breadcrumb/package.json +++ b/packages/Breadcrumb/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "@igloo-ui/icons": "^1.12.2" }, diff --git a/packages/Button/package.json b/packages/Button/package.json index 193c3b4e..8fb73bd0 100644 --- a/packages/Button/package.json +++ b/packages/Button/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "devDependencies": { diff --git a/packages/Button/src/button.scss b/packages/Button/src/button.scss index fd604e92..7ae59d8d 100644 --- a/packages/Button/src/button.scss +++ b/packages/Button/src/button.scss @@ -143,7 +143,7 @@ --ids-btn-border-primary: transparent; --ids-btn-border-primary-active: var(--hop-primary-border-active); --ids-btn-background-primary: var(--hop-primary-surface-strong); - --ids-btn-background-primary-hover: var(--hop-primary-surface-hover); + --ids-btn-background-primary-hover: var(--hop-primary-surface-strong-hover); --ids-btn-background-primary-disabled: var(--hop-neutral-surface-disabled); --ids-btn-background-primary-active: var(--hop-primary-surface-active); diff --git a/packages/ButtonGroup/package.json b/packages/ButtonGroup/package.json index 4ab0ee29..5e10ebd0 100644 --- a/packages/ButtonGroup/package.json +++ b/packages/ButtonGroup/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/ButtonGroup/src/button-group.scss b/packages/ButtonGroup/src/button-group.scss index 8ea834bd..e33a3391 100644 --- a/packages/ButtonGroup/src/button-group.scss +++ b/packages/ButtonGroup/src/button-group.scss @@ -92,8 +92,8 @@ /* Selected */ --ids-button-group-item-border-selected: transparent; - --ids-button-group-item-text-selected: var(--hop-neutral-text-active); - --ids-button-group-item-background-selected: var(--hop-neutral-surface-active); + --ids-button-group-item-text-selected: var(--hop-neutral-text-selected); + --ids-button-group-item-background-selected: var(--hop-neutral-surface-selected); --ids-button-group-item-index-selected: 20; /* Disabled */ diff --git a/packages/Card/package.json b/packages/Card/package.json index a461ce09..e43d44ee 100644 --- a/packages/Card/package.json +++ b/packages/Card/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/Carousel/package.json b/packages/Carousel/package.json index ec36716b..9bc1636f 100644 --- a/packages/Carousel/package.json +++ b/packages/Carousel/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "devDependencies": { diff --git a/packages/Carousel/src/carousel.scss b/packages/Carousel/src/carousel.scss index abc5131d..e9b1f21b 100644 --- a/packages/Carousel/src/carousel.scss +++ b/packages/Carousel/src/carousel.scss @@ -55,8 +55,8 @@ --ids-carousel-bullet-color-hover: var(--hop-neutral-surface-weak-hover); /* Active */ - --ids-carousel-bullet-color-active: var(--hop-neutral-surface-active); - --ids-carousel-bullet-color-active-hover: var(--hop-neutral-surface-active); + --ids-carousel-bullet-color-active: var(--hop-neutral-surface-selected); + --ids-carousel-bullet-color-active-hover: var(--hop-neutral-surface-selected); /* Needed to add a 0.1px blur to fix a bug where chrome would have a lingering blue line when focusing in and out */ diff --git a/packages/Checkbox/package.json b/packages/Checkbox/package.json index 1d33996e..c1cbb1f1 100644 --- a/packages/Checkbox/package.json +++ b/packages/Checkbox/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/Checkbox/src/checkbox.scss b/packages/Checkbox/src/checkbox.scss index 215a3a12..980a2c80 100644 --- a/packages/Checkbox/src/checkbox.scss +++ b/packages/Checkbox/src/checkbox.scss @@ -54,7 +54,7 @@ --ids-checkbox-focus: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.2188rem var(--hop-primary-border-focus); --ids-checkbox-size: 1rem; --ids-checkbox-radius: var(--hop-shape-rounded-sm); - --ids-checkbox-check: var(--hop-neutral-icon-active); + --ids-checkbox-check: var(--hop-neutral-icon-selected); --ids-checkbox-margin: var(--hop-space-inline-sm); --ids-checkbox-top-space: 0.15rem; --ids-checkbox-box-sizing: border-box; @@ -63,17 +63,17 @@ --ids-checkbox-background: var(--hop-neutral-surface); --ids-checkbox-background-hover: var(--hop-neutral-surface-hover); --ids-checkbox-background-disabled: var(--hop-neutral-surface-disabled); - --ids-checkbox-background-checked: var(--hop-neutral-surface-active); + --ids-checkbox-background-checked: var(--hop-neutral-surface-selected); --ids-checkbox-background-checked-disabled: var(--hop-neutral-surface-disabled); --ids-checkbox-border: var(--hop-neutral-border); --ids-checkbox-border-hover: var(--hop-neutral-border-hover); - --ids-checkbox-border-checked: var(--hop-neutral-border-active); - --ids-checkbox-border-checked-hover: var(--hop-neutral-border-active); + --ids-checkbox-border-checked: var(--hop-neutral-border-selected); + --ids-checkbox-border-checked-hover: var(--hop-neutral-border-selected); --ids-checkbox-border-disabled: var(--hop-neutral-border-disabled); --ids-checkbox-one-px: 0.0625rem; --ids-checkbox-check-size: 1rem; --ids-checkbox-check-color-hover: transparent; - --ids-checkbox-check-color-selected: var(--hop-neutral-icon-active); + --ids-checkbox-check-color-selected: var(--hop-neutral-icon-selected); --ids-checkbox-check-color-default: transparent; --ids-checkbox-check-color-disabled: var(--hop-neutral-icon-disabled); @@ -82,7 +82,7 @@ --ids-checkbox-completion-border-disabled: var(--hop-neutral-border-disabled); --ids-checkbox-completion-check-color-disabled: var(--hop-neutral-icon-disabled); --ids-checkbox-completion-check-color-hover: transparent; - --ids-checkbox-completion-check-color-selected: var(--hop-neutral-icon-active); + --ids-checkbox-completion-check-color-selected: var(--hop-neutral-icon-selected); --ids-checkbox-completion-check-color-default: transparent; } @@ -109,7 +109,7 @@ width: var(--ids-checkbox-one-px); overflow: hidden; } - + /* Checkbox label */ .ids-checkbox__label { align-items: flex-start; diff --git a/packages/Color/package.json b/packages/Color/package.json index b7fac6d6..0b92d240 100644 --- a/packages/Color/package.json +++ b/packages/Color/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/ColorPicker/package.json b/packages/ColorPicker/package.json index 4614e037..2d1ec9ba 100644 --- a/packages/ColorPicker/package.json +++ b/packages/ColorPicker/package.json @@ -28,7 +28,7 @@ "@igloo-ui/color": "^0.5.1", "@igloo-ui/dropdown": "^1.8.2", "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "react-aria": "^3.32.1", "react-aria-components": "^1.1.1", diff --git a/packages/ColorPicker/src/color-picker.scss b/packages/ColorPicker/src/color-picker.scss index 46b1ee17..2e31e78d 100644 --- a/packages/ColorPicker/src/color-picker.scss +++ b/packages/ColorPicker/src/color-picker.scss @@ -39,7 +39,7 @@ --ids-color-picker-btn-background-disabled: var(--hop-neutral-surface-disabled); --ids-color-picker-btn-border-color: var(--hop-neutral-border); --ids-color-picker-btn-border-color-hover: var(--hop-neutral-border-hover); - --ids-color-picker-btn-border-color-active: var(--hop-neutral-border-active); + --ids-color-picker-btn-border-color-active: var(--hop-neutral-border-selected); --ids-color-picker-btn-border-color-disabled: var(--hop-neutral-border-disabled); --ids-color-picker-btn-border-radius: var(--hop-shape-rounded-md); --ids-color-picker-btn-border-size: 0.09rem; diff --git a/packages/Combobox/package.json b/packages/Combobox/package.json index c3641d7d..60a95273 100644 --- a/packages/Combobox/package.json +++ b/packages/Combobox/package.json @@ -32,7 +32,7 @@ "@igloo-ui/input": "^2.2.5", "@igloo-ui/tokens": "^2.1.0", "@hopper-ui/icons-react16": "1.2.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "@igloo-ui/tooltip": "^3.5.3", "classnames": "^2.3.2" }, diff --git a/packages/Combobox/src/combobox.scss b/packages/Combobox/src/combobox.scss index 505f943c..14b0cdc2 100644 --- a/packages/Combobox/src/combobox.scss +++ b/packages/Combobox/src/combobox.scss @@ -74,7 +74,7 @@ /* Active */ --ids-combobox-background-active: var(--hop-neutral-surface); - --ids-combobox-border-color-active: var(--hop-neutral-border-active); + --ids-combobox-border-color-active: var(--hop-neutral-border-selected); --ids-combobox-search-border-color-active: var(--hop-primary-border-focus); /* Focus */ diff --git a/packages/Datepicker/package.json b/packages/Datepicker/package.json index 2976f7df..45e46331 100644 --- a/packages/Datepicker/package.json +++ b/packages/Datepicker/package.json @@ -31,7 +31,7 @@ "@igloo-ui/icons": "^1.12.2", "@igloo-ui/input": "^2.2.5", "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "@internationalized/date": "^3.5.2", "classnames": "^2.3.2", "luxon": "^3.4.4", diff --git a/packages/Datepicker/src/datepicker.scss b/packages/Datepicker/src/datepicker.scss index 24402218..2f083294 100644 --- a/packages/Datepicker/src/datepicker.scss +++ b/packages/Datepicker/src/datepicker.scss @@ -80,8 +80,8 @@ --ids-datepicker-content-background-hover: var(--hop-neutral-surface-hover); --ids-datepicker-content-color: var(--hop-neutral-text); --ids-datepicker-content-color-hover: var(--hop-neutral-text-hover); - --ids-datepicker-content-background-selected: var(--hop-neutral-surface-active); - --ids-datepicker-content-color-selected: var(--hop-neutral-text-active); + --ids-datepicker-content-background-selected: var(--hop-neutral-surface-selected); + --ids-datepicker-content-color-selected: var(--hop-neutral-text-selected); --ids-datepicker-content-line-height: 2.5rem; --ids-datepicker-margin-offset: 0; --ids-datepicker-content-focus: var(--hop-primary-border-focus) solid 0.125rem; diff --git a/packages/Disclosure/package.json b/packages/Disclosure/package.json index 80df2601..4cc46618 100644 --- a/packages/Disclosure/package.json +++ b/packages/Disclosure/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "framer-motion": "^6.5.1", "react-aria": "^3.32.1", diff --git a/packages/Dropdown/package.json b/packages/Dropdown/package.json index 3b51e1c7..ab81daf7 100644 --- a/packages/Dropdown/package.json +++ b/packages/Dropdown/package.json @@ -26,7 +26,7 @@ "dependencies": { "@floating-ui/react": "^0.24.8", "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/Ellipsis/package.json b/packages/Ellipsis/package.json index da8415ef..e41879bd 100644 --- a/packages/Ellipsis/package.json +++ b/packages/Ellipsis/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/Filter/package.json b/packages/Filter/package.json index a949f3db..18159c63 100644 --- a/packages/Filter/package.json +++ b/packages/Filter/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/Filter/src/filter.scss b/packages/Filter/src/filter.scss index 5db543cd..978883fa 100644 --- a/packages/Filter/src/filter.scss +++ b/packages/Filter/src/filter.scss @@ -58,12 +58,12 @@ --ids-filter-color-hover: var(--hop-neutral-text-hover); /* Selected */ - --ids-filter-background-selected: var(--hop-neutral-surface-active); - --ids-filter-border-color-selected: var(--hop-neutral-border-active); - --ids-filter-color-selected: var(--hop-neutral-text-active); + --ids-filter-background-selected: var(--hop-neutral-surface-selected); + --ids-filter-border-color-selected: var(--hop-neutral-border-selected); + --ids-filter-color-selected: var(--hop-neutral-text-selected); /* Selected Hover */ - --ids-filter-background-selected-hover: var(--hop-neutral-surface-active); + --ids-filter-background-selected-hover: var(--hop-neutral-surface-selected); /* Disabled */ --ids-filter-background-disabled: var(--hop-neutral-surface-disabled); diff --git a/packages/FormGroup/package.json b/packages/FormGroup/package.json index 30f82a82..665978cc 100644 --- a/packages/FormGroup/package.json +++ b/packages/FormGroup/package.json @@ -26,7 +26,7 @@ "dependencies": { "@igloo-ui/tokens": "^2.1.0", "@igloo-ui/icons": "^1.12.2", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "@igloo-ui/helper-text": "^0.3.3" }, diff --git a/packages/HelperText/package.json b/packages/HelperText/package.json index eedd779a..630a1287 100644 --- a/packages/HelperText/package.json +++ b/packages/HelperText/package.json @@ -26,7 +26,7 @@ "dependencies": { "@igloo-ui/icons": "^1.12.2", "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/Hyperlink/package.json b/packages/Hyperlink/package.json index b0b166e0..bc327846 100644 --- a/packages/Hyperlink/package.json +++ b/packages/Hyperlink/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "@react-aria/link": "^3.6.5", "classnames": "^2.3.2" }, diff --git a/packages/IconButton/package.json b/packages/IconButton/package.json index f43ed725..76edeab0 100644 --- a/packages/IconButton/package.json +++ b/packages/IconButton/package.json @@ -26,7 +26,7 @@ "dependencies": { "@igloo-ui/button": "^0.8.6", "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "devDependencies": { diff --git a/packages/Input/package.json b/packages/Input/package.json index c212123c..743b6563 100644 --- a/packages/Input/package.json +++ b/packages/Input/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "graphemer": "^1.4.0" }, diff --git a/packages/Input/src/input.scss b/packages/Input/src/input.scss index b194ae4f..cc994dcd 100644 --- a/packages/Input/src/input.scss +++ b/packages/Input/src/input.scss @@ -107,7 +107,7 @@ --ids-input-border-color-focus: var(--hop-primary-border-focus); /* Active */ - --ids-input-border-color-active: var(--hop-primary-border-active); + --ids-input-border-color-active: var(--hop-primary-border-selected); /* disabled */ --ids-input-color-disabled: var(--hop-neutral-text-disabled); diff --git a/packages/List/package.json b/packages/List/package.json index 49a8145c..1255ec80 100644 --- a/packages/List/package.json +++ b/packages/List/package.json @@ -28,7 +28,7 @@ "@igloo-ui/icons": "^1.12.2", "@igloo-ui/tokens": "^2.1.0", "@hopper-ui/icons-react16": "1.2.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "devDependencies": { diff --git a/packages/List/src/list-item.scss b/packages/List/src/list-item.scss index dc12fbbe..d708411d 100644 --- a/packages/List/src/list-item.scss +++ b/packages/List/src/list-item.scss @@ -134,23 +134,23 @@ /* Checkbox */ --ids-list-item-checkbox-size: 1rem; --ids-list-item-checkbox-radius: var(--hop-shape-rounded-sm); - --ids-list-item-checkbox-check: var(--hop-neutral-icon-active); + --ids-list-item-checkbox-check: var(--hop-neutral-icon-selected); --ids-list-item-checkbox-margin: 0.15rem var(--hop-space-inline-sm) 0 0; --ids-list-item-checkbox-box-sizing: border-box; --ids-list-item-checkbox-background: var(--hop-neutral-surface); --ids-list-item-checkbox-background-hover: var(--hop-neutral-surface-hover); --ids-list-item-checkbox-background-disabled: var(--hop-neutral-surface-disabled); - --ids-list-item-checkbox-background-checked: var(--hop-neutral-surface-active); + --ids-list-item-checkbox-background-checked: var(--hop-neutral-surface-selected); --ids-list-item-checkbox-background-checked-disabled: var(--hop-neutral-surface-disabled); --ids-list-item-checkbox-border: var(--hop-neutral-border); --ids-list-item-checkbox-border-hover: var(--hop-neutral-border-hover); - --ids-list-item-checkbox-border-checked: var(--hop-neutral-border-active); - --ids-list-item-checkbox-border-checked-hover: var(--hop-neutral-border-active); + --ids-list-item-checkbox-border-checked: var(--hop-neutral-border-selected); + --ids-list-item-checkbox-border-checked-hover: var(--hop-neutral-border-selected); --ids-list-item-checkbox-border-disabled: var(--hop-neutral-border-disabled); --ids-list-item-checkbox-one-px: 0.0625rem; --ids-list-item-checkbox-check-size: 1rem; --ids-list-item-checkbox-check-color-hover: transparent; - --ids-list-item-checkbox-check-color-selected: var(--hop-neutral-icon-active); + --ids-list-item-checkbox-check-color-selected: var(--hop-neutral-icon-selected); --ids-list-item-checkbox-check-color-default: transparent; --ids-list-item-checkbox-check-color-disabled: var(--hop-neutral-icon-disabled); diff --git a/packages/Metric/package.json b/packages/Metric/package.json index bc53637b..5cf60360 100644 --- a/packages/Metric/package.json +++ b/packages/Metric/package.json @@ -28,7 +28,7 @@ "@igloo-ui/icons": "^1.12.2", "@igloo-ui/tokens": "^2.1.0", "@igloo-ui/tooltip": "^3.5.3", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "react-aria": "^3.32.1" }, diff --git a/packages/Metric/src/metric.scss b/packages/Metric/src/metric.scss index 1b6cbda6..7187ea99 100644 --- a/packages/Metric/src/metric.scss +++ b/packages/Metric/src/metric.scss @@ -98,8 +98,8 @@ --ids-metric-visual-positive-color: #0C796B; /* Data Viz token */ --ids-metric-visual-negative-background: #FDE6E5; /* Data Viz token */ --ids-metric-visual-negative-color: #CB2E31; /* Data Viz token */ - --ids-metric-visual-selected-background: var(--hop-neutral-surface-active); - --ids-metric-visual-selected-color: var(--hop-neutral-text-active); + --ids-metric-visual-selected-background: var(--hop-neutral-surface-selected); + --ids-metric-visual-selected-color: var(--hop-neutral-text-selected); --ids-metric-visual-margin-right: var(--hop-space-inline-md); /* Hover */ @@ -114,8 +114,8 @@ /* Selected */ --ids-metric-selected-shadow: var(--hop-elevation-raised); --ids-metric-selected-border-width: 0.1rem; /* 1.5px generates too small of a border. Usually 0.8px */ - --ids-metric-selected-border-color: var(--hop-neutral-border-active); - --ids-metric-selected-hover-border-color: var(--hop-neutral-border-active); + --ids-metric-selected-border-color: var(--hop-neutral-border-selected); + --ids-metric-selected-hover-border-color: var(--hop-neutral-border-selected); --ids-metric-selected-hover-background: var(--hop-neutral-surface-hover); --ids-metric-selected-hover-shadow: var(--hop-elevation-lifted); --ids-metric-selected-focus-shadow: var(--ids-metric-focus-shadow); @@ -141,10 +141,10 @@ --ids-metric-sub-metric-hover-border-color: var(--hop-neutral-border-hover); /* Sub Metric Selected */ - --ids-metric-sub-metric-selected-border-color: var(--hop-neutral-border-active); + --ids-metric-sub-metric-selected-border-color: var(--hop-neutral-border-selected); --ids-metric-sub-metric-selected-left-border-color: transparent; --ids-metric-sub-metric-selected-left-border-width: 0; - --ids-metric-sub-metric-selected-hover-border-color: var(--hop-neutral-border-active); + --ids-metric-sub-metric-selected-hover-border-color: var(--hop-neutral-border-selected); } .ids-metric { diff --git a/packages/Modal/package.json b/packages/Modal/package.json index a91d0611..804ab71e 100644 --- a/packages/Modal/package.json +++ b/packages/Modal/package.json @@ -30,7 +30,7 @@ "@igloo-ui/icons": "^1.12.2", "@igloo-ui/tokens": "^2.1.0", "@hopper-ui/icons-react16": "1.2.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "@igloo-ui/carousel": "^0.3.4", "@types/react-dom": "18.0.11", "classnames": "^2.3.2", diff --git a/packages/OptionButton/package.json b/packages/OptionButton/package.json index 6ef2457e..75f2b63e 100644 --- a/packages/OptionButton/package.json +++ b/packages/OptionButton/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2" }, "browserslist": [ diff --git a/packages/OptionButton/src/option-button.scss b/packages/OptionButton/src/option-button.scss index d426a2f6..60d5999b 100644 --- a/packages/OptionButton/src/option-button.scss +++ b/packages/OptionButton/src/option-button.scss @@ -71,9 +71,9 @@ /* Checked */ --ids-option-button-checked-box-shadow: none; - --ids-option-button-checked-border-color: var(--hop-neutral-border-active); - --ids-option-button-checked-background-color: var(--hop-neutral-surface-weak-active); - --ids-option-button-checked-outline: 0.125rem solid var(--hop-neutral-border-active); + --ids-option-button-checked-border-color: var(--hop-neutral-border-selected); + --ids-option-button-checked-background-color: var(--hop-neutral-surface-weak-selected); + --ids-option-button-checked-outline: 0.125rem solid var(--hop-neutral-border-selected); --ids-option-button-checked-outline-offset: -0.125rem; /* Disabled */ diff --git a/packages/Pager/package.json b/packages/Pager/package.json index 2f964bd8..145db991 100644 --- a/packages/Pager/package.json +++ b/packages/Pager/package.json @@ -26,7 +26,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "@igloo-ui/icons": "^1.12.2" }, diff --git a/packages/PieChart/package.json b/packages/PieChart/package.json index 42a8856f..11048bc5 100644 --- a/packages/PieChart/package.json +++ b/packages/PieChart/package.json @@ -25,7 +25,7 @@ }, "dependencies": { "@igloo-ui/tokens": "^2.1.0", - "@hopper-ui/tokens": "^3.5.1", + "@hopper-ui/tokens": "^4.0.0", "classnames": "^2.3.2", "recharts": "^2.9.2" }, diff --git a/packages/PieChart/src/PieChart.stories.tsx b/packages/PieChart/src/PieChart.stories.tsx index 637abb35..9fa9d1dd 100644 --- a/packages/PieChart/src/PieChart.stories.tsx +++ b/packages/PieChart/src/PieChart.stories.tsx @@ -32,7 +32,7 @@ const mockData = [ const mockDataWL = [ { id: 'positive', percentage: 25, color: "var(--hop-status-positive-surface-strong)" }, { id: 'negative', percentage: 10, color: "var(--hop-status-negative-surface-strong)" }, - { id: 'skipped', percentage: 40, color: "var(--hop-upsell-surface-active)" }, + { id: 'skipped', percentage: 40, color: "var(--hop-upsell-surface-selected)" }, { id: 'unanswered', percentage: 25, color: "var(--hop-neutral-surface-disabled)" }, ]; @@ -44,7 +44,7 @@ const getMockData = (brand: string) => { export const Overview: Story = { render: (args, { globals: { brand } }) => { return ( -
+