@reusable-ui/range
Version:
A UI for the user defines a numeric value in the specified range.
60 lines (59 loc) • 1.88 kB
JavaScript
// cssfn:
import {
// reads/writes css variables configuration:
cssConfig, } from '@cssfn/core'; // writes css in javascript
// reusable-ui core:
import {
// a border (stroke) management system:
borderRadiuses, } from '@reusable-ui/core'; // a set of reusable-ui packages which are responsible for building any component
// configs:
export const [ranges, rangeValues, cssRangeConfig] = cssConfig(() => {
const bases = {
// sizes:
minInlineSizeInline: '8rem',
minBlockSizeInline: 'unset',
minInlineSizeBlock: 'unset',
minBlockSizeBlock: '8rem',
// accessibilities:
cursorInline: 'col-resize',
cursorBlock: 'row-resize',
// tracks:
trackInlineSizeInline: 'auto',
trackBlockSizeInline: '0.4em',
trackInlineSizeBlock: '0.4em',
trackBlockSizeBlock: 'auto',
trackBorderRadius: borderRadiuses.pill,
trackPaddingInline: '0em',
trackPaddingBlock: '0em',
// tracklowers:
tracklowerFilter: [[
'brightness(0.9)',
]],
// trackuppers:
trackupperFilter: [[
'brightness(0.85)',
'contrast(0.5)',
'saturate(0)',
]],
// thumbs:
thumbInlineSize: '1em',
thumbBlockSize: '1em',
thumbBorderRadius: borderRadiuses.pill,
thumbPaddingInline: '0em',
thumbPaddingBlock: '0em',
};
const defaults = {
// sizes:
minInlineSize: bases.minInlineSizeInline,
minBlockSize: bases.minBlockSizeInline,
// accessibilities:
cursor: bases.cursorInline,
// tracks:
trackInlineSize: bases.trackInlineSizeInline,
trackBlockSize: bases.trackBlockSizeInline,
};
return {
...bases,
...defaults,
};
}, { prefix: 'rnge' });