feat(slider): add component tokens #8899
Conversation
|
@SkyeSeitz @ashetland I originally had a prop for styling the min/max labels for a couple of specific ranged-histogram use cases, but removed them to ask whether we wanted to update Figma accordingly or to use the same text color for all tick labels? Design spec 
Implementation 
For additional context, the edge label styling is only applicable to sliders + range + histogram + precise/label-handles (introduced here). cc @eriklharper |
|
It looks like the font weight has decreased too on the min/max labels. I think we should keep all the labels the same 12px/500/color.text.2 as a default so they are all consistent across modes. Providing css vars to customize the color of min/max labels and handle labels separately though makes sense to me. |
| .handle { | ||
| box-shadow: 0 0 0 3px var(--calcite-color-brand) inset; | ||
| background-color: var(--calcite-slider-handle-color-active, var(--calcite-color-brand)); | ||
| box-shadow: 0 0 0 3px var(--calcite-slider-handle-border-color-hover, var(--calcite-color-brand)) inset; |
There was a problem hiding this comment.
should this be box-shadow: var(--calcite-slider-handle-shadow, 0 0 0 3px var(--calcite-slider-handle-border-color-hover, var(--calcite-color-brand)) inset); ?
this applies to other box-shadows on the handle
There was a problem hiding this comment.
I had considered something like that, but to a consumer, the inset box-shadow is used as a border. From that perspective, I think it'd be better to only expose color props for the handle's "border". This might affect other similar shadow props. I know I'll have to update switch to follow suit. cc @ashetland @macandcheese
| .thumb--active { | ||
| .handle { | ||
| @apply bg-brand; | ||
| box-shadow: 0 0 8px 0 rgb(0 0 0 / 16%); // shadow 1 press |
There was a problem hiding this comment.
does this box-shadow need to be added back?
There was a problem hiding this comment.
I unintentionally removed it because it seemed out of place compared to other shadows on the handle, but after chatting w/ @ashetland, we may consider dropping it since it's currently applied only when the thumb is active/pressed.
| * @prop --calcite-slider-handle-color-hover: Specifies the color of the handle when hovered. | ||
| * @prop --calcite-slider-handle-color: Specifies the color OF the handle. | ||
| * @prop --calcite-slider-handle-extension-color-hover: Specifies the color of the handle extension when hovered. | ||
| * @prop --calcite-slider-handle-extension-color: Specifies the color of the handle extension. |
There was a problem hiding this comment.
Maybe this could use the precise nomenclature that displays this? Either in prop name or description.
| * These properties can be overridden using the component's tag as selector. | ||
| * | ||
| * @prop --calcite-slider-fill-color: Specifies the color of the fill. | ||
| * @prop --calcite-slider-graph-accent-color: Specifies the accent color of the graph. |
There was a problem hiding this comment.
Should this use the histogram prop nomenclature? (Or, could histogram prop use graph, etc.,)
**Related Issue:** #7180 ## Summary Drops shadow CSS prop in favor of border for thumb border effect. Removes the following component tokens (CSS props): * `--calcite-switch-handle-shadow` * `--calcite-block-section-switch-handle-shadow` * `--calcite-block-section-switch-handle-shadow-hover` Stems from #8899 (comment).
Related Issue: #7180
Summary
Adds the following component tokens (CSS props):
--calcite-slider-fill-color--calcite-slider-histogram-accent-color--calcite-slider-histogram-background-color--calcite-slider-handle-border-color-hover--calcite-slider-handle-border-color--calcite-slider-handle-color-active--calcite-slider-handle-color-hover--calcite-slider-handle-color--calcite-slider-precise-handle-color-hover--calcite-slider-precise-handle-color--calcite-slider-handle-shadow-hover--calcite-slider-handle-shadow--calcite-slider-text-color--calcite-slider-text-size--calcite-slider-tick-border-color--calcite-slider-tick-color--calcite-slider-track-color