@sb1/ffe-chips 1.3.3 → 2.0.0

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 (4) hide show
  1. package/css/chip.css +23 -75
  2. package/less/chip.less +48 -18
  3. package/package.json +2 -2
  4. package/less/theme.less +0 -76
package/css/chip.css CHANGED
@@ -1,67 +1,8 @@
1
- :root,
2
- :host {
3
- --ffe-v-chip-text-color: var(--ffe-farge-svart);
4
- --ffe-v-chip-background-color: var(--ffe-farge-hvit);
5
- --ffe-v-chip-border-color: var(--ffe-farge-frost-70);
6
- --ffe-v-chip-text-color-hover: var(--ffe-farge-svart);
7
- --ffe-v-chip-background-color-hover: var(--ffe-farge-frost-30);
8
- --ffe-v-chip-border-color-hover: var(--ffe-farge-frost-70);
9
- --ffe-v-chip-text-color-active: var(--ffe-farge-svart);
10
- --ffe-v-chip-background-color-active: var(--ffe-farge-frost-70);
11
- --ffe-v-chip-border-color-active: var(--ffe-farge-frost-70);
12
- --ffe-v-chip-text-color-selected: var(--ffe-farge-hvit);
13
- --ffe-v-chip-background-color-selected: var(--ffe-farge-vann);
14
- --ffe-v-chip-border-color-selected: var(--ffe-farge-vann);
15
- --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-hvit);
16
- --ffe-v-chip-background-color-selected-hover: var(--ffe-farge-vann-70);
17
- --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-vann);
18
- --ffe-v-chip-outline-color: var(--ffe-farge-vann);
19
- }
20
- @media (prefers-color-scheme: dark) {
21
- :root .regard-color-scheme-preference,
22
- :host .regard-color-scheme-preference {
23
- --ffe-v-chip-text-color: var(--ffe-farge-hvit);
24
- --ffe-v-chip-background-color: var(--ffe-farge-svart);
25
- --ffe-v-chip-border-color: var(--ffe-farge-graa);
26
- --ffe-v-chip-text-color-hover: var(--ffe-farge-hvit);
27
- --ffe-v-chip-background-color-hover: var(--ffe-farge-koksgraa);
28
- --ffe-v-chip-border-color-hover: var(--ffe-farge-graa);
29
- --ffe-v-chip-text-color-active: var(--ffe-farge-hvit);
30
- --ffe-v-chip-background-color-active: var(--ffe-farge-vann);
31
- --ffe-v-chip-border-color-active: var(--ffe-farge-vann);
32
- --ffe-v-chip-text-color-selected: var(--ffe-farge-hvit);
33
- --ffe-v-chip-background-color-selected: var(--ffe-farge-vann);
34
- --ffe-v-chip-border-color-selected: var(--ffe-farge-vann);
35
- --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-hvit);
36
- --ffe-v-chip-background-color-selected-hover: var(--ffe-farge-vann-70);
37
- --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-vann);
38
- --ffe-v-chip-outline-color: var(--ffe-farge-hvit);
39
- }
40
- }
41
- :root .ffe-chip--on-colored-bg,
42
- :host .ffe-chip--on-colored-bg {
43
- --ffe-v-chip-text-color: var(--ffe-farge-hvit);
44
- --ffe-v-chip-background-color: var(--ffe-farge-vann);
45
- --ffe-v-chip-border-color: var(--ffe-farge-hvit);
46
- --ffe-v-chip-text-color-hover: var(--ffe-farge-hvit);
47
- --ffe-v-chip-background-color-hover: var(--ffe-farge-vann-70);
48
- --ffe-v-chip-border-color-hover: var(--ffe-farge-hvit);
49
- --ffe-v-chip-text-color-active: var(--ffe-farge-svart);
50
- --ffe-v-chip-background-color-active: var(--ffe-farge-vann-70);
51
- --ffe-v-chip-border-color-active: var(--ffe-farge-vann-70);
52
- --ffe-v-chip-text-color-selected: var(--ffe-farge-svart);
53
- --ffe-v-chip-background-color-selected: var(--ffe-farge-hvit);
54
- --ffe-v-chip-border-color-selected: var(--ffe-farge-frost);
55
- --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-svart);
56
- --ffe-v-chip-background-color-selected-hover: var(--ffe-farge-frost-30);
57
- --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-frost);
58
- --ffe-v-chip-outline-color: var(--ffe-farge-hvit);
59
- }
60
1
  .ffe-chip {
61
2
  --border-width: 1px;
62
- --background-color: var(--ffe-v-chip-background-color);
63
- --border-color: var(--ffe-v-chip-border-color);
64
- --text-color: var(--ffe-v-chip-text-color);
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);
65
6
  --border-radius: 24px;
66
7
  --text-offset: 12px;
67
8
  --icon-offset: var(--ffe-spacing-xs);
@@ -102,34 +43,41 @@
102
43
  }
103
44
  @media (hover: hover) and (pointer: fine) {
104
45
  .ffe-chip:hover {
105
- --background-color: var(--ffe-v-chip-background-color-hover);
106
- --border-color: var(--ffe-v-chip-border-color-hover);
107
- --text-color: var(--ffe-v-chip-text-color-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);
108
49
  }
109
50
  }
110
51
  .ffe-chip:focus-visible {
111
- outline: 2px solid var(--ffe-v-chip-outline-color);
52
+ outline: 2px solid var(--border-color);
112
53
  outline-offset: 3px;
113
54
  }
114
55
  .ffe-chip:active {
115
- --background-color: var(--ffe-v-chip-background-color-active);
116
- --border-color: var(--ffe-v-chip-border-color-active);
117
- --text-color: var(--ffe-v-chip-text-color-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);
118
59
  -webkit-transform: scale(0.97);
119
60
  transform: scale(0.97);
120
61
  }
121
62
  .ffe-chip--selected {
122
- --background-color: var(--ffe-v-chip-background-color-selected);
123
- --border-color: var(--ffe-v-chip-border-color-selected);
124
- --text-color: var(--ffe-v-chip-text-color-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);
125
66
  }
126
67
  @media (hover: hover) and (pointer: fine) {
127
68
  .ffe-chip--selected:hover {
128
- --background-color: var(--ffe-v-chip-background-color-selected-hover);
129
- --border-color: var(--ffe-v-chip-border-color-selected-hover);
130
- --text-color: var(--ffe-v-chip-text-color-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);
131
72
  }
132
73
  }
74
+ .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);
78
+ -webkit-transform: scale(0.97);
79
+ transform: scale(0.97);
80
+ }
133
81
  .ffe-chip--sm {
134
82
  --text-offset: 12px;
135
83
  --space-between: var(--ffe-spacing-2xs);
package/less/chip.less CHANGED
@@ -1,10 +1,8 @@
1
- @import 'theme';
2
-
3
1
  .ffe-chip {
4
2
  --border-width: 1px;
5
- --background-color: var(--ffe-v-chip-background-color);
6
- --border-color: var(--ffe-v-chip-border-color);
7
- --text-color: var(--ffe-v-chip-text-color);
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);
8
6
  --border-radius: 24px;
9
7
  --text-offset: 12px;
10
8
  --icon-offset: var(--ffe-spacing-xs);
@@ -41,39 +39,71 @@
41
39
 
42
40
  @media (hover: hover) and (pointer: fine) {
43
41
  &:hover {
44
- --background-color: var(--ffe-v-chip-background-color-hover);
45
- --border-color: var(--ffe-v-chip-border-color-hover);
46
- --text-color: var(--ffe-v-chip-text-color-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
+ );
47
51
  }
48
52
  }
49
53
 
50
54
  &:focus-visible {
51
- outline: 2px solid var(--ffe-v-chip-outline-color);
55
+ outline: 2px solid var(--border-color);
52
56
  outline-offset: 3px;
53
57
  }
54
58
 
55
59
  &:active {
56
- --background-color: var(--ffe-v-chip-background-color-active);
57
- --border-color: var(--ffe-v-chip-border-color-active);
58
- --text-color: var(--ffe-v-chip-text-color-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);
59
65
 
60
66
  transform: scale(0.97);
61
67
  }
62
68
 
63
69
  &--selected {
64
- --background-color: var(--ffe-v-chip-background-color-selected);
65
- --border-color: var(--ffe-v-chip-border-color-selected);
66
- --text-color: var(--ffe-v-chip-text-color-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
+ );
67
79
 
68
80
  @media (hover: hover) and (pointer: fine) {
69
81
  &:hover {
70
82
  --background-color: var(
71
- --ffe-v-chip-background-color-selected-hover
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
72
90
  );
73
- --border-color: var(--ffe-v-chip-border-color-selected-hover);
74
- --text-color: var(--ffe-v-chip-text-color-selected-hover);
75
91
  }
76
92
  }
93
+
94
+ &: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
+ );
104
+
105
+ transform: scale(0.97);
106
+ }
77
107
  }
78
108
  }
79
109
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-chips",
3
- "version": "1.3.3",
3
+ "version": "2.0.0",
4
4
  "description": "Chips are compact elements that represent an input, attribute, or action.",
5
5
  "keywords": [
6
6
  "ffe"
@@ -29,5 +29,5 @@
29
29
  "publishConfig": {
30
30
  "access": "public"
31
31
  },
32
- "gitHead": "9f3d07c726368b31a79a15acbb545809c58ff413"
32
+ "gitHead": "7cc4c96b5197d1c89366e8f75aafa88c16c84575"
33
33
  }
package/less/theme.less DELETED
@@ -1,76 +0,0 @@
1
- :root,
2
- :host {
3
- --ffe-v-chip-text-color: var(--ffe-farge-svart);
4
- --ffe-v-chip-background-color: var(--ffe-farge-hvit);
5
- --ffe-v-chip-border-color: 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);
9
- --ffe-v-chip-border-color-hover: var(--ffe-farge-frost-70);
10
- //
11
- --ffe-v-chip-text-color-active: var(--ffe-farge-svart);
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
- //
15
- --ffe-v-chip-text-color-selected: var(--ffe-farge-hvit);
16
- --ffe-v-chip-background-color-selected: var(--ffe-farge-vann);
17
- --ffe-v-chip-border-color-selected: var(--ffe-farge-vann);
18
- //
19
- --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-hvit);
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);
24
-
25
- @media (prefers-color-scheme: dark) {
26
- .regard-color-scheme-preference {
27
- --ffe-v-chip-text-color: 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);
32
- --ffe-v-chip-background-color-hover: var(--ffe-farge-koksgraa);
33
- --ffe-v-chip-border-color-hover: var(--ffe-farge-graa);
34
- //
35
- --ffe-v-chip-text-color-active: var(--ffe-farge-hvit);
36
- --ffe-v-chip-background-color-active: var(--ffe-farge-vann);
37
- --ffe-v-chip-border-color-active: var(--ffe-farge-vann);
38
- //
39
- --ffe-v-chip-text-color-selected: var(--ffe-farge-hvit);
40
- --ffe-v-chip-background-color-selected: var(--ffe-farge-vann);
41
- --ffe-v-chip-border-color-selected: var(--ffe-farge-vann);
42
- //
43
- --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-hvit);
44
- --ffe-v-chip-background-color-selected-hover: var(
45
- --ffe-farge-vann-70
46
- );
47
- --ffe-v-chip-border-color-selected-hover: var(--ffe-farge-vann);
48
- //
49
- --ffe-v-chip-outline-color: var(--ffe-farge-hvit);
50
- }
51
- }
52
-
53
- .ffe-chip--on-colored-bg {
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
- //
62
- --ffe-v-chip-text-color-active: var(--ffe-farge-svart);
63
- --ffe-v-chip-background-color-active: var(--ffe-farge-vann-70);
64
- --ffe-v-chip-border-color-active: var(--ffe-farge-vann-70);
65
- //
66
- --ffe-v-chip-text-color-selected: var(--ffe-farge-svart);
67
- --ffe-v-chip-background-color-selected: var(--ffe-farge-hvit);
68
- --ffe-v-chip-border-color-selected: var(--ffe-farge-frost);
69
- //
70
- --ffe-v-chip-text-color-selected-hover: var(--ffe-farge-svart);
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);
75
- }
76
- }