From a584c89f4cd6870d636915454bb2cfb318553f02 Mon Sep 17 00:00:00 2001
From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com>
Date: Tue, 22 Jul 2025 16:13:51 -0400
Subject: [PATCH 1/3] Restore missed tokens

---
 packages/AreaChart/src/chart-tooltip.scss                 | 5 +----
 packages/Breadcrumb/src/breadcrumb.scss                   | 1 +
 packages/Button/src/button.scss                           | 3 ++-
 packages/Checkbox/src/checkbox.scss                       | 6 ++++--
 packages/Color/src/color.scss                             | 1 +
 packages/Combobox/src/ComboboxInput.tsx                   | 6 ++----
 packages/Datepicker/src/datepicker.scss                   | 2 ++
 packages/Disclosure/src/disclosure.scss                   | 2 ++
 packages/Dropdown/src/dropdown.scss                       | 4 ++++
 packages/HelperText/src/helper-text.scss                  | 1 +
 packages/Select/src/select-input.scss                     | 1 -
 packages/Select/src/select-option.scss                    | 3 +++
 packages/Select/src/select-value.scss                     | 3 +++
 packages/Select/src/select.scss                           | 1 +
 packages/TextEditor/src/plugins/floating-link-editor.scss | 2 ++
 packages/Toaster/src/toaster.scss                         | 1 +
 16 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/AreaChart/src/chart-tooltip.scss b/packages/AreaChart/src/chart-tooltip.scss
index a3d05f05..70d337d2 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 aee8b0d1..baa4a91c 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 153c63bc..4c0d6aff 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 8554a2f4..80e7907d 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/Color/src/color.scss b/packages/Color/src/color.scss
index fb88abf0..ca560dcc 100644
--- a/packages/Color/src/color.scss
+++ b/packages/Color/src/color.scss
@@ -6,6 +6,7 @@
 
 @layer igloo {
     :root {
+        --ids-color-background: var(--ids-color-background);
         --ids-color-border-radius: var(--hop-shape-circle);
         --ids-color-border-radius-xs: var(--hop-shape-circle);
         --ids-color-border-radius-square: var(--hop-shape-rounded-sm);
diff --git a/packages/Combobox/src/ComboboxInput.tsx b/packages/Combobox/src/ComboboxInput.tsx
index 5519f96e..88ae9846 100644
--- a/packages/Combobox/src/ComboboxInput.tsx
+++ b/packages/Combobox/src/ComboboxInput.tsx
@@ -64,8 +64,6 @@ const ComboboxInput: React.FunctionComponent<ComboboxInputProps> = ({
     ...rest
 }: ComboboxInputProps) => {
     const chevronClass = "ids-combobox-input__chevron";
-    const chevronUpIcon = <AngleUpIcon className={chevronClass} size="sm" />
-    const chevronDownIcon = <AngleDownIcon className={chevronClass} size="sm" />
 
     const handleChange = ({
         target
@@ -142,9 +140,9 @@ const ComboboxInput: React.FunctionComponent<ComboboxInputProps> = ({
               clearBtn
           ))}
                 {isOpen ? (
-                    chevronUpIcon
+                    <AngleUpIcon className={chevronClass} size="sm" />
                 ) : (
-                    chevronDownIcon
+                    <AngleDownIcon className={chevronClass} size="sm" />
                 )}
             </div>
         </div>
diff --git a/packages/Datepicker/src/datepicker.scss b/packages/Datepicker/src/datepicker.scss
index 479bb947..e4d5af9c 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 62c4160e..15dd2404 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 44e01a99..57a4085e 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 57a36f8c..78200da2 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 cfa58bd3..a6fc4730 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 0764cc74..0c36734a 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 ed89ab1a..91d20fc4 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 7f722489..f589f3bd 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 b1f0aa42..0f69de5d 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 b8ac0f11..36067ade 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);

From 1670d730927bd872087220d4dc18d12d6b39df9b Mon Sep 17 00:00:00 2001
From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com>
Date: Tue, 22 Jul 2025 16:16:36 -0400
Subject: [PATCH 2/3] Add changeset

---
 .changeset/real-moose-lick.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 .changeset/real-moose-lick.md

diff --git a/.changeset/real-moose-lick.md b/.changeset/real-moose-lick.md
new file mode 100644
index 00000000..4d6a400d
--- /dev/null
+++ b/.changeset/real-moose-lick.md
@@ -0,0 +1,17 @@
+---
+"@igloo-ui/area-chart": patch
+"@igloo-ui/breadcrumb": patch
+"@igloo-ui/button": patch
+"@igloo-ui/checkbox": patch
+"@igloo-ui/color": 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

From 4b178f8e1148e251ab7bc2ad889c587949db670c Mon Sep 17 00:00:00 2001
From: Patrick DeVries <39521214+PatrickDeVries@users.noreply.github.com>
Date: Tue, 22 Jul 2025 16:29:42 -0400
Subject: [PATCH 3/3] Remove circular var declaration

---
 .changeset/real-moose-lick.md | 1 -
 packages/Color/src/color.scss | 1 -
 2 files changed, 2 deletions(-)

diff --git a/.changeset/real-moose-lick.md b/.changeset/real-moose-lick.md
index 4d6a400d..7ee8036d 100644
--- a/.changeset/real-moose-lick.md
+++ b/.changeset/real-moose-lick.md
@@ -3,7 +3,6 @@
 "@igloo-ui/breadcrumb": patch
 "@igloo-ui/button": patch
 "@igloo-ui/checkbox": patch
-"@igloo-ui/color": patch
 "@igloo-ui/combobox": patch
 "@igloo-ui/datepicker": patch
 "@igloo-ui/disclosure": patch
diff --git a/packages/Color/src/color.scss b/packages/Color/src/color.scss
index ca560dcc..fb88abf0 100644
--- a/packages/Color/src/color.scss
+++ b/packages/Color/src/color.scss
@@ -6,7 +6,6 @@
 
 @layer igloo {
     :root {
-        --ids-color-background: var(--ids-color-background);
         --ids-color-border-radius: var(--hop-shape-circle);
         --ids-color-border-radius-xs: var(--hop-shape-circle);
         --ids-color-border-radius-square: var(--hop-shape-rounded-sm);