feat(fieldlabel)!: migrate to core tokens (CSS-102) (#1476)

BREAKING CHANGE: migrates FieldLabel to core tokens

Co-authored-by: Monet Fort <lunarfusion@users.noreply.github.com>
Co-authored-by: Patrick Fulton <pfulton@users.noreply.github.com>

Author: 3 people

components/fieldlabel/gulpfile.js

@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');

components/fieldlabel/index.css

@@ -10,47 +10,85 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "../vars/css/components/spectrum-fieldlabel.css";
+
+/* Component level tokens currently missing in core-tokens as of July 2022 or are simply incorrect */
+.spectrum--medium {
+  --spectrum-field-label-top-to-asterisk-small: 8px;
+}
+
+.spectrum--large {
+  --spectrum-field-label-top-to-asterisk-small: 11px;
+}
 
 .spectrum-FieldLabel--sizeS {
-  @remapvars {
-    find: --spectrum-fieldlabel-s-;
-    replace: --spectrum-fieldlabel-;
-  }
+  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
+  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
+
+  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
+  --spectrum-fieldlabel-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+  --spectrum-fieldlabel-asterisk-gap: var(--spectrum-field-label-top-to-asterisk-small);
+  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
+  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
+  --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small);
 }
 
 .spectrum-FieldLabel--sizeM {
-  @remapvars {
-    find: --spectrum-fieldlabel-m-;
-    replace: --spectrum-fieldlabel-;
-  }
+  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
+  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
+  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
+
+  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
+  --spectrum-fieldlabel-cjk-line-height: var(--spectrum-cjk-line-height-200);
+
+  --spectrum-fieldlabel-asterisk-gap: var(--spectrum-field-label-top-to-asterisk-medium);
+  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
+  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+  --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
 }
 
 .spectrum-FieldLabel--sizeL {
-  @remapvars {
-    find: --spectrum-fieldlabel-l-;
-    replace: --spectrum-fieldlabel-;
-  }
+  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
+  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
+  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
+
+  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
+  --spectrum-fieldlabel-cjk-line-height: var(--spectrum-cjk-line-height-100);
+
+  --spectrum-fieldlabel-asterisk-gap: var(--spectrum-field-label-top-to-asterisk-large);
+  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-100);
+  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+  --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large);
 }
 
 .spectrum-FieldLabel--sizeXL {
-  @remapvars {
-    find: --spectrum-fieldlabel-xl-;
-    replace: --spectrum-fieldlabel-;
-  }
+  --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
+  --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
+  --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
+
+  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
+  --spectrum-fieldlabel-cjk-line-height: var(--spectrum-cjk-line-height-200);
+
+
+  --spectrum-fieldlabel-asterisk-gap: var(--spectrum-field-label-top-to-asterisk-extra-large);
+  --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-200);
+  --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
+  --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large);
 }
 
 .spectrum-FieldLabel {
   display: block;
 
   box-sizing: border-box;
 
-  padding-block: var(--spectrum-fieldlabel-padding-top) var(--spectrum-fieldlabel-padding-bottom);
+  padding-block: var(--spectrum-fieldlabel-top-to-text) var(--spectrum-fieldlabel-bottom-to-text);
   padding-inline: 0;
 
-  font-size: var(--spectrum-fieldlabel-text-size);
-  font-weight: var(--spectrum-fieldlabel-text-font-weight);
-  line-height: var(--spectrum-fieldlabel-text-line-height);
+  font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size));
+  font-weight: var(--mod-font-weight-regular, var(--spectrum-font-weight-regular));
+
+  line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height));
 
   vertical-align: top;
 
@@ -59,50 +97,74 @@ governing permissions and limitations under the License.
   font-smoothing: subpixel-antialiased;
 }
 
+/* international lang support */
+.spectrum-FieldLabel {
+
+  &:lang(ja),
+  &:lang(zh),
+  &:lang(ko) {
+    line-height: var(--mod-fieldlabel-cjk-line-height, var(--spectrum-fieldlabel-cjk-line-height));
+  }
+}
+
 .spectrum-FieldLabel-requiredIcon {
-  margin-block: 0; /* Previously used this improperly, it doesn't reposition asterisk, just increased top margin on the whole field label var(--spectrum-fieldlabel-asterisk-margin-y) */
-  margin-inline: var(--spectrum-fieldlabel-asterisk-gap) 0;
+  margin-block: 0;
+  /* Previously used this improperly, it doesn't reposition asterisk, just increased top margin on the whole field label var(--spectrum-fieldlabel-asterisk-margin-y) */
+  margin-inline: var(--mod-fieldlabel-asterisk-gap, var(--spectrum-fieldlabel-asterisk-gap)) 0;
 }
 
 .spectrum-FieldLabel--left {
   display: inline-block;
-  padding-block: var(--spectrum-fieldlabel-m-side-padding-top) 0;
-  padding-inline: 0 var(--spectrum-fieldlabel-m-side-padding-right);
+  padding-block: var(--mod-fieldlabel-side-padding-top, var(--spectrum-fieldlabel-side-padding-top)) 0;
+  padding-inline: 0 var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
 
   & .spectrum-FieldLabel-requiredIcon {
-    margin-block: var(--spectrum-fieldlabel-m-side-asterisk-margin-y) 0;
-    margin-inline: var(--spectrum-fieldlabel-asterisk-gap) 0;
+    margin-block: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0;
+    margin-inline: var(--mod-fieldlabel-asterisk-gap, var(--spectrum-fieldlabel-asterisk-gap)) 0;
   }
 }
 
 .spectrum-FieldLabel--right {
   display: inline-block;
   text-align: end;
-  padding-block: var(--spectrum-fieldlabel-m-side-padding-top) 0;
-  /* todo: correct missing DNA variable */
-  padding-inline: 0 var(--spectrum-fieldlabel-m-side-padding-right);
+  padding-block: var(--mod-fieldlabel-side-padding-top, var(--spectrum-fieldlabel-side-padding-top)) 0;
+  padding-inline: 0 var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right));
 }
 
 .spectrum-Form {
-  --spectrum-tableform-border-spacing: 0 var(--spectrum-global-dimension-size-300);
-  --spectrum-tableform-margin: calc(var(--spectrum-global-dimension-size-250) * -1) 0;
-  --spectrum-tableform-labelsabove-item-gap: var(--spectrum-global-dimension-size-100);
+  /* for /docs/form.html to set field-label inside form */
+  --spectrum-tableform-border-spacing: 0 var(--mod-spacing-300, var(--spectrum-spacing-300));
+  /* matching 20px, missing global token for 20px */
+  --spectrum-tableform-margin-calc: calc(var(--spectrum-spacing-300) + var(--spectrum-spacing-200));
+  --spectrum-tableform-margin: calc(var(--spectrum-tableform-margin-calc) * -1) 0;
 
   display: table;
   border-collapse: separate;
-  border-spacing: var(--spectrum-tableform-border-spacing);
-  margin: var(--spectrum-tableform-margin);
+  border-spacing: var(--mod-tableform-border-spacing, var(--spectrum-tableform-border-spacing));
+  margin: var(--mod-tableform-margin, var(--spectrum-tableform-margin));
 }
 
 .spectrum-Form-item {
   display: table-row;
 }
 
 .spectrum-Form-itemLabel {
-  @extend .spectrum-FieldLabel;
   display: table-cell;
 }
 
+/* disabled state */
+
+.spectrum-FieldLabel,
+.spectrum-Form-itemLabel {
+  &.is-disabled {
+    color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
+
+    .spectrum-FieldLabel-requiredIcon {
+      color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color));
+    }
+  }
+}
+
 .spectrum-Form-itemField {
   display: table-cell;
 }
@@ -116,8 +178,8 @@ governing permissions and limitations under the License.
     display: flex;
     flex-direction: column;
 
-    & + .spectrum-Form-item {
-      margin-block-start: var(--spectrum-tableform-labelsabove-item-gap);
+    &+.spectrum-Form-item {
+      margin-block-start: var(--mod-field-label-top-to-asterisk-small, var(--spectrum-field-label-top-to-asterisk-small));
     }
   }
 }

components/fieldlabel/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@spectrum-css/fieldlabel",
-  "version": "4.0.29",
+  "version": "5.0.0-beta.3",
   "description": "The Spectrum CSS fieldlabel component",
   "license": "Apache-2.0",
-  "main": "dist/index-vars.css",
+  "main": "dist/index.css",
   "repository": {
     "type": "git",
     "url": "https://github.com/adobe/spectrum-css.git",
@@ -17,22 +17,22 @@
   },
   "peerDependencies": {
     "@spectrum-css/icon": "^3.0.21",
-    "@spectrum-css/vars": "^8.0.0"
+    "@spectrum-css/tokens": "^3.0.0"
   },
   "devDependencies": {
     "@spectrum-css/checkbox": "^3.1.3",
-    "@spectrum-css/component-builder": "^3.2.0",
+    "@spectrum-css/component-builder-simple": "^1.0.0-beta",
     "@spectrum-css/fieldgroup": "^3.1.4",
     "@spectrum-css/icon": "^3.0.23",
     "@spectrum-css/picker": "^1.2.12",
-    "@spectrum-css/radio": "^3.0.24",
+    "@spectrum-css/radio": "^4.0.0",
     "@spectrum-css/stepper": "^3.0.26",
     "@spectrum-css/textfield": "^3.2.4",
-    "@spectrum-css/vars": "^8.0.0",
+    "@spectrum-css/tokens": "^3.0.0",
     "gulp": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://opensource.adobe.com/spectrum-css/"
-}
+}

components/fieldlabel/skin.css renamed to components/fieldlabel/themes/express.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Adobe. All rights reserved.
+Copyright 2022 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
@@ -10,18 +10,5 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-.spectrum-FieldLabel,
-.spectrum-Form-itemLabel {
-  color: var(--spectrum-fieldlabel-m-text-color);
-
-  &.is-disabled {
-    color: var(--spectrum-fieldlabel-m-text-color-disabled);
-
-    .spectrum-FieldLabel-requiredIcon {
-      color: var(--spectrum-fieldlabel-m-asterisk-color-disabled);
-    }
-  }
-}
-.spectrum-FieldLabel-requiredIcon {
-  color: var(--spectrum-fieldlabel-m-asterisk-color);
+@container (--system: express) {
 }

components/fieldlabel/themes/spectrum.css

@@ -0,0 +1,14 @@
+/*
+Copyright 2022 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.
+*/
+
+@container (--system: spectrum) {
+}