codeimage/packages/ui/src/lib/primitives/SegmentedField/SegmentedField.css.ts at main · hackpirodev/codeimage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import {createTheme, style} from '@vanilla-extract/css';
import * as textFieldStyles from '../TextField/TextField.css';
import {themeVars} from '../../theme';

export const [segmentedFieldTheme, segmentedFieldVars] = createTheme({
  activeSegmentedWidth: '0px',
  activeSegmentedOffset: '0%',
  activeSegmentedBackgroundColor: themeVars.dynamicColors.input.accentColor,
  segmentedTextColor: themeVars.dynamicColors.input.textColor,
  activeSegmentedTextColor: themeVars.dynamicColors.input.textColor,
});

export const wrapper = style([
  segmentedFieldTheme,
  textFieldStyles.baseField, // Add basic text field theme to not override
  {
    alignItems: 'stretch',
    width: '100%',
  },
  {
    display: 'flex',
    overflow: 'visible',
    borderRadius: themeVars.borderRadius.md,
    cursor: 'default',
    textAlign: 'center',
    userSelect: 'none',
    backgroundColor: textFieldStyles.textFieldVars.background,
  },
]);

export const box = style([
  {
    flexDirection: 'row',
    position: 'relative',
    flex: 1,
    display: 'flex',
    alignContent: 'stretch',
    alignItems: 'stretch',
  },
]);

export const segment = style([
  {
    width: '1px',
    height: '100%',
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexGrow: 1,
    padding: `0 ${themeVars.spacing['1']}`,
    color: segmentedFieldVars.segmentedTextColor,
    opacity: 0.65,
    fontWeight: themeVars.fontWeight.medium,
    selectors: {
      '&:not(:disabled)': {
        cursor: 'pointer',
      },
      '&[data-active=true]': {
        fontWeight: themeVars.fontWeight.semibold,
        opacity: 1,
        color: segmentedFieldVars.activeSegmentedTextColor,
      },
    },
  },
]);

export const segmentActive = style([
  {
    position: 'absolute',
    height: '100%',
    left: segmentedFieldVars.activeSegmentedOffset,
    width: segmentedFieldVars.activeSegmentedWidth,
    transition: 'left .2s cubic-bezier(.2, 0, 0, 1)',
    '::after': {
      position: 'absolute',
      inset: '2px',
      backgroundColor: segmentedFieldVars.activeSegmentedBackgroundColor,
      content: '',
      top: 1,
      boxShadow: themeVars.boxShadow.default,
      borderRadius: themeVars.borderRadius.default,
    },
  },
]);