fix: support non-flat "color" application

adobe · Apr 6, 2023 · efc0159 · efc0159
1 parent fe316a3
commit efc0159
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/packages/swatch/src/swatch.css b/packages/swatch/src/swatch.css
@@ -11,3 +11,23 @@ governing permissions and limitations under the License.
 */
 
 @import './spectrum-swatch.css';
+
+/**
+ * Begin work around for https://github.com/adobe/spectrum-css/issues/1460
+ */
+
+.fill:before {
+    background: var(--spectrum-picked-color, transparent);
+}
+
+:host([border='none']) .fill:before {
+    background: var(--spectrum-picked-color, transparent);
+}
+
+:host .is-image .fill:before {
+    background: #0000;
+}
+
+/**
+ * End workaround for https://github.com/adobe/spectrum-css/issues/1460
+ */
diff --git a/packages/swatch/stories/swatch.stories.ts b/packages/swatch/stories/swatch.stories.ts
@@ -96,6 +96,10 @@ const template = ({
 };
 
 export const Default = (args: Properties): TemplateResult => template(args);
+export const gradient = (args: Properties): TemplateResult => template(args);
+gradient.args = {
+    color: 'linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)',
+};
 export const mixedValue = (args: Properties): TemplateResult => template(args);
 mixedValue.args = {
     mixedValue: true,