Merge branch 'main' into feat-deprecating-old-token-packages

adobe · Nov 10, 2023 · a43e0f3 · a43e0f3
2 parents 41aa824 + a290816
commit a43e0f3
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 55 deletions.
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -7,13 +7,13 @@ import logo from "./assets/logo.svg";
 import pkg from "./package.json";
 
 // Load global styles
-import "@spectrum-css/vars/dist/spectrum-global.css";
-import "@spectrum-css/vars/dist/spectrum-light.css";
-import "@spectrum-css/vars/dist/spectrum-medium.css";
+import "@spectrum-css/vars/css/globals/index.css";
+import "@spectrum-css/vars/css/components/index.css";
 
-import "./global.js";
+import "@spectrum-css/vars/css/scales/spectrum-medium.css";
+import "@spectrum-css/vars/css/themes/spectrum-light.css";
 
-import "@spectrum-css/tokens";
+import "./global.js";
 
 addons.setConfig({
 	theme: create({

diff --git a/.storybook/package.json b/.storybook/package.json
@@ -85,21 +85,6 @@
           "{workspaceRoot}/storybook-static"
         ]
       },
-      "storybook": {
-        "dependsOn": [
-          "^build"
-        ],
-        "inputs": [
-          "{workspaceRoot}/assets",
-          "{workspaceRoot}/decorators",
-          "{workspaceRoot}/*.js",
-          "{workspaceRoot}/*.html",
-          "{projectRoot}/components/*/dist"
-        ],
-        "outputs": [
-          "{workspaceRoot}/storybook-static"
-        ]
-      },
       "clean": {
         "inputs": [
           "{workspaceRoot}/storybook-static"

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -25,7 +25,6 @@ import "@spectrum-css/vars/dist/spectrum-dark.css";
 import "@spectrum-css/vars/dist/spectrum-darkest.css";
 import "@spectrum-css/vars/dist/spectrum-light.css";
 
-import "@spectrum-css/vars/dist/components/index.css";
 import "@spectrum-css/vars/dist/spectrum-global.css";
 
 import "@spectrum-css/expressvars/dist/spectrum-large.css";
@@ -35,7 +34,6 @@ import "@spectrum-css/expressvars/dist/spectrum-dark.css";
 import "@spectrum-css/expressvars/dist/spectrum-darkest.css";
 import "@spectrum-css/expressvars/dist/spectrum-light.css";
 
-import "@spectrum-css/expressvars/dist/components/index.css";
 import "@spectrum-css/expressvars/dist/spectrum-global.css";
 
 import "@spectrum-css/tokens";

diff --git a/components/card/index.css b/components/card/index.css
@@ -18,7 +18,7 @@ governing permissions and limitations under the License.
 	--spectrum-card-title-padding-right: var(--spectrum-spacing-400);
 	--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
 	--spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
-	--spectrum-card-footer-margin-top: var(--spectrum-spacing-100);
+	--spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
 	--spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
 
 	--spectrum-card-border-width: var(--spectrum-border-width-100);
@@ -367,9 +367,9 @@ governing permissions and limitations under the License.
 	);
 	box-sizing: border-box;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	border-start-start-radius: calc(
 		var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) -
@@ -408,21 +408,35 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Card-body {
+	/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
+	   and will be removed in a future version. */
 	padding-block-start: var(
-		--mod-card-title-padding-top,
-		var(--spectrum-card-title-padding-top)
+		--mod-card-body-padding-block-start, 
+		var(
+			--mod-card-title-padding-top,
+			var(--spectrum-card-title-padding-top)
+		)
 	);
-	padding-inline-end: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-inline-end: var(
+		--mod-card-body-padding-inline-end,
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
 	);
-	padding-inline-start: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-inline-start: var(
+		--mod-card-body-padding-inline-start, 
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
 	);
-	padding-block-end: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-block-end: var(
+		--mod-card-body-padding-block-end,
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
 	);
 }
 
@@ -526,25 +540,47 @@ governing permissions and limitations under the License.
 
 .spectrum-Card-footer {
 	/* Accommodate for wanting less spacing between body and footer */
-	margin-block-start: calc(
-		-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
-					var(
-						--mod-card-content-margin-bottom,
-						var(--spectrum-card-content-margin-bottom)
-					))
+	margin-block-start: var(
+		--mod-card-footer-margin-block-start,
+		calc(
+			-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+						var(
+							--mod-card-content-margin-bottom,
+							var(--spectrum-card-content-margin-bottom)
+						))
+		)
 	);
 	margin-inline-start: var(
-		--mod-card-body-spacing,
-		var(--spectrum-card-body-spacing)
+		--mod-card-footer-margin-inline-start,
+		var(
+			--mod-card-body-spacing,
+			var(--spectrum-card-body-spacing)
+		)
 	);
 	margin-inline-end: var(
-		--mod-card-body-spacing,
-		var(--spectrum-card-body-spacing)
+		--mod-card-footer-margin-inline-end,
+		var(
+			--mod-card-body-spacing,
+			var(--spectrum-card-body-spacing)
+		)
 	);
-	padding-block-end: calc(
-		var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
+	padding-block-end: var(
+		--mod-card-footer-padding-block-end,
+		calc(
+			var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
 			var(--mod-card-border-width, var(--spectrum-card-border-width))
+		)
+	);
+	/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
+	   and will be removed in a future version. */
+	padding-block-start: var(
+		--mod-card-footer-padding-block-start,
+		var(
+			--mod-card-footer-margin-top,
+			var(--spectrum-card-footer-padding-top)
+		)
 	);
+
 	color: var(
 		--highcontrast-card-body-font-color,
 		var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
@@ -553,16 +589,11 @@ governing permissions and limitations under the License.
 		--mod-card-body-line-height,
 		var(--spectrum-card-body-line-height)
 	);
-
 	border-block-start: var(
 			--mod-card-border-width,
 			var(--spectrum-card-border-width)
 		)
 		solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
-	padding-block-start: var(
-		--mod-card-footer-margin-top,
-		var(--spectrum-card-footer-margin-top)
-	);
 }
 
 .spectrum-Card-header {
@@ -669,7 +700,7 @@ governing permissions and limitations under the License.
 		}
 
 		/* Use ::after to show the selection outline so that the border doesn't
-     * affect the layout of the content within the preview. */
+		   affect the layout of the content within the preview. */
 		&::after {
 			content: "";
 			block-size: 100%;

diff --git a/components/card/metadata/mods.md b/components/card/metadata/mods.md
@@ -18,6 +18,10 @@
 | `--mod-card-body-font-style`                  |
 | `--mod-card-body-font-weight`                 |
 | `--mod-card-body-line-height`                 |
+| `--mod-card-body-padding-block-end`           |
+| `--mod-card-body-padding-block-start`         |
+| `--mod-card-body-padding-inline-end`          |
+| `--mod-card-body-padding-inline-start`        |
 | `--mod-card-body-spacing`                     |
 | `--mod-card-border-color`                     |
 | `--mod-card-border-color-hover`               |
@@ -29,7 +33,12 @@
 | `--mod-card-divider-color`                    |
 | `--mod-card-focus-indicator-color`            |
 | `--mod-card-focus-indicator-width`            |
+| `--mod-card-footer-margin-block-start`        |
+| `--mod-card-footer-margin-inline-end`         |
+| `--mod-card-footer-margin-inline-start`       |
 | `--mod-card-footer-margin-top`                |
+| `--mod-card-footer-padding-block-end`         |
+| `--mod-card-footer-padding-block-start`       |
 | `--mod-card-horizontal-body-padding`          |
 | `--mod-card-horizontal-preview-padding`       |
 | `--mod-card-minimum-width`                    |

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "build:site": "gulp buildDocs -LLL",
     "cache:clean": "nx reset",
     "ci": "yarn build:all",
-    "ci:storybook": "nx run-many --projects @spectrum-css/preview --target storybook",
+    "ci:storybook": "nx run-many --projects @spectrum-css/preview --target build",
     "clean": "yarn cache:clean && run-p clean:*",
     "clean:components": "lerna exec --scope \"${SCOPE:-@spectrum-css/*}\" --ignore \"@spectrum-css/{*-builder*,preview,generator}\" -- rimraf dist",
     "clean:docs": "rimraf dist",