diff --git a/.changeset/real-moose-lick.md b/.changeset/real-moose-lick.md new file mode 100644 index 000000000..7ee8036d4 --- /dev/null +++ b/.changeset/real-moose-lick.md @@ -0,0 +1,16 @@ +--- +"@igloo-ui/area-chart": patch +"@igloo-ui/breadcrumb": patch +"@igloo-ui/button": patch +"@igloo-ui/checkbox": patch +"@igloo-ui/combobox": patch +"@igloo-ui/datepicker": patch +"@igloo-ui/disclosure": patch +"@igloo-ui/dropdown": patch +"@igloo-ui/helper-text": patch +"@igloo-ui/select": patch +"@igloo-ui/text-editor": patch +"@igloo-ui/toaster": patch +--- + +Restore CSS variables accidentally removed during cleanup diff --git a/packages/AreaChart/src/chart-tooltip.scss b/packages/AreaChart/src/chart-tooltip.scss index a3d05f05f..70d337d2d 100644 --- a/packages/AreaChart/src/chart-tooltip.scss +++ b/packages/AreaChart/src/chart-tooltip.scss @@ -28,13 +28,10 @@ --ids-chart-tooltip-score-text-font-weight: var(--hop-body-sm-font-weight); /* Circle */ + --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category2)); --ids-chart-tooltip-circle-secondary-background: var(--hop-dataviz-categorical-2colorgroup-option4-category1); --ids-chart-tooltip-circle-margin-right: var(--hop-space-inline-sm); --ids-chart-tooltip-circle-size: 0.75rem; - - .ids-tooltip-score__circle { - --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category2)); - } } @keyframes fade-in { diff --git a/packages/Breadcrumb/src/breadcrumb.scss b/packages/Breadcrumb/src/breadcrumb.scss index aee8b0d19..baa4a91c3 100644 --- a/packages/Breadcrumb/src/breadcrumb.scss +++ b/packages/Breadcrumb/src/breadcrumb.scss @@ -20,6 +20,7 @@ --ids-breadcrumb-link-color: var(--hop-neutral-text-weak); --ids-breadcrumb-link-color-hover: var(--hop-neutral-text); /* Will be var(--hop-neutral-text-weak-hover) */ --ids-breadcrumb-link-border: none; + --ids-breadcrumb-link-border-color-hover: #{tokens.$grey-600}; --ids-breadcrumb-link-text-decoration-hover: underline; --ids-breadcrumb-link-focus: 0 0 0 0.12rem var(--hop-neutral-surface), 0 0 0 0.219rem var(--hop-primary-border-focus); --ids-breadcrumb-link-border-radius-focus: var(--hop-shape-rounded-md); diff --git a/packages/Button/src/button.scss b/packages/Button/src/button.scss index 153c63bc0..4c0d6aff4 100644 --- a/packages/Button/src/button.scss +++ b/packages/Button/src/button.scss @@ -52,9 +52,9 @@ /* Premium */ --ids-btn-text-premium: var(--hop-upsell-text); --ids-btn-text-premium-disabled: var(--hop-neutral-text-disabled); + --ids-btn-text-premium-active: var(--hop-upsell-text-selected); --ids-btn-text-premium-hover: var(--hop-upsell-text-hover); --ids-btn-text-premium-pressed: var(--hop-upsell-text-press); - --ids-btn-text-premium-active: var(--hop-upsell-text-selected); --ids-btn-border-premium-active: var(--hop-upsell-border-selected); --ids-btn-background-premium: var(--hop-upsell-surface); --ids-btn-background-premium-hover: var(--hop-upsell-surface-hover); @@ -64,6 +64,7 @@ /* Danger */ --ids-btn-text-danger: var(--hop-danger-text-strong); + --ids-btn-text-danger-disabled: #{tokens.$samoyed}; --ids-btn-text-danger-active: var(--hop-danger-text-selected); --ids-btn-border-danger-active: var(--hop-danger-border-selected); --ids-btn-background-danger: var(--hop-danger-surface-strong); diff --git a/packages/Checkbox/src/checkbox.scss b/packages/Checkbox/src/checkbox.scss index 8554a2f4b..80e7907db 100644 --- a/packages/Checkbox/src/checkbox.scss +++ b/packages/Checkbox/src/checkbox.scss @@ -7,11 +7,11 @@ @layer igloo { :root { --ids-checkbox-font-family: #{tokens.$primary-font-family}; - --ids-checkbox-font-size: var(--hop-body-sm-font-size); --ids-checkbox-font-weight: var(--hop-body-sm-font-weight); - --ids-checkbox-line-height: var(--hop-body-sm-line-height); + --ids-checkbox-font-size: var(--hop-body-sm-font-size); --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-line-height: var(--hop-body-sm-line-height); --ids-checkbox-radius: var(--hop-shape-rounded-sm); --ids-checkbox-check: var(--hop-neutral-icon-selected); --ids-checkbox-margin: var(--hop-space-inline-sm); @@ -42,6 +42,8 @@ /* Completion */ --ids-checkbox-completion-size: 1.5rem; + --ids-checkbox-completion-radius: 50%; + --ids-checkbox-one-px: 0.1rem; --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; diff --git a/packages/Combobox/src/ComboboxInput.tsx b/packages/Combobox/src/ComboboxInput.tsx index 5519f96ee..88ae98460 100644 --- a/packages/Combobox/src/ComboboxInput.tsx +++ b/packages/Combobox/src/ComboboxInput.tsx @@ -64,8 +64,6 @@ const ComboboxInput: React.FunctionComponent = ({ ...rest }: ComboboxInputProps) => { const chevronClass = "ids-combobox-input__chevron"; - const chevronUpIcon = - const chevronDownIcon = const handleChange = ({ target @@ -142,9 +140,9 @@ const ComboboxInput: React.FunctionComponent = ({ clearBtn ))} {isOpen ? ( - chevronUpIcon + ) : ( - chevronDownIcon + )} diff --git a/packages/Datepicker/src/datepicker.scss b/packages/Datepicker/src/datepicker.scss index 479bb947d..e4d5af9c5 100644 --- a/packages/Datepicker/src/datepicker.scss +++ b/packages/Datepicker/src/datepicker.scss @@ -9,6 +9,8 @@ // Calculation of the width of the datepicker to obtain a square cell --ids-datepicker-cell-size: 2.5rem; --ids-datepicker-cell-number: 7; + --ids-datepicker-cell-border: .2rem; + --ids-datepicker-cell-empty-border: calc(6 * .05rem); /* Default */ --ids-datepicker-font-family: var(--hop-body-sm-font-family); diff --git a/packages/Disclosure/src/disclosure.scss b/packages/Disclosure/src/disclosure.scss index 62c4160e7..15dd2404c 100644 --- a/packages/Disclosure/src/disclosure.scss +++ b/packages/Disclosure/src/disclosure.scss @@ -39,6 +39,8 @@ /* Content */ --ids-disclosure-content-border: 0.0625rem solid var(--hop-neutral-border-weak); + /* === Low Contrast === */ + /* Header/Button */ --ids-disclosure-low-contrast-header-padding: 0; --ids-disclosure-low-contrast-header-icon-margin: 0 var(--hop-space-inline-xs) 0 0; diff --git a/packages/Dropdown/src/dropdown.scss b/packages/Dropdown/src/dropdown.scss index 44e01a998..57a4085e3 100644 --- a/packages/Dropdown/src/dropdown.scss +++ b/packages/Dropdown/src/dropdown.scss @@ -14,12 +14,16 @@ --ids-dropdown-background: var(--hop-neutral-surface); --ids-dropdown-border: 0.0625rem solid var(--hop-neutral-border-weak); --ids-dropdown-border-radius: var(--hop-shape-rounded-md); + --ids-dropdown-zindex: #{tokens.$z-index-100}; --ids-dropdown-box-shadow: var(--hop-elevation-lifted); --ids-dropdown-padding: 0; --ids-dropdown-padding-small: var(--hop-space-inset-md); --ids-dropdown-padding-medium: var(--hop-space-inset-lg); --ids-dropdown-padding-large: var(--hop-space-inset-xl); + /* Click Handler */ + --ids-dropdown-zindex-click-handler: #{tokens.$z-index-90}; + /* Footer */ --ids-dropdown-footer-background: var(--hop-neutral-surface); --ids-dropdown-footer-background-hover: var(--hop-neutral-surface-hover); diff --git a/packages/HelperText/src/helper-text.scss b/packages/HelperText/src/helper-text.scss index 57a36f8c0..78200da2c 100644 --- a/packages/HelperText/src/helper-text.scss +++ b/packages/HelperText/src/helper-text.scss @@ -6,6 +6,7 @@ @layer igloo { :root { + /* Default */ --ids-helper-font-family: var(--hop-body-xs-font-family); --ids-helper-font-size: var(--hop-body-xs-font-size); --ids-helper-font-weight: var(--hop-body-xs-font-weight); diff --git a/packages/Select/src/select-input.scss b/packages/Select/src/select-input.scss index cfa58bd3a..a6fc47309 100644 --- a/packages/Select/src/select-input.scss +++ b/packages/Select/src/select-input.scss @@ -48,7 +48,6 @@ flex: 0 0 auto; margin-left: auto; padding: var(--ids-select-input-actions-padding); - } .ids-select__input-clear { diff --git a/packages/Select/src/select-option.scss b/packages/Select/src/select-option.scss index 0764cc74e..0c36734a3 100644 --- a/packages/Select/src/select-option.scss +++ b/packages/Select/src/select-option.scss @@ -7,6 +7,9 @@ /* Focused */ --ids-select-option-background-focused: var(--hop-neutral-surface-hover); + /* Selected */ + --ids-select-option-background-selected: none; + /* Disabled */ --ids-select-option-color-disabled: var(--hop-neutral-text-disabled); diff --git a/packages/Select/src/select-value.scss b/packages/Select/src/select-value.scss index ed89ab1a7..91d20fc4f 100644 --- a/packages/Select/src/select-value.scss +++ b/packages/Select/src/select-value.scss @@ -8,6 +8,9 @@ /* Compact **/ --ids-select-value-padding-compact: calc(var(--hop-space-stack-sm) - var(--ids-select-border-width) * 2) var(--hop-space-inline-md); + /* Disabled */ + --ids-select-value-color-disabled: #{tokens.$grey-500}; + /* Placeholder */ --ids-select-value-color-placeholder: var(--hop-neutral-text-weakest); diff --git a/packages/Select/src/select.scss b/packages/Select/src/select.scss index 7f7224899..f589f3bd0 100644 --- a/packages/Select/src/select.scss +++ b/packages/Select/src/select.scss @@ -16,6 +16,7 @@ --ids-select-background: var(--hop-neutral-surface); --ids-select-border-color: var(--hop-neutral-border); --ids-select-border-radius: var(--hop-shape-rounded-md); + --ids-select-number-of-option-to-display: 4; --ids-select-border-width: 0.0625rem; --ids-select-height: 2.5rem; diff --git a/packages/TextEditor/src/plugins/floating-link-editor.scss b/packages/TextEditor/src/plugins/floating-link-editor.scss index b1f0aa426..0f69de5df 100644 --- a/packages/TextEditor/src/plugins/floating-link-editor.scss +++ b/packages/TextEditor/src/plugins/floating-link-editor.scss @@ -11,6 +11,8 @@ --ids-link-editor-border-color: var(--hop-neutral-border-weak); --ids-link-editor-border-radius: var(--hop-shape-rounded-md); --ids-link-editor-line-height: var(--hop-body-md-line-height); + --ids-link-editor-z-index: 999; + --ids-link-editor-width: 100%; --ids-link-editor-text: var(--hop-neutral-text); --ids-link-editor-shadow: var(--hop-elevation-lifted); --ids-link-editor-button-margin: var(--hop-space-inline-sm); diff --git a/packages/Toaster/src/toaster.scss b/packages/Toaster/src/toaster.scss index b8ac0f116..36067ade5 100644 --- a/packages/Toaster/src/toaster.scss +++ b/packages/Toaster/src/toaster.scss @@ -6,6 +6,7 @@ @layer igloo { :root { + /* Default */ --ids-toaster-font-family: var(--hop-body-md-medium-font-family); --ids-toaster-font-size: var(--hop-body-md-medium-font-size); --ids-toaster-font-weight: var(--hop-body-md-medium-font-weight);