ionic-framework/core/src/components/chip/chip.ionic.scss at 098cba4096554dee16632e175ca80b94588117db · 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
127
128
129
@use "../../themes/ionic/ionic.globals.scss" as globals;
@use "./chip.common";

// Ionic Chip
// --------------------------------------------------

:host {
  /**
   * @prop --focus-ring-color: Color of the focus ring
   * @prop --focus-ring-width: Width of the focus ring
   */
  --focus-ring-color: #{globals.$ion-border-focus-default};
  --focus-ring-width: #{globals.$ion-border-size-050};

  @include globals.padding(globals.$ion-space-150, globals.$ion-space-200);
  @include globals.border-radius(var(--border-radius));
  @include globals.typography(globals.$ion-body-sm-medium);

  gap: globals.$ion-space-100;

  line-height: globals.$ion-font-line-height-full;
}

// Outline Chip
// ---------------------------------------------

:host(.chip-outline) {
  border-width: globals.$ion-border-size-025;
  border-style: globals.$ion-border-style-solid;
}

// Chip: Focus
// ---------------------------------------------

:host(.ion-focused) {
  @include globals.focused-state(null, null, var(--focus-ring-color));
}

// Chip: Disabled
// ---------------------------------------------

:host(.chip-disabled)::after {
  @include globals.disabled-state();
}

// Chip Shapes
// ---------------------------------------------

:host(.chip-soft) {
  --border-radius: #{globals.$ion-border-radius-100};
}

:host(.chip-round) {
  --border-radius: #{globals.$ion-border-radius-400};
}

:host(.chip-rectangular) {
  --border-radius: #{globals.$ion-border-radius-0};
}

// Chip Icon
// ---------------------------------------------
::slotted(ion-icon) {
  font-size: globals.$ion-font-size-400;
}

// Size
// ---------------------------------------------

:host(.chip-small) {
  min-height: globals.$ion-scale-600;

  font-size: globals.$ion-font-size-300;
}

:host(.chip-large) {
  min-height: globals.$ion-scale-800;

  font-size: globals.$ion-font-size-350;
}

// Subtle Chip
// ---------------------------------------------

:host(.chip-subtle) {
  --background: #{globals.$ion-primitives-neutral-100};
  --color: #{globals.$ion-primitives-neutral-800};
}

:host(.chip-outline.chip-subtle) {
  border-color: globals.$ion-primitives-neutral-300;
}

// Bold Chip
// ---------------------------------------------

:host(.chip-bold) {
  --background: #{globals.$ion-bg-neutral-bold-default};
  --color: #{globals.$ion-bg-surface-default};
}

:host(.chip-outline.chip-bold) {
  // TODO(FW-6450): this is a made up design choice based on a
  // darker shade of the background color
  border-color: globals.$ion-text-default;
}

// Chip Colors
// ---------------------------------------------

// Subtle
:host(.chip-subtle.ion-color) {
  background: globals.current-color(base, $subtle: true);
  color: globals.current-color(contrast, $subtle: true);
}

:host(.chip-subtle.chip-outline.ion-color) {
  border-color: globals.current-color(shade, $subtle: true);
}

// Bold
:host(.chip-bold.ion-color) {
  background: globals.current-color(base);
  color: globals.current-color(contrast);
}

:host(.chip-bold.chip-outline.ion-color) {
  border-color: globals.current-color(shade);
}