ionic-framework/core/src/components/chip/chip.interfaces.ts at c02894e42b2420f407cd6d7e00af19de3155344c · ionic-team/ionic-framework · 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import type { IonPadding, IonMargin } from '../../themes/themes.interfaces.js';

export type IonChipRecipe = {
  cursor?: string;
  letterSpacing?: string | number;
  lineHeight?: string | number;
  margin?: IonMargin;
  padding?: IonPadding;
  gap?: string | number;

  font?: {
    weight?: string | number;
  };

  // Hues with fills
  hue?: {
    bold?: ChipFills;
    subtle?: ChipFills;
  };

  // Sizes
  size: {
    small: IonChipSizeDefinition;
    large: IonChipSizeDefinition;
  };

  // Shapes
  shape: {
    soft: IonChipShapeDefinition;
    round: IonChipShapeDefinition;
    rectangular: IonChipShapeDefinition;
  };

  // Shared States
  state?: {
    disabled?: {
      opacity?: string | number;
    };

    focus?: {
      ring?: {
        color?: string;
        style?: string;
        width?: string | number;
      };
    };
  };

  icon?: IonChipIconDefinition;
  avatar?: IonChipAvatarDefinition;
};

type ChipFills = {
  solid: ChipStates & {
    semantic?: ChipStates;
  };

  outline: ChipStates & {
    semantic?: ChipStates;
  };
};

type ChipStates = {
  default: ChipColors;
  hover?: ChipColors;
  focus?: ChipColors;
  activated?: ChipColors;
  disabled?: ChipColors;
};

// Basic colors for a state
type ChipColors = {
  bg?: string;
  color?: string;
  border?: {
    color?: string;
    style?: string;
    width?: string | number;
  };
};

type IonChipSizeDefinition = {
  minHeight: string | number;

  font: {
    size: string | number;
  };
};

type IonChipShapeDefinition = {
  border: {
    radius: string | number;
  };
};

type IonChipMediaDefinition = {
  // Styles for the media component only if it is the first element in the slot
  leading?: {
    margin?: IonMargin;
  };

  // Styles for the media component only if it is the last element in the slot
  trailing?: {
    margin?: IonMargin;
  };
};

type IonChipIconDefinition = IonChipMediaDefinition & {
  color?: string;

  font: {
    size?: string | number;
  };
};

type IonChipAvatarDefinition = IonChipMediaDefinition & {
  height?: string | number;
  width?: string | number;
};

export type IonChipConfig = {
  fill?: 'outline' | 'solid';
  hue?: 'bold' | 'subtle';
  size?: 'small' | 'large';
  shape?: 'soft' | 'round' | 'rectangular';
};