ionic-framework/core/src/components/chip/chip.interfaces.ts at ad76d366d761ae58aa17a388b91cdcc379cf6711 · 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
import type { IonPadding, IonMargin } from '../../themes/themes.interfaces.js';

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

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

  // Hues with fills
  hue?: {
    [K in IonChipHue]?: IonChipFillDefinition;
  };

  // Sizes
  size?: {
    [K in IonChipSize]?: IonChipSizeDefinition;
  };

  // Shapes
  shape?: {
    [K in IonChipShape]?: IonChipShapeDefinition;
  };

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

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

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

type IonChipFillDefinition = {
  [K in IonChipFill]?: IonChipStateDefinition & {
    semantic?: IonChipStateDefinition;
  };
};

type IonChipStateDefinition = {
  default?: IonChipColorDefinition;
  hover?: IonChipColorDefinition;
  focus?: IonChipColorDefinition;
  activated?: IonChipColorDefinition;
  disabled?: IonChipColorDefinition;
};

// Basic colors for a state
type IonChipColorDefinition = {
  background?: 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 = {
  /** Targets `:first-child` */
  leading?: {
    margin?: IonMargin;
  };

  /** Targets `:last-child` */
  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?: IonChipFill;
  hue?: IonChipHue;
  size?: IonChipSize;
  shape?: IonChipShape;
};

export type IonChipFill = 'outline' | 'solid';
export type IonChipHue = 'bold' | 'subtle';
export type IonChipSize = 'small' | 'large';
export type IonChipShape = 'soft' | 'round' | 'rectangular';