fix(tokens): restore `--calcite-color-focus` by matgalla · Pull Request #11960 · Esri/calcite-design-system

matgalla · 2025-04-15T19:40:44Z

Related Issue: #11713 #11711

Summary

Restores the --calcite-color-focus token in both light and dark semantic color JSON files.

Noteworthy changes

includes the new focus token in all outputs except index.(s)css
adds new components.css design tokens output for inclusion in calcite-components shadow DOM (host)
- defines internal custom CSS property for use by focus utility styles (--calcite-internal-color-focus)
exports invert util from calcite-tailwind-preset (internal) – can be moved to internal shared utils
overrides Tailwind focus utilities in calcite-components – avoids depending on internal CSS props when using the preset
restores ts/color/css/hexrgba transform override to support focus color token value structure
extracts shared utilities across calcite-design-tokens format outputs
enhances dictionary utility to support filtered tokens
all components define the internal focus CSS prop, which might not be necessary in all cases – we can address this in Use styles object for shared component styles #12106 and only include it in components that are focusable.

BEGIN_COMMIT_OVERRIDE
omitted from changelog
END_COMMIT_OVERRIDE

github-actions · 2025-04-26T02:03:28Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

jcfranco · 2025-05-01T19:14:56Z

Belated update, taking another look at this once since the current updates will reintroduce a regression since it won't allow component-level overrides to take place.

github-actions · 2025-05-12T02:10:18Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

jcfranco · 2025-05-15T21:00:22Z

Belated update, taking another look at this once since the current updates will reintroduce a regression since it won't allow component-level overrides to take place.

One way we could approach this is to:

add a new output file (e.g., component)
exclude it from the components build (e.g., index or core token outputs)

use it in the Tailwind preset as the fallback value for focus utils (example) via the es6 output:

import { calciteColorFocus } from "@esri/calcite-design-tokens/dist/es6/component";
// ...
".focus-normal": {
   outline: `2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, ${calciteColorFocus}))`,
 },

We could alternatively include it in global/semantic output, but we would need to avoid adding it to :root (default), which would have the same issue seen above.

Thoughts? cc @matgalla @macandcheese @driskull @alisonailea

github-actions · 2025-05-24T02:05:59Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

matgalla · 2025-05-27T22:39:25Z

@jcfranco The proposed solution seems okay to me, just maybe a bit odd to have a file dedicated to a single token. Are there any other tokens that would potentially fit into that file eventually?

And we don't need the focus color variable from a design/Figma standpoint, so no need to go that route.

github-actions · 2025-06-05T02:09:41Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

driskull

👍

driskull · 2025-06-17T18:18:52Z

+          "outline-color": "transparent",
+        },
+        ".focus-normal": {
+          outline: "2px solid var(--calcite-internal-color-focus)",


should we use a var for 2px? Maybe the border width var? var(--calcite-spacing-base)

Good idea. I'll do that in a follow-up since I'll also have to update the preset utils.

PR submitted! #12348

macandcheese

🏅

**Related Issue:** #11713 #11711 ## Summary Restores the `--calcite-color-focus` token in both light and dark semantic color JSON files. ### Noteworthy changes * includes the new focus token in all outputs except `index.(s)css` * adds new `components.css` design tokens output for inclusion in `calcite-components` shadow DOM (host) * defines internal custom CSS property for use by focus utility styles (`--calcite-internal-color-focus`) * exports `invert` util from `calcite-tailwind-preset` (internal) – can be moved to internal shared utils * overrides Tailwind focus utilities in `calcite-components` – avoids depending on internal CSS props when using the preset * restores `ts/color/css/hexrgba` transform override to support focus color token value structure * extracts shared utilities across `calcite-design-tokens` format outputs * enhances dictionary utility to support filtered tokens * all components define the internal focus CSS prop, which might not be necessary in all cases – we can address this in #12106 and only include it in components that are focusable. BEGIN_COMMIT_OVERRIDE omitted from changelog END_COMMIT_OVERRIDE --------- Co-authored-by: JC Franco <jfranco@esri.com>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.2.0</summary> ## [3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0) (2025-09-16) ### Features * **tokens:** Add foreground-highlight and update referenced core tokens ([#12266](#12266)) ([cf44406](cf44406)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) ### Bug Fixes * Remove breakpoint tokens from semantic output ([#12397](#12397)) ([0f22083](0f22083)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **tokens:** Update `--calcite-font-line-height-relative` to resolve as a valid value ([#12828](#12828)) ([458f99d](458f99d)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary> ## [1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1) (2025-09-16) ### Bug Fixes * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0 </details> <details><summary>@esri/calcite-ui-icons: 4.3.0</summary> ## [4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0) (2025-09-16) ### Features * Add arrow left 10 and arrow right 10 ([#12541](#12541)) ([dec51d6](dec51d6)) * Add catalog and magic wand ([#12596](#12596)) ([67daada](67daada)) * Add content side by side right ([#12350](#12350)) ([95a1c0b](95a1c0b)) * Add dimensions centered ([#12483](#12483)) ([4c0876e](4c0876e)) * Add filled envelope icon ([#12654](#12654)) ([b2fb080](b2fb080)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * Add js-api icons ([#12435](#12435)) ([ca8aad1](ca8aad1)) * Add layer 3d ([#12819](#12819)) ([fb5db21](fb5db21)) * Add location local ([#12406](#12406)) ([0310075](0310075)) * Add person magnifying glass ([#12509](#12509)) ([99ee95a](99ee95a)) * Add rtl of list icons ([#12685](#12685)) ([1c95c2b](1c95c2b)) * Add select row icon ([#12768](#12768)) ([7f3b7a7](7f3b7a7)) * Add shopping-cart-f, shopping cart plus, carousel frames ([#12758](#12758)) ([370aaf0](370aaf0)) * Add spike, browser, tapestry and transfer icons ([#12251](#12251)) ([ad01162](ad01162)) * Add subheading icons ([#12303](#12303)) ([d965e4f](d965e4f)) * Added camera sensor icons ([#12738](#12738)) ([0a70c9f](0a70c9f)) * Added navigation icons ([#12323](#12323)) ([9e2bb42](9e2bb42)) * Schema report, video, classification, and advance drawing tools icons ([#12679](#12679)) ([7be3f5c](7be3f5c)) ### Bug Fixes * Select row icon ([#12793](#12793)) ([5b3788d](5b3788d)) * Tapestry icons ([#12315](#12315)) ([7fbedfc](7fbedfc)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.3</summary> ## [2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3) (2025-09-16) </details> <details><summary>@esri/calcite-components: 3.3.0</summary> ## [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0) (2025-09-16) ### Features * **accordion-item:** Add content-start and content-end slots ([#12849](#12849)) ([67a9509](67a9509)) * **accordion-item:** Add headingLevel property ([#12240](#12240)) ([5f02b5c](5f02b5c)) * **accordion-item:** Add title to expand icon ([#12657](#12657)) ([e691a3a](e691a3a)) * **action:** Add type property ([#12624](#12624)) ([c9dd7d9](c9dd7d9)) * **action:** Make actions fill full width of parent ([#12047](#12047)) ([7b9dfd7](7b9dfd7)) * Add focus options support ([#12555](#12555)) ([58148cc](58148cc)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * **autocomplete-item:** Add `calciteAutocompleteItemSelect` event ([#12655](#12655)) ([61dcbfa](61dcbfa)) * **block, block-section, block-group:** Add scale property ([#12382](#12382)) ([28b9da8](28b9da8)) * **block:** Add --calcite-block-content-space css token ([#12704](#12704)) ([7f1167a](7f1167a)) * **button:** Add css property for shadow ([#12603](#12603)) ([12bfdae](12bfdae)) * **carousel:** Add component tokens ([#12474](#12474)) ([385a83b](385a83b)) * **checkbox:** Enhance component's interactivity states ([#12207](#12207)) ([f00e45b](f00e45b)) * **color-picker:** Add component tokens ([#12862](#12862)) ([5dffbf3](5dffbf3)) * **color-picker:** Support hiding color-field ([#12484](#12484)) ([c4e42b6](c4e42b6)) * **combobox:** Add `--calcite-combobox-divider-color` ([#12223](#12223)) ([9d5b55d](9d5b55d)) * **combobox:** Provide context when filtering and there are no matching results ([#12525](#12525)) ([e1b32b9](e1b32b9)) * **combobox:** Single-persist mode ignores clearDisabled ([#12757](#12757)) ([ce36c6c](ce36c6c)) * **date-picker, input-date-picker:** Add `calendars` property to support one month view in range ([#12479](#12479)) ([f5357c6](f5357c6)) * **dialog, modal, popover, sheet:** Add `setReturnFocus` to `focusTrapOptions` ([#12513](#12513)) ([50a371a](50a371a)) * **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties ([#12176](#12176)) ([e03222c](e03222c)) * **dialog:** Add component tokens ([#12553](#12553)) ([0088f2e](0088f2e)) * Emit `expanded`/`collapsed` end-state events for expandable components ([#12580](#12580)) ([e0e686b](e0e686b)) * **input-date-picker:** Add component tokens ([#11734](#11734)) ([a3c152a](a3c152a)) * **input-number, input-text:** Add center alignment ([#12695](#12695)) ([6e0739b](6e0739b)) * **input-text:** Add component tokens ([#12242](#12242)) ([9edff0c](9edff0c)) * **input-time-picker:** Add component tokens ([#12874](#12874)) ([5134270](5134270)) * **input:** Add title to clear button ([#12807](#12807)) ([6b160c0](6b160c0)) * **label:** Add new layout "block" ([#12552](#12552)) ([66c4b7b](66c4b7b)) * **list, block-group, sort-handle:** Add sortDisabled property to prevent reordering ([#12615](#12615)) ([2a41b0f](2a41b0f)) * **list, block-group, sort-handle:** Add support for cloning dragged items ([#12628](#12628)) ([2f0246a](2f0246a)) * Make version console message easier to disable ([#12194](#12194)) ([b2f8ddf](b2f8ddf)) * **panel:** Add `collapseDirection` as public property ([#12813](#12813)) ([9675814](9675814)) * **popover:** Add token for specifying the max width ([#12516](#12516)) ([bb8dac9](bb8dac9)) * **radio-button:** Enhance component's interactivity states ([#12169](#12169)) ([5999bac](5999bac)) * **select:** Add component tokens ([#12812](#12812)) ([25de1ca](25de1ca)) * **split-button:** Add component tokens ([#12756](#12756)) ([82f107e](82f107e)) * **stepper-item:** Improve single selection icon color ([#12436](#12436)) ([c2c6037](c2c6037)) * **swatch, swatch-group:** Add new components ([#12584](#12584)) ([6d6d3d1](6d6d3d1)) * **swatch:** Use label for visual title ([#12841](#12841)) ([7dbbc91](7dbbc91)) * **table, table-row, table-header, table-cell:** Add component tokens ([#11770](#11770)) ([8a0168c](8a0168c)) * **time-picker:** Apply consistent styling for floating elements ([#12467](#12467)) ([c1d13ba](c1d13ba)) * **time-picker:** Apply rounded corners inside popover ([#12502](#12502)) ([3ad12dd](3ad12dd)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * **tooltip:** Add css custom property for setting max size ([#12865](#12865)) ([83911fc](83911fc)) ### Bug Fixes * **accordion-item:** Fix font size for headingLevel property ([#12269](#12269)) ([448880d](448880d)) * **action-menu:** Ensure children are ready before setting a11y attributes ([#12533](#12533)) ([1f83000](1f83000)) * **action:** Fix applied tokens when active ([#12686](#12686)) ([d58901e](d58901e)) * **autocomplete:** Announce result to screen readers using aria-live attribute ([#12443](#12443)) ([0988e98](0988e98)) * **block:** Allow customizing heading text color when expanded & deprecate tokens ([#12777](#12777)) ([98b4348](98b4348)) * **block:** Icon-end aligns with header container when collapsible is false ([#12784](#12784)) ([4565b90](4565b90)) * **block:** No longer renders an empty header ([#12801](#12801)) ([9904507](9904507)) * **card:** Ensure `setFocus` focuses card when it contains nested interactive children ([#12724](#12724)) ([2fbcd99](2fbcd99)) * **chip:** Adjust interactivity states enhancements ([#12329](#12329)) ([608c006](608c006)) * **color-picker:** Adjust component spacing ([#12767](#12767)) ([4325d8b](4325d8b)) * **color-picker:** Ensure channel values are rounded ([#12239](#12239)) ([ba4e470](ba4e470)) * **combobox:** Adjust padding for no-matches context ([#12781](#12781)) ([e309828](e309828)) * **date-picker:** Honor `minAsDate` & `maxAsDate` when set ([#12706](#12706)) ([de8afed](de8afed)) * **date-picker:** Improve color contrast for days ([#12705](#12705)) ([0930c30](0930c30)) * **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL contexts ([#12668](#12668)) ([b2c22c9](b2c22c9)) * **dialog:** Ensure beforeClose is called once and fix animation on dialog ([#12152](#12152)) ([0898b7c](0898b7c)) * **dialog:** Fix for corner radius token ([#12859](#12859)) ([ee05c4d](ee05c4d)) * **dialog:** Restrict resizing once minimum size has been reached ([#12175](#12175)) ([cd03d14](cd03d14)) * Emit `beforeOpen` and `beforeClose` immediately on toggle ([#11965](#11965)) ([5955929](5955929)) * Ensure initial transitions are applied consistently ([#12392](#12392)) ([a82aeb2](a82aeb2)) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **input-date-picker:** Announces the purpose of each input in the range mode ([#12238](#12238)) ([c64169e](c64169e)) * **input-date-picker:** No longer close when non-interactive areas are clicked in Safari ([#12139](#12139)) ([69016b1](69016b1)) * **input-date-picker:** Update start & end date correctly when `proximity-selection-disabled` is true ([#12681](#12681)) ([67336ab](67336ab)) * **input-number:** Add token to customize icon color ([#12414](#12414)) ([63c68b8](63c68b8)) * **input-time-picker:** Add label property ([#12276](#12276)) ([2e06dd1](2e06dd1)) * **input-time-picker:** Apply aria-label and aria-controls attributes correctly to support NVDA and JAWS ([#12312](#12312)) ([ffd0cd7](ffd0cd7)) * **input-time-zone:** Address code review comments ([#12293](#12293)) ([c86df52](c86df52)) * **input-time-zone:** Display 'city, country' when control closed and value set programatically ([#12252](#12252)) ([684062e](684062e)) * **input-time-zone:** Fix selected time zone label flicker and scroll delay for region mode ([#12384](#12384)) ([f0b67f4](f0b67f4)) * **input, input-number, input-text:** Ensure overlay does not obscure input icon ([#12716](#12716)) ([926826f](926826f)) * **input, input-number, input-text:** Stretch the height of slot container to match with component ([#12339](#12339)) ([3d24364](3d24364)) * **input:** Do not obscure picker button with type=datetime-local ([#12081](#12081)) ([db4bd12](db4bd12)) * **link:** Emit click event on enter key when the component doesn't have href defined ([#12191](#12191)) ([409915c](409915c)) * **list, block-group:** Emit calciteListOrderChange on destination when adding or moving from the menu ([#12799](#12799)) ([916f081](916f081)) * **list, block-group:** Fix canPull when cloning and "Add to" menu on block-group ([#12741](#12741)) ([78b15e2](78b15e2)) * **list, block-group:** Sort handle menu should respond to new lists or label changes ([#12848](#12848)) ([df453bb](df453bb)) * **list, block-group:** Update menu item labels and call `canPut` / `canPull` to filter items before opening a sort handle menu ([#12487](#12487)) ([9c9ff9c](9c9ff9c)) * **list, block-group:** Update sort handle move items before dropdown menu is opened ([#12722](#12722)) ([298a7f1](298a7f1)) * **list:** Added scrim for empty list ([#12595](#12595)) ([7a5cc96](7a5cc96)) * **list:** Fix visual artifacts when you initiate a drag operation with the drag handle menu open ([#12611](#12611)) ([b317e50](b317e50)) * **list:** Prevent drag flickering while sorting ([#12631](#12631)) ([accef27](accef27)) * Map `bs` locale to `sr-Latn-CS` ([#12566](#12566)) ([298a7ba](298a7ba)) * **pagination:** Prevent invalid start-item and set default to 1 ([#12557](#12557)) ([494e33f](494e33f)) * **pagination:** Restore original default value for totalItems ([#12569](#12569)) ([e65b461](e65b461)) * **panel:** Alert slot should not take up any height ([#12802](#12802)) ([c51b968](c51b968)) * **panel:** Prevent child panels from closing parent panels ([#12646](#12646)) ([15da3ce](15da3ce)) * **popover, tooltip:** Do not close when a click was initiated inside the component ([#12543](#12543)) ([a35e96a](a35e96a)) * **popover, tooltip:** Open when there is selected text on the page ([#12597](#12597)) ([4274d65](4274d65)) * **radio-button:** Fix navigation with disabled buttons ([#12514](#12514)) ([d1b1ccb](d1b1ccb)) * **segmented-control:** Avoid changing focus from programmatic item selection ([#12181](#12181)) ([e3be05e](e3be05e)) * **select:** Fix error thrown when component is removed before initialization ([#12630](#12630)) ([ec661db](ec661db)) * **shell-center-row:** Fix rendering tied to named-slot content ([#10451](#10451)) ([5b15a02](5b15a02)) * **shell-panel:** Allow content to extend the full height of the panel ([#12860](#12860)) ([52bed19](52bed19)) * **shell-panel:** Restore resized size after expanding ([#12691](#12691)) ([0779250](0779250)) * **slider:** Allow range handle dragging in either direction when both handles share the same position ([#12527](#12527)) ([d9c7bfa](d9c7bfa)) * **slider:** Remove fill color when dragged handle is released and no longer has focus ([#12511](#12511)) ([5db048f](5db048f)) * **stepper-item:** Remove margin when slotted content is empty ([#12298](#12298)) ([6b1d099](6b1d099)) * **stepper:** Disallow navigation to disabled items ([#12217](#12217)) ([cbe160f](cbe160f)) * **swatch:** Ensure corner radius css property is correctly applied ([#12855](#12855)) ([50405aa](50405aa)) * **title:** Apply alignment on slotted content ([#12451](#12451)) ([93b470a](93b470a)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) ### Deprecations * **combobox:** Remove `--calcite-combobox-item-border-color` ([9d5b55d](9d5b55d)) * **label:** Deprecate `"default"` layout value. ([66c4b7b](66c4b7b)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to 2.0.3 </details> <details><summary>@esri/calcite-components-react: 3.3.0</summary> ## [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0) (2025-09-16) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-design-tokens: 3.2.0</summary> [3.2.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-design-tokens@3.1.0...@esri/calcite-design-tokens@3.2.0) (2025-09-16) * **tokens:** Add foreground-highlight and update referenced core tokens ([#12266](#12266)) ([cf44406](cf44406)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * Remove breakpoint tokens from semantic output ([#12397](#12397)) ([0f22083](0f22083)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **tokens:** Update `--calcite-font-line-height-relative` to resolve as a valid value ([#12828](#12828)) ([458f99d](458f99d)) </details> <details><summary>@esri/calcite-tailwind-preset: 1.0.1</summary> [1.0.1](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-tailwind-preset@1.0.0...@esri/calcite-tailwind-preset@1.0.1) (2025-09-16) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * The following workspace dependencies were updated * dependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * peerDependencies * @esri/calcite-design-tokens bumped from ^3.0.2-next.8 to ^3.2.0 </details> <details><summary>@esri/calcite-ui-icons: 4.3.0</summary> [4.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-ui-icons@4.2.0...@esri/calcite-ui-icons@4.3.0) (2025-09-16) * Add arrow left 10 and arrow right 10 ([#12541](#12541)) ([dec51d6](dec51d6)) * Add catalog and magic wand ([#12596](#12596)) ([67daada](67daada)) * Add content side by side right ([#12350](#12350)) ([95a1c0b](95a1c0b)) * Add dimensions centered ([#12483](#12483)) ([4c0876e](4c0876e)) * Add filled envelope icon ([#12654](#12654)) ([b2fb080](b2fb080)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * Add js-api icons ([#12435](#12435)) ([ca8aad1](ca8aad1)) * Add layer 3d ([#12819](#12819)) ([fb5db21](fb5db21)) * Add location local ([#12406](#12406)) ([0310075](0310075)) * Add person magnifying glass ([#12509](#12509)) ([99ee95a](99ee95a)) * Add rtl of list icons ([#12685](#12685)) ([1c95c2b](1c95c2b)) * Add select row icon ([#12768](#12768)) ([7f3b7a7](7f3b7a7)) * Add shopping-cart-f, shopping cart plus, carousel frames ([#12758](#12758)) ([370aaf0](370aaf0)) * Add spike, browser, tapestry and transfer icons ([#12251](#12251)) ([ad01162](ad01162)) * Add subheading icons ([#12303](#12303)) ([d965e4f](d965e4f)) * Added camera sensor icons ([#12738](#12738)) ([0a70c9f](0a70c9f)) * Added navigation icons ([#12323](#12323)) ([9e2bb42](9e2bb42)) * Schema report, video, classification, and advance drawing tools icons ([#12679](#12679)) ([7be3f5c](7be3f5c)) * Select row icon ([#12793](#12793)) ([5b3788d](5b3788d)) * Tapestry icons ([#12315](#12315)) ([7fbedfc](7fbedfc)) </details> <details><summary>@esri/eslint-plugin-calcite-components: 2.0.3</summary> [2.0.3](https://github.com/Esri/calcite-design-system/compare/@esri/eslint-plugin-calcite-components@2.0.2...@esri/eslint-plugin-calcite-components@2.0.3) (2025-09-16) </details> <details><summary>@esri/calcite-components: 3.3.0</summary> [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@3.2.1...@esri/calcite-components@3.3.0) (2025-09-16) * **accordion-item:** Add content-start and content-end slots ([#12849](#12849)) ([67a9509](67a9509)) * **accordion-item:** Add headingLevel property ([#12240](#12240)) ([5f02b5c](5f02b5c)) * **accordion-item:** Add title to expand icon ([#12657](#12657)) ([e691a3a](e691a3a)) * **action:** Add type property ([#12624](#12624)) ([c9dd7d9](c9dd7d9)) * **action:** Make actions fill full width of parent ([#12047](#12047)) ([7b9dfd7](7b9dfd7)) * Add focus options support ([#12555](#12555)) ([58148cc](58148cc)) * Add internal label across form components ([#12499](#12499)) ([6b38dd8](6b38dd8)) * **autocomplete-item:** Add `calciteAutocompleteItemSelect` event ([#12655](#12655)) ([61dcbfa](61dcbfa)) * **block, block-section, block-group:** Add scale property ([#12382](#12382)) ([28b9da8](28b9da8)) * **block:** Add --calcite-block-content-space css token ([#12704](#12704)) ([7f1167a](7f1167a)) * **button:** Add css property for shadow ([#12603](#12603)) ([12bfdae](12bfdae)) * **carousel:** Add component tokens ([#12474](#12474)) ([385a83b](385a83b)) * **checkbox:** Enhance component's interactivity states ([#12207](#12207)) ([f00e45b](f00e45b)) * **color-picker:** Add component tokens ([#12862](#12862)) ([5dffbf3](5dffbf3)) * **color-picker:** Support hiding color-field ([#12484](#12484)) ([c4e42b6](c4e42b6)) * **combobox:** Add `--calcite-combobox-divider-color` ([#12223](#12223)) ([9d5b55d](9d5b55d)) * **combobox:** Provide context when filtering and there are no matching results ([#12525](#12525)) ([e1b32b9](e1b32b9)) * **combobox:** Single-persist mode ignores clearDisabled ([#12757](#12757)) ([ce36c6c](ce36c6c)) * **date-picker, input-date-picker:** Add `calendars` property to support one month view in range ([#12479](#12479)) ([f5357c6](f5357c6)) * **dialog, modal, popover, sheet:** Add `setReturnFocus` to `focusTrapOptions` ([#12513](#12513)) ([50a371a](50a371a)) * **dialog, panel, flow-item:** Add `icon` and `iconFlipRtl` properties ([#12176](#12176)) ([e03222c](e03222c)) * **dialog:** Add component tokens ([#12553](#12553)) ([0088f2e](0088f2e)) * Emit `expanded`/`collapsed` end-state events for expandable components ([#12580](#12580)) ([e0e686b](e0e686b)) * **input-date-picker:** Add component tokens ([#11734](#11734)) ([a3c152a](a3c152a)) * **input-number, input-text:** Add center alignment ([#12695](#12695)) ([6e0739b](6e0739b)) * **input-text:** Add component tokens ([#12242](#12242)) ([9edff0c](9edff0c)) * **input-time-picker:** Add component tokens ([#12874](#12874)) ([5134270](5134270)) * **input:** Add title to clear button ([#12807](#12807)) ([6b160c0](6b160c0)) * **label:** Add new layout "block" ([#12552](#12552)) ([66c4b7b](66c4b7b)) * **list, block-group, sort-handle:** Add sortDisabled property to prevent reordering ([#12615](#12615)) ([2a41b0f](2a41b0f)) * **list, block-group, sort-handle:** Add support for cloning dragged items ([#12628](#12628)) ([2f0246a](2f0246a)) * Make version console message easier to disable ([#12194](#12194)) ([b2f8ddf](b2f8ddf)) * **panel:** Add `collapseDirection` as public property ([#12813](#12813)) ([9675814](9675814)) * **popover:** Add token for specifying the max width ([#12516](#12516)) ([bb8dac9](bb8dac9)) * **radio-button:** Enhance component's interactivity states ([#12169](#12169)) ([5999bac](5999bac)) * **select:** Add component tokens ([#12812](#12812)) ([25de1ca](25de1ca)) * **split-button:** Add component tokens ([#12756](#12756)) ([82f107e](82f107e)) * **stepper-item:** Improve single selection icon color ([#12436](#12436)) ([c2c6037](c2c6037)) * **swatch, swatch-group:** Add new components ([#12584](#12584)) ([6d6d3d1](6d6d3d1)) * **swatch:** Use label for visual title ([#12841](#12841)) ([7dbbc91](7dbbc91)) * **table, table-row, table-header, table-cell:** Add component tokens ([#11770](#11770)) ([8a0168c](8a0168c)) * **time-picker:** Apply consistent styling for floating elements ([#12467](#12467)) ([c1d13ba](c1d13ba)) * **time-picker:** Apply rounded corners inside popover ([#12502](#12502)) ([3ad12dd](3ad12dd)) * **tokens:** Add missing line height tokens ([#12798](#12798)) ([3bf135d](3bf135d)) * **tooltip:** Add css custom property for setting max size ([#12865](#12865)) ([83911fc](83911fc)) * **accordion-item:** Fix font size for headingLevel property ([#12269](#12269)) ([448880d](448880d)) * **action-menu:** Ensure children are ready before setting a11y attributes ([#12533](#12533)) ([1f83000](1f83000)) * **action:** Fix applied tokens when active ([#12686](#12686)) ([d58901e](d58901e)) * **autocomplete:** Announce result to screen readers using aria-live attribute ([#12443](#12443)) ([0988e98](0988e98)) * **block:** Allow customizing heading text color when expanded & deprecate tokens ([#12777](#12777)) ([98b4348](98b4348)) * **block:** Icon-end aligns with header container when collapsible is false ([#12784](#12784)) ([4565b90](4565b90)) * **block:** No longer renders an empty header ([#12801](#12801)) ([9904507](9904507)) * **card:** Ensure `setFocus` focuses card when it contains nested interactive children ([#12724](#12724)) ([2fbcd99](2fbcd99)) * **chip:** Adjust interactivity states enhancements ([#12329](#12329)) ([608c006](608c006)) * **color-picker:** Adjust component spacing ([#12767](#12767)) ([4325d8b](4325d8b)) * **color-picker:** Ensure channel values are rounded ([#12239](#12239)) ([ba4e470](ba4e470)) * **combobox:** Adjust padding for no-matches context ([#12781](#12781)) ([e309828](e309828)) * **date-picker:** Honor `minAsDate` & `maxAsDate` when set ([#12706](#12706)) ([de8afed](de8afed)) * **date-picker:** Improve color contrast for days ([#12705](#12705)) ([0930c30](0930c30)) * **dialog, flow-item, panel:** Fix `iconFlipRtl` not working in RTL contexts ([#12668](#12668)) ([b2c22c9](b2c22c9)) * **dialog:** Ensure beforeClose is called once and fix animation on dialog ([#12152](#12152)) ([0898b7c](0898b7c)) * **dialog:** Fix for corner radius token ([#12859](#12859)) ([ee05c4d](ee05c4d)) * **dialog:** Restrict resizing once minimum size has been reached ([#12175](#12175)) ([cd03d14](cd03d14)) * Emit `beforeOpen` and `beforeClose` immediately on toggle ([#11965](#11965)) ([5955929](5955929)) * Ensure initial transitions are applied consistently ([#12392](#12392)) ([a82aeb2](a82aeb2)) * Ensure transition-duration is used in Tailwind utils ([#12167](#12167)) ([fc842ee](fc842ee)) * **input-date-picker:** Announces the purpose of each input in the range mode ([#12238](#12238)) ([c64169e](c64169e)) * **input-date-picker:** No longer close when non-interactive areas are clicked in Safari ([#12139](#12139)) ([69016b1](69016b1)) * **input-date-picker:** Update start & end date correctly when `proximity-selection-disabled` is true ([#12681](#12681)) ([67336ab](67336ab)) * **input-number:** Add token to customize icon color ([#12414](#12414)) ([63c68b8](63c68b8)) * **input-time-picker:** Add label property ([#12276](#12276)) ([2e06dd1](2e06dd1)) * **input-time-picker:** Apply aria-label and aria-controls attributes correctly to support NVDA and JAWS ([#12312](#12312)) ([ffd0cd7](ffd0cd7)) * **input-time-zone:** Address code review comments ([#12293](#12293)) ([c86df52](c86df52)) * **input-time-zone:** Display 'city, country' when control closed and value set programatically ([#12252](#12252)) ([684062e](684062e)) * **input-time-zone:** Fix selected time zone label flicker and scroll delay for region mode ([#12384](#12384)) ([f0b67f4](f0b67f4)) * **input, input-number, input-text:** Ensure overlay does not obscure input icon ([#12716](#12716)) ([926826f](926826f)) * **input, input-number, input-text:** Stretch the height of slot container to match with component ([#12339](#12339)) ([3d24364](3d24364)) * **input:** Do not obscure picker button with type=datetime-local ([#12081](#12081)) ([db4bd12](db4bd12)) * **link:** Emit click event on enter key when the component doesn't have href defined ([#12191](#12191)) ([409915c](409915c)) * **list, block-group:** Emit calciteListOrderChange on destination when adding or moving from the menu ([#12799](#12799)) ([916f081](916f081)) * **list, block-group:** Fix canPull when cloning and "Add to" menu on block-group ([#12741](#12741)) ([78b15e2](78b15e2)) * **list, block-group:** Sort handle menu should respond to new lists or label changes ([#12848](#12848)) ([df453bb](df453bb)) * **list, block-group:** Update menu item labels and call `canPut` / `canPull` to filter items before opening a sort handle menu ([#12487](#12487)) ([9c9ff9c](9c9ff9c)) * **list, block-group:** Update sort handle move items before dropdown menu is opened ([#12722](#12722)) ([298a7f1](298a7f1)) * **list:** Added scrim for empty list ([#12595](#12595)) ([7a5cc96](7a5cc96)) * **list:** Fix visual artifacts when you initiate a drag operation with the drag handle menu open ([#12611](#12611)) ([b317e50](b317e50)) * **list:** Prevent drag flickering while sorting ([#12631](#12631)) ([accef27](accef27)) * Map `bs` locale to `sr-Latn-CS` ([#12566](#12566)) ([298a7ba](298a7ba)) * **pagination:** Prevent invalid start-item and set default to 1 ([#12557](#12557)) ([494e33f](494e33f)) * **pagination:** Restore original default value for totalItems ([#12569](#12569)) ([e65b461](e65b461)) * **panel:** Alert slot should not take up any height ([#12802](#12802)) ([c51b968](c51b968)) * **panel:** Prevent child panels from closing parent panels ([#12646](#12646)) ([15da3ce](15da3ce)) * **popover, tooltip:** Do not close when a click was initiated inside the component ([#12543](#12543)) ([a35e96a](a35e96a)) * **popover, tooltip:** Open when there is selected text on the page ([#12597](#12597)) ([4274d65](4274d65)) * **radio-button:** Fix navigation with disabled buttons ([#12514](#12514)) ([d1b1ccb](d1b1ccb)) * **segmented-control:** Avoid changing focus from programmatic item selection ([#12181](#12181)) ([e3be05e](e3be05e)) * **select:** Fix error thrown when component is removed before initialization ([#12630](#12630)) ([ec661db](ec661db)) * **shell-center-row:** Fix rendering tied to named-slot content ([#10451](#10451)) ([5b15a02](5b15a02)) * **shell-panel:** Allow content to extend the full height of the panel ([#12860](#12860)) ([52bed19](52bed19)) * **shell-panel:** Restore resized size after expanding ([#12691](#12691)) ([0779250](0779250)) * **slider:** Allow range handle dragging in either direction when both handles share the same position ([#12527](#12527)) ([d9c7bfa](d9c7bfa)) * **slider:** Remove fill color when dragged handle is released and no longer has focus ([#12511](#12511)) ([5db048f](5db048f)) * **stepper-item:** Remove margin when slotted content is empty ([#12298](#12298)) ([6b1d099](6b1d099)) * **stepper:** Disallow navigation to disabled items ([#12217](#12217)) ([cbe160f](cbe160f)) * **swatch:** Ensure corner radius css property is correctly applied ([#12855](#12855)) ([50405aa](50405aa)) * **title:** Apply alignment on slotted content ([#12451](#12451)) ([93b470a](93b470a)) * **tokens:** Restore `--calcite-color-focus` ([#11960](#11960)) ([0432a20](0432a20)) * **combobox:** Remove `--calcite-combobox-item-border-color` ([9d5b55d](9d5b55d)) * **label:** Deprecate `"default"` layout value. ([66c4b7b](66c4b7b)) * The following workspace dependencies were updated * dependencies * @esri/calcite-ui-icons bumped from 4.3.0-next.23 to 4.3.0 * devDependencies * @esri/calcite-design-tokens bumped from 3.2.0-next.14 to 3.2.0 * @esri/calcite-tailwind-preset bumped from 1.0.1-next.18 to 1.0.1 * @esri/eslint-plugin-calcite-components bumped from 2.0.3-next.5 to 2.0.3 </details> <details><summary>@esri/calcite-components-react: 3.3.0</summary> [3.3.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@3.2.1...@esri/calcite-components-react@3.3.0) (2025-09-16) * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from 3.3.0-next.111 to 3.3.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Ben Elan <no-reply@benelan.dev>

add semantic focus color in light/dark themes

0465acf

matgalla added the refactor Issues tied to code that needs to be significantly reworked. label Apr 15, 2025

matgalla added this to the 2025-04-29 - Apr Milestone milestone Apr 15, 2025

matgalla requested a review from jcfranco April 15, 2025 19:40

matgalla self-assigned this Apr 15, 2025

fix: restore --calcite-color-focus

8a8e8d4

jcfranco changed the title ~~refactor(tokens): add focus color token~~ fix(tokens): restore --calcite-color-focus Apr 15, 2025

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Apr 15, 2025

jcfranco marked this pull request as ready for review April 15, 2025 19:52

jcfranco requested a review from alisonailea as a code owner April 15, 2025 19:52

jcfranco added the no changelog entry Use the commit override to avoid a changelog entry label Apr 15, 2025

update test snapshots

1943055

github-actions Bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Apr 15, 2025

jcfranco added skip visual snapshots Pull requests that do not need visual regression testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Apr 15, 2025

github-actions Bot added the Stale Issues or pull requests that have not had recent activity. label Apr 26, 2025

matgalla assigned jcfranco Apr 28, 2025

github-actions Bot removed the Stale Issues or pull requests that have not had recent activity. label Apr 30, 2025

geospatialem removed this from the 2025-04-29 - Apr Milestone milestone Apr 30, 2025

github-actions Bot added the Stale Issues or pull requests that have not had recent activity. label May 12, 2025

matgalla added this to the 2025-06-24 - Jun Milestone milestone May 12, 2025

geospatialem removed this from the 2025-06-24 - Jun Milestone milestone May 12, 2025

github-actions Bot removed the Stale Issues or pull requests that have not had recent activity. label May 16, 2025

github-actions Bot added the Stale Issues or pull requests that have not had recent activity. label May 24, 2025

add .default to focus token path and add scope attribute

852efcf

github-actions Bot added the Stale Issues or pull requests that have not had recent activity. label Jun 5, 2025

jcfranco added 2 commits June 12, 2025 19:51

merge dev

eb5e1c4

Merge branch 'dev' into matgalla/add-focus-color-token

a2edc5b

github-actions Bot removed the Stale Issues or pull requests that have not had recent activity. label Jun 17, 2025

jcfranco added 2 commits June 16, 2025 23:23

chore(tokens): enable strict and drop ypescript-strict-plugin

da2a8a4

update build to generate component/host-specific stylesheet

5d92797

jcfranco requested a review from benelan as a code owner June 17, 2025 07:19

jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 17, 2025

fix focus util regression

abff752

jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. skip visual snapshots Pull requests that do not need visual regression testing. labels Jun 17, 2025

jcfranco requested review from driskull and macandcheese and removed request for alisonailea June 17, 2025 18:16

driskull approved these changes Jun 17, 2025

View reviewed changes

macandcheese approved these changes Jun 17, 2025

View reviewed changes

jcfranco merged commit 8bc246f into dev Jun 17, 2025
16 checks passed

jcfranco deleted the matgalla/add-focus-color-token branch June 17, 2025 18:46

github-actions Bot added this to the 2025-06-24 - Jun Milestone milestone Jun 17, 2025

jcfranco mentioned this pull request May 7, 2025

Use styles object for shared component styles #12106

Open

5 tasks

jcfranco mentioned this pull request Jul 1, 2025

Global and component focus state color #6458

Closed

calcite-admin mentioned this pull request Sep 16, 2025

chore: release main #12887

Merged

benelan mentioned this pull request Sep 18, 2025

chore: release main (#12887) #12912

Merged

jcfranco mentioned this pull request Dec 8, 2025

fix!: restore --calcite-color-focus in index.(s)css #13398

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tokens): restore `--calcite-color-focus`#11960

fix(tokens): restore `--calcite-color-focus`#11960
jcfranco merged 9 commits intodevfrom
matgalla/add-focus-color-token

matgalla commented Apr 15, 2025 •

edited by jcfranco

Loading

Uh oh!

github-actions Bot commented Apr 26, 2025

Uh oh!

jcfranco commented May 1, 2025

Uh oh!

github-actions Bot commented May 12, 2025

Uh oh!

jcfranco commented May 15, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented May 24, 2025

Uh oh!

matgalla commented May 27, 2025

Uh oh!

github-actions Bot commented Jun 5, 2025

Uh oh!

driskull left a comment

Uh oh!

driskull Jun 17, 2025

Uh oh!

jcfranco Jun 17, 2025

Uh oh!

jcfranco Jun 17, 2025

Uh oh!

macandcheese left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

matgalla commented Apr 15, 2025 • edited by jcfranco Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Noteworthy changes

Uh oh!

github-actions Bot commented Apr 26, 2025

Uh oh!

jcfranco commented May 1, 2025

Uh oh!

github-actions Bot commented May 12, 2025

Uh oh!

jcfranco commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 24, 2025

Uh oh!

matgalla commented May 27, 2025

Uh oh!

github-actions Bot commented Jun 5, 2025

Uh oh!

driskull left a comment

Choose a reason for hiding this comment

Uh oh!

driskull Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

jcfranco Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

jcfranco Jun 17, 2025

Choose a reason for hiding this comment

Uh oh!

macandcheese left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

matgalla commented Apr 15, 2025 •

edited by jcfranco

Loading

jcfranco commented May 15, 2025 •

edited

Loading