@sb1/ffe-chips 2.0.3 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/css/chip.css +12 -18
  2. package/less/chip.less +12 -42
  3. package/package.json +3 -3
package/css/chip.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .ffe-chip {
2
2
  --border-width: 1px;
3
- --background-color: var(--ffe-color-component-chips-default-fill-default);
4
- --border-color: var(--ffe-color-component-chips-default-border-default);
5
- --text-color: var(--ffe-color-component-chips-default-foreground-default);
3
+ --background-color: var(--ffe-color-fill-primary-invisible);
4
+ --border-color: var(--ffe-color-border-primary-default);
5
+ --text-color: var(--ffe-color-foreground-default);
6
6
  --border-radius: 24px;
7
7
  --text-offset: 12px;
8
8
  --icon-offset: var(--ffe-spacing-xs);
@@ -43,9 +43,8 @@
43
43
  }
44
44
  @media (hover: hover) and (pointer: fine) {
45
45
  .ffe-chip:hover {
46
- --background-color: var(--ffe-color-component-chips-default-fill-hover);
47
- --border-color: var(--ffe-color-component-chips-default-border-hover);
48
- --text-color: var(--ffe-color-component-chips-default-foreground-hover);
46
+ --background-color: var(--ffe-color-fill-primary-subtle-hover);
47
+ --border-color: var(--ffe-color-border-primary-hover);
49
48
  }
50
49
  }
51
50
  .ffe-chip:focus-visible {
@@ -53,28 +52,23 @@
53
52
  outline-offset: 3px;
54
53
  }
55
54
  .ffe-chip:active {
56
- --background-color: var(--ffe-color-component-chips-default-fill-pressed);
57
- --border-color: var(--ffe-color-component-chips-default-border-pressed);
58
- --text-color: var(--ffe-color-component-chips-default-foreground-hover);
55
+ --background-color: var(var(--ffe-color-fill-primary-subtle-pressed));
56
+ --border-color: var(--ffe-color-border-primary-pressed);
59
57
  -webkit-transform: scale(0.97);
60
58
  transform: scale(0.97);
61
59
  }
62
60
  .ffe-chip--selected {
63
- --background-color: var(--ffe-color-component-chips-selected-fill-default);
64
- --border-color: var(--ffe-color-component-chips-selected-border-default);
65
- --text-color: var(--ffe-color-component-chips-selected-foreground-default);
61
+ --background-color: var(--ffe-color-fill-primary-selected);
62
+ --border-color: var(--ffe-color-border-primary-selected);
63
+ --text-color: var(--ffe-color-foreground-inverse);
66
64
  }
67
65
  @media (hover: hover) and (pointer: fine) {
68
66
  .ffe-chip--selected:hover {
69
- --background-color: var(--ffe-color-component-chips-selected-fill-hover);
70
- --border-color: var(--ffe-color-component-chips-selected-border-hover);
71
- --text-color: var(--ffe-color-component-chips-selected-foreground-hover);
67
+ --background-color: var(--ffe-color-fill-primary-selected-hover);
72
68
  }
73
69
  }
74
70
  .ffe-chip--selected:active {
75
- --background-color: var(--ffe-color-component-chips-selected-fill-pressed);
76
- --border-color: var(--ffe-color-component-chips-selected-border-pressed);
77
- --text-color: var(--ffe-color-component-chips-selected-foreground-hover);
71
+ --background-color: var(--ffe-color-fill-primary-selected-pressed);
78
72
  -webkit-transform: scale(0.97);
79
73
  transform: scale(0.97);
80
74
  }
package/less/chip.less CHANGED
@@ -1,8 +1,8 @@
1
1
  .ffe-chip {
2
2
  --border-width: 1px;
3
- --background-color: var(--ffe-color-component-chips-default-fill-default);
4
- --border-color: var(--ffe-color-component-chips-default-border-default);
5
- --text-color: var(--ffe-color-component-chips-default-foreground-default);
3
+ --background-color: var(--ffe-color-fill-primary-invisible);
4
+ --border-color: var(--ffe-color-border-primary-default);
5
+ --text-color: var(--ffe-color-foreground-default);
6
6
  --border-radius: 24px;
7
7
  --text-offset: 12px;
8
8
  --icon-offset: var(--ffe-spacing-xs);
@@ -39,15 +39,8 @@
39
39
 
40
40
  @media (hover: hover) and (pointer: fine) {
41
41
  &:hover {
42
- --background-color: var(
43
- --ffe-color-component-chips-default-fill-hover
44
- );
45
- --border-color: var(
46
- --ffe-color-component-chips-default-border-hover
47
- );
48
- --text-color: var(
49
- --ffe-color-component-chips-default-foreground-hover
50
- );
42
+ --background-color: var(--ffe-color-fill-primary-subtle-hover);
43
+ --border-color: var(--ffe-color-border-primary-hover);
51
44
  }
52
45
  }
53
46
 
@@ -57,50 +50,27 @@
57
50
  }
58
51
 
59
52
  &:active {
60
- --background-color: var(
61
- --ffe-color-component-chips-default-fill-pressed
62
- );
63
- --border-color: var(--ffe-color-component-chips-default-border-pressed);
64
- --text-color: var(--ffe-color-component-chips-default-foreground-hover);
53
+ --background-color: var(var(--ffe-color-fill-primary-subtle-pressed));
54
+ --border-color: var(--ffe-color-border-primary-pressed);
65
55
 
66
56
  transform: scale(0.97);
67
57
  }
68
58
 
69
59
  &--selected {
70
- --background-color: var(
71
- --ffe-color-component-chips-selected-fill-default
72
- );
73
- --border-color: var(
74
- --ffe-color-component-chips-selected-border-default
75
- );
76
- --text-color: var(
77
- --ffe-color-component-chips-selected-foreground-default
78
- );
60
+ --background-color: var(--ffe-color-fill-primary-selected);
61
+ --border-color: var(--ffe-color-border-primary-selected);
62
+ --text-color: var(--ffe-color-foreground-inverse);
79
63
 
80
64
  @media (hover: hover) and (pointer: fine) {
81
65
  &:hover {
82
66
  --background-color: var(
83
- --ffe-color-component-chips-selected-fill-hover
84
- );
85
- --border-color: var(
86
- --ffe-color-component-chips-selected-border-hover
87
- );
88
- --text-color: var(
89
- --ffe-color-component-chips-selected-foreground-hover
67
+ --ffe-color-fill-primary-selected-hover
90
68
  );
91
69
  }
92
70
  }
93
71
 
94
72
  &:active {
95
- --background-color: var(
96
- --ffe-color-component-chips-selected-fill-pressed
97
- );
98
- --border-color: var(
99
- --ffe-color-component-chips-selected-border-pressed
100
- );
101
- --text-color: var(
102
- --ffe-color-component-chips-selected-foreground-hover
103
- );
73
+ --background-color: var(--ffe-color-fill-primary-selected-pressed);
104
74
 
105
75
  transform: scale(0.97);
106
76
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-chips",
3
- "version": "2.0.3",
3
+ "version": "2.0.4",
4
4
  "description": "Chips are compact elements that represent an input, attribute, or action.",
5
5
  "keywords": [
6
6
  "ffe"
@@ -21,7 +21,7 @@
21
21
  "build": "lessc less/chip.less css/chip.css --autoprefix"
22
22
  },
23
23
  "dependencies": {
24
- "@sb1/ffe-core": "^30.0.0"
24
+ "@sb1/ffe-core": "^30.0.1"
25
25
  },
26
26
  "devDependencies": {
27
27
  "@sb1/ffe-buildtool": "^0.10.0"
@@ -29,5 +29,5 @@
29
29
  "publishConfig": {
30
30
  "access": "public"
31
31
  },
32
- "gitHead": "5a72f08b0873cc96b0d439dd029839db4d5d4ea9"
32
+ "gitHead": "abedc811686859a152f05182aeece4ac8667949a"
33
33
  }