@spectrum-web-components/badge 0.4.8 → 0.4.10-overlay.10

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/README.md +19 -12
  2. package/package.json +5 -5
  3. package/custom-elements.json +0 -176
package/README.md CHANGED
@@ -31,7 +31,7 @@ import { Badge } from '@spectrum-web-components/badge';
31
31
  <sp-tab-panel value="s">
32
32
 
33
33
  ```html demo
34
- <div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
34
+ <div style="display: flex; gap: var(--spectrum-spacing-75);">
35
35
  <sp-badge size="s">Label</sp-badge>
36
36
  <sp-badge size="s">
37
37
  <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
@@ -45,7 +45,7 @@ import { Badge } from '@spectrum-web-components/badge';
45
45
  <sp-tab-panel value="m">
46
46
 
47
47
  ```html demo
48
- <div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
48
+ <div style="display: flex; gap: var(--spectrum-spacing-75);">
49
49
  <sp-badge size="m">Label</sp-badge>
50
50
  <sp-badge size="m">
51
51
  <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
@@ -59,7 +59,7 @@ import { Badge } from '@spectrum-web-components/badge';
59
59
  <sp-tab-panel value="l">
60
60
 
61
61
  ```html demo
62
- <div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
62
+ <div style="display: flex; gap: var(--spectrum-spacing-75);">
63
63
  <sp-badge size="l">Label</sp-badge>
64
64
  <sp-badge size="l">
65
65
  <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
@@ -73,7 +73,7 @@ import { Badge } from '@spectrum-web-components/badge';
73
73
  <sp-tab-panel value="xl">
74
74
 
75
75
  ```html demo
76
- <div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
76
+ <div style="display: flex; gap: var(--spectrum-spacing-75);">
77
77
  <sp-badge size="xl">Label</sp-badge>
78
78
  <sp-badge size="xl">
79
79
  <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
@@ -92,7 +92,7 @@ The `<sp-badge>` can be customized with either semantic or non-semantic variants
92
92
  ### Semantic
93
93
 
94
94
  ```html demo
95
- <div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
95
+ <div style="display: flex; gap: var(--spectrum-spacing-75);">
96
96
  <sp-badge variant="neutral">Neutral</sp-badge>
97
97
  <sp-badge variant="informative">Informative</sp-badge>
98
98
  <sp-badge variant="positive">Positive</sp-badge>
@@ -105,41 +105,48 @@ The `<sp-badge>` can be customized with either semantic or non-semantic variants
105
105
  Non-semantic badge colors are no longer supported directly by Spectrum and Spectrum Web Components. You can mimic their delivery via the following CSS Custom Properties. These values for the `variant` attribute/property have not been marked as deprecated, but will no longer achieve the results you may have relied on in the past.
106
106
 
107
107
  ```html demo
108
- <div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
108
+ <div style="display: flex; gap: var(--spectrum-spacing-75);">
109
109
  <sp-badge
110
110
  variant="seafoam"
111
- style="--mod-badge-background-color-default: var(--spectrum-global-color-static-seafoam-600)"
111
+ static="black"
112
+ style="--mod-badge-background-color-default: var(--spectrum-seafoam-background-color-default)"
112
113
  >
113
114
  Seafoam
114
115
  </sp-badge>
115
116
  <sp-badge
116
117
  variant="indigo"
117
- style="--mod-badge-background-color-default: var(--spectrum-global-color-static-indigo-600)"
118
+ static="black"
119
+ style="--mod-badge-background-color-default: var(--spectrum-indigo-background-color-default)"
118
120
  >
119
121
  Indigo
120
122
  </sp-badge>
121
123
  <sp-badge
122
124
  variant="purple"
123
- style="--mod-badge-background-color-default: var(--spectrum-global-color-static-purple-600)"
125
+ static="black"
126
+ style="--mod-badge-background-color-default: var(--spectrum-purple-background-color-default)"
124
127
  >
125
128
  Purple
126
129
  </sp-badge>
127
130
  <sp-badge
128
131
  variant="fuchsia"
129
- style="--mod-badge-background-color-default: var(--spectrum-global-color-static-fuchsia-600)"
132
+ static="black"
133
+ style="--mod-badge-background-color-default: var(--spectrum-fuchsia-background-color-default)"
130
134
  >
131
135
  Fuchsia
132
136
  </sp-badge>
133
137
  <sp-badge
134
138
  variant="magenta"
135
- style="--mod-badge-background-color-default: var(--spectrum-global-color-static-magenta-600)"
139
+ static="black"
140
+ style="--mod-badge-background-color-default: var(--spectrum-magenta-background-color-default)"
136
141
  >
137
142
  Magenta
138
143
  </sp-badge>
139
144
  <sp-badge
140
145
  variant="yellow"
141
146
  static="black"
142
- style="--mod-badge-background-color-default: var(--spectrum-alias-background-color-yellow-default)"
147
+ style="
148
+ --mod-badge-background-color-default: var(--spectrum-yellow-background-color-default); --mod-badge-label-icon-color-white: var(--spectrum-black);
149
+ "
143
150
  >
144
151
  Yellow
145
152
  </sp-badge>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/badge",
3
- "version": "0.4.8",
3
+ "version": "0.4.10-overlay.10+7a73c9eee",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,11 +57,11 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.7.5",
61
- "@spectrum-web-components/shared": "^0.15.6"
60
+ "@spectrum-web-components/base": "^0.7.6-overlay.54+7a73c9eee",
61
+ "@spectrum-web-components/shared": "^0.15.8-overlay.10+7a73c9eee"
62
62
  },
63
63
  "devDependencies": {
64
- "@spectrum-css/badge": "^3.0.5"
64
+ "@spectrum-css/badge": "^3.0.19"
65
65
  },
66
66
  "types": "./src/index.d.ts",
67
67
  "customElements": "custom-elements.json",
@@ -69,5 +69,5 @@
69
69
  "./sp-*.js",
70
70
  "./**/*.dev.js"
71
71
  ],
72
- "gitHead": "fe316a3ee9fc753f0de98aece11e04227df73ab7"
72
+ "gitHead": "7a73c9eeec7dffb9c968f7f30586139b8e5ee348"
73
73
  }
package/custom-elements.json DELETED
@@ -1,176 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "sp-badge.js",
8
- "declarations": [],
9
- "exports": [
10
- {
11
- "kind": "custom-element-definition",
12
- "name": "sp-badge",
13
- "declaration": {
14
- "name": "Badge",
15
- "module": "/src/Badge.js"
16
- }
17
- }
18
- ]
19
- },
20
- {
21
- "kind": "javascript-module",
22
- "path": "src/Badge.js",
23
- "declarations": [
24
- {
25
- "kind": "variable",
26
- "name": "BADGE_VARIANTS",
27
- "type": {
28
- "text": "[\n 'accent',\n 'neutral',\n 'informative',\n 'positive',\n 'negative',\n 'fuchsia',\n 'indigo',\n 'magenta',\n 'purple',\n 'seafoam',\n 'yellow',\n]"
29
- },
30
- "default": "[\n 'accent',\n 'neutral',\n 'informative',\n 'positive',\n 'negative',\n 'fuchsia',\n 'indigo',\n 'magenta',\n 'purple',\n 'seafoam',\n 'yellow',\n]"
31
- },
32
- {
33
- "kind": "variable",
34
- "name": "FIXED_VALUES_DEPRECATED",
35
- "type": {
36
- "text": "array"
37
- },
38
- "default": "['top', 'bottom', 'left', 'right']"
39
- },
40
- {
41
- "kind": "variable",
42
- "name": "FIXED_VALUES",
43
- "type": {
44
- "text": "[\n 'inline-start',\n 'inline-end',\n 'block-start',\n 'block-end',\n]"
45
- },
46
- "default": "[\n 'inline-start',\n 'inline-end',\n 'block-start',\n 'block-end',\n]"
47
- },
48
- {
49
- "kind": "class",
50
- "description": "",
51
- "name": "Badge",
52
- "slots": [
53
- {
54
- "description": "Text label of the badge",
55
- "name": ""
56
- },
57
- {
58
- "description": "Optional icon that appears to the left of the label",
59
- "name": "icon"
60
- }
61
- ],
62
- "members": [
63
- {
64
- "kind": "field",
65
- "name": "fixed",
66
- "type": {
67
- "text": "FixedValues | undefined"
68
- },
69
- "privacy": "public",
70
- "attribute": "fixed",
71
- "reflects": true
72
- },
73
- {
74
- "kind": "field",
75
- "name": "_fixed",
76
- "type": {
77
- "text": "FixedValues | undefined"
78
- },
79
- "privacy": "private"
80
- },
81
- {
82
- "kind": "field",
83
- "name": "variant",
84
- "type": {
85
- "text": "BadgeVariant"
86
- },
87
- "privacy": "public",
88
- "default": "'informative'",
89
- "attribute": "variant",
90
- "reflects": true
91
- },
92
- {
93
- "kind": "field",
94
- "name": "hasIcon",
95
- "type": {
96
- "text": "boolean"
97
- },
98
- "privacy": "protected"
99
- }
100
- ],
101
- "attributes": [
102
- {
103
- "name": "fixed",
104
- "type": {
105
- "text": "FixedValues | undefined"
106
- },
107
- "fieldName": "fixed"
108
- },
109
- {
110
- "name": "variant",
111
- "type": {
112
- "text": "BadgeVariant"
113
- },
114
- "default": "'informative'",
115
- "fieldName": "variant"
116
- }
117
- ],
118
- "mixins": [
119
- {
120
- "name": "SizedMixin",
121
- "package": "@spectrum-web-components/base"
122
- },
123
- {
124
- "name": "ObserveSlotText",
125
- "package": "@spectrum-web-components/shared/src/observe-slot-text.js"
126
- },
127
- {
128
- "name": "ObserveSlotPresence",
129
- "package": "@spectrum-web-components/shared/src/observe-slot-presence.js"
130
- }
131
- ],
132
- "superclass": {
133
- "name": "SpectrumElement",
134
- "package": "@spectrum-web-components/base"
135
- },
136
- "tagName": "sp-badge",
137
- "customElement": true
138
- }
139
- ],
140
- "exports": [
141
- {
142
- "kind": "js",
143
- "name": "BADGE_VARIANTS",
144
- "declaration": {
145
- "name": "BADGE_VARIANTS",
146
- "module": "src/Badge.js"
147
- }
148
- },
149
- {
150
- "kind": "js",
151
- "name": "FIXED_VALUES_DEPRECATED",
152
- "declaration": {
153
- "name": "FIXED_VALUES_DEPRECATED",
154
- "module": "src/Badge.js"
155
- }
156
- },
157
- {
158
- "kind": "js",
159
- "name": "FIXED_VALUES",
160
- "declaration": {
161
- "name": "FIXED_VALUES",
162
- "module": "src/Badge.js"
163
- }
164
- },
165
- {
166
- "kind": "js",
167
- "name": "Badge",
168
- "declaration": {
169
- "name": "Badge",
170
- "module": "src/Badge.js"
171
- }
172
- }
173
- ]
174
- }
175
- ]
176
- }