@sb1/ffe-chips 1.1.0 → 1.2.1

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/less/chip.less +2 -2
  2. package/less/theme.less +40 -22
  3. package/package.json +3 -3
package/less/chip.less CHANGED
@@ -48,8 +48,8 @@
48
48
  }
49
49
 
50
50
  &:focus-visible {
51
- outline: 1px solid currentcolor;
52
- outline-offset: 2px;
51
+ outline: 2px solid var(--ffe-v-chip-outline-color);
52
+ outline-offset: 3px;
53
53
  }
54
54
 
55
55
  &:active {
package/less/theme.less CHANGED
@@ -1,58 +1,76 @@
1
1
  :root,
2
2
  :host {
3
3
  --ffe-v-chip-text-color: var(--ffe-farge-svart);
4
- --ffe-v-chip-background-color: var(--ffe-farge-frost-30);
4
+ --ffe-v-chip-background-color: var(--ffe-farge-hvit);
5
5
  --ffe-v-chip-border-color: var(--ffe-farge-frost-70);
6
- --ffe-v-chip-text-color-color-hover: var(--ffe-farge-svart);
7
- --ffe-v-chip-background-color-hover: var(--ffe-farge-frost-70);
6
+ //
7
+ --ffe-v-chip-text-color-hover: var(--ffe-farge-svart);
8
+ --ffe-v-chip-background-color-hover: var(--ffe-farge-frost-30);
8
9
  --ffe-v-chip-border-color-hover: var(--ffe-farge-frost-70);
10
+ //
9
11
  --ffe-v-chip-text-color-active: var(--ffe-farge-svart);
10
- --ffe-v-chip-background-color-active: var(--ffe-farge-frost);
11
- --ffe-v-chip-border-color-active: var(--ffe-farge-frost);
12
+ --ffe-v-chip-background-color-active: var(--ffe-farge-frost-70);
13
+ --ffe-v-chip-border-color-active: var(--ffe-farge-frost-70);
14
+ //
12
15
  --ffe-v-chip-text-color-selected: var(--ffe-farge-hvit);
13
16
  --ffe-v-chip-background-color-selected: var(--ffe-farge-vann);
14
17
  --ffe-v-chip-border-color-selected: var(--ffe-farge-vann);
18
+ //
15
19
  --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-hvit);
16
- --ffe-v-chip-background-color-selected-hover: var(--ffe-farge-fjell);
17
- --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-fjell);
20
+ --ffe-v-chip-background-color-selected-hover: var(--ffe-farge-vann-70);
21
+ --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-vann);
22
+ //
23
+ --ffe-v-chip-outline-color: var(--ffe-farge-vann);
18
24
 
19
25
  @media (prefers-color-scheme: dark) {
20
26
  .regard-color-scheme-preference {
21
27
  --ffe-v-chip-text-color: var(--ffe-farge-hvit);
22
- --ffe-v-chip-background-color: var(--ffe-farge-moerkgraa);
23
- --ffe-v-chip-border-color: var(--ffe-farge-koksgraa);
24
- --ffe-v-chip-text-color-color-hover: var(--ffe-farge-hvit);
28
+ --ffe-v-chip-background-color: var(--ffe-farge-svart);
29
+ --ffe-v-chip-border-color: var(--ffe-farge-graa);
30
+ //
31
+ --ffe-v-chip-text-color-hover: var(--ffe-farge-hvit);
25
32
  --ffe-v-chip-background-color-hover: var(--ffe-farge-koksgraa);
26
- --ffe-v-chip-border-color-hover: var(--ffe-farge-koksgraa);
33
+ --ffe-v-chip-border-color-hover: var(--ffe-farge-graa);
34
+ //
27
35
  --ffe-v-chip-text-color-active: var(--ffe-farge-hvit);
28
36
  --ffe-v-chip-background-color-active: var(--ffe-farge-vann);
29
37
  --ffe-v-chip-border-color-active: var(--ffe-farge-vann);
38
+ //
30
39
  --ffe-v-chip-text-color-selected: var(--ffe-farge-hvit);
31
40
  --ffe-v-chip-background-color-selected: var(--ffe-farge-vann);
32
41
  --ffe-v-chip-border-color-selected: var(--ffe-farge-vann);
42
+ //
33
43
  --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-hvit);
34
44
  --ffe-v-chip-background-color-selected-hover: var(
35
- --ffe-farge-fjell
45
+ --ffe-farge-vann-70
36
46
  );
37
- --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-fjell);
47
+ --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-vann);
48
+ //
49
+ --ffe-v-chip-outline-color: var(--ffe-farge-hvit);
38
50
  }
39
51
  }
40
52
 
41
53
  .ffe-chip--on-colored-bg {
42
- --ffe-v-chip-text-color: var(--ffe-farge-svart);
43
- --ffe-v-chip-background-color: var(--ffe-farge-hvit);
44
- --ffe-v-chip-border-color: var(--ffe-farge-vann-70);
45
- --ffe-v-chip-text-color-color-hover: var(--ffe-farge-svart);
46
- --ffe-v-chip-background-color-hover: var(--ffe-farge-vann-30);
47
- --ffe-v-chip-border-color-hover: var(--ffe-farge-vann-30);
54
+ --ffe-v-chip-text-color: var(--ffe-farge-hvit);
55
+ --ffe-v-chip-background-color: var(--ffe-farge-vann);
56
+ --ffe-v-chip-border-color: var(--ffe-farge-hvit);
57
+ //
58
+ --ffe-v-chip-text-color-hover: var(--ffe-farge-hvit);
59
+ --ffe-v-chip-background-color-hover: var(--ffe-farge-vann-70);
60
+ --ffe-v-chip-border-color-hover: var(--ffe-farge-hvit);
61
+ //
48
62
  --ffe-v-chip-text-color-active: var(--ffe-farge-svart);
49
63
  --ffe-v-chip-background-color-active: var(--ffe-farge-vann-70);
50
64
  --ffe-v-chip-border-color-active: var(--ffe-farge-vann-70);
65
+ //
51
66
  --ffe-v-chip-text-color-selected: var(--ffe-farge-svart);
52
67
  --ffe-v-chip-background-color-selected: var(--ffe-farge-hvit);
53
- --ffe-v-chip-border-color-selected: var(--ffe-farge-hvit);
68
+ --ffe-v-chip-border-color-selected: var(--ffe-farge-frost);
69
+ //
54
70
  --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-svart);
55
- --ffe-v-chip-background-color-selected-hover: var(--ffe-farge-vann-30);
56
- --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-vann-30);
71
+ --ffe-v-chip-background-color-selected-hover: var(--ffe-farge-frost-30);
72
+ --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-frost);
73
+ //
74
+ --ffe-v-chip-outline-color: var(--ffe-farge-hvit);
57
75
  }
58
76
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-chips",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "description": "Chips are compact elements that represent an input, attribute, or action.",
5
5
  "keywords": [
6
6
  "ffe"
@@ -19,7 +19,7 @@
19
19
  "test": "npm run lint"
20
20
  },
21
21
  "dependencies": {
22
- "@sb1/ffe-core": "^29.1.3"
22
+ "@sb1/ffe-core": "^29.1.4"
23
23
  },
24
24
  "devDependencies": {
25
25
  "@sb1/ffe-buildtool": "^0.9.0"
@@ -27,5 +27,5 @@
27
27
  "publishConfig": {
28
28
  "access": "public"
29
29
  },
30
- "gitHead": "1390475cc0a1d33df73fda6b73168c2e5d4b2c9b"
30
+ "gitHead": "d27089e01efb5feed58df9f4acd48981a8dd9e6f"
31
31
  }