feat: add separate field label mixin styles

Author: rise-erpelding

1st-gen/packages/field-label/package.json

@@ -33,6 +33,7 @@
             "development": "./src/FieldLabelMixin.dev.js",
             "default": "./src/FieldLabelMixin.js"
         },
+        "./src/field-label-mixin.css.js": "./src/field-label-mixin.css.js",
         "./src/field-label-overrides.css.js": "./src/field-label-overrides.css.js",
         "./src/field-label.css.js": "./src/field-label.css.js",
         "./sp-field-label-mixin.js": {

1st-gen/packages/field-label/src/FieldLabelMixin.ts

@@ -20,7 +20,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-asterisk100.js';
 
-import styles from './field-label.css.js';
+import styles from './field-label-mixin.css.js';
 import asteriskIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-asterisk.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared';

1st-gen/packages/field-label/src/field-label-mixin.css

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@import url("./field-label-overrides.css");
+
+:host,
+:host([size="m"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-75);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-75);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
+}
+
+:host([size="s"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-75);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-75);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-100);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
+}
+
+:host([size="l"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-100);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-100);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
+}
+
+:host([size="xl"]) {
+    --spectrum-field-label-min-height: var(--spectrum-component-height-200);
+    --spectrum-field-label-font-size: var(--spectrum-font-size-200);
+    --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large);
+    --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200);
+    --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
+}
+
+label {
+    box-sizing: border-box;
+    min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height));
+    padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text)));
+    padding-inline: 0;
+    padding-inline: var(--mod-fieldlabel-padding-inline, 0);
+    margin-block: 0;
+    margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0));
+    margin-inline: 0;
+    margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0));
+    font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size));
+    font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-regular-font-weight));
+    line-height: var(--mod-fieldlabel-line-height, var(--spectrum-line-height-100));
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+    color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default)));
+    display: inline-block;
+}
+
+label[hidden] {
+    display: none;
+}
+
+label:lang(ja),
+label:lang(ko),
+label:lang(zh) {
+    --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100));
+}
+
+:host([disabled]) label {
+    --mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
+}
+
+.required-icon {
+    color: inherit;
+    margin-block: 0;
+    margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
+    vertical-align: initial;
+    vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline);
+}
+
+@media (forced-colors: active) {
+    :host([disabled]) label {
+        --highcontrast-field-label-content-color: GrayText;
+    }
+}