Use spectrum css typography and tokens

adobe · May 8, 2024 · 6fc4eef · 6fc4eef
1 parent 1e28ab6
commit 6fc4eef
Show file tree

Hide file tree

Showing 12 changed files with 37 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@adobe/alloy": "^2.19.2",
     "@adobe/react-spectrum": "^3.34.1",
     "@react-stately/data": "^3.11.2",
+    "@spectrum-css/tokens": "^14.0.0",
     "@spectrum-css/typography": "^6.0.0",
     "@spectrum-icons/illustrations": "^3.6.11",
     "@spectrum-icons/workflow": "^4.2.10",

diff --git a/src/view/components/objectEditor/populationAmountIndictor.styl b/src/view/components/objectEditor/populationAmountIndictor.styl
@@ -9,12 +9,12 @@ stroke-width = 9;
 }
 
 .PopulationAmountIndicator-baseRing {
-  stroke: #d2d3d4;
+  stroke: var(--spectrum-gray-400);
   stroke-width: stroke-width;
 }
 
 .PopulationAmountIndicator-emphasisRing {
-  stroke: #1473e6;
+  stroke: var(--spectrum-blue-900);
   stroke-width: stroke-width;
 
   &.is-full {

diff --git a/src/view/components/objectEditor/xdmTree.styl b/src/view/components/objectEditor/xdmTree.styl
@@ -3,13 +3,15 @@
   &.ant-tree li .ant-tree-node-content-wrapper {
     font-size: inherit;
     color: inherit;
+    background-color: inherit;
   }
 
-  &.ant-tree li .ant-tree-node-content-wrapper {
-    &:hover,
+  &.ant-tree .ant-tree-node-content-wrapper {
+    &:hover {
+      background-color: var(--spectrum-gray-200);
+    }
     &.ant-tree-node-selected {
-      // Selection color from react-spectrum
-      background-color: rgba(44,44,44,0.04);
+      background-color: var(--spectrum-blue-300);
     }
   }
 }
diff --git a/src/view/components/objectEditor/xdmTreeNodeTitle.styl b/src/view/components/objectEditor/xdmTreeNodeTitle.styl
@@ -1,10 +1,10 @@
 .XdmTreeNodeTitle {
   &.is-invalid {
-    color: #ec5b62;
+    color: var(--spectrum-negative-visual-color);
 
     .XdmTreeNodeTitle-type {
       &:before {
-        border-left-color: #ec5b62;
+        border-left-color: var(--spectrum-negative-visual-color);
       }
       color: inherit;
     }
@@ -18,12 +18,20 @@
 .XdmTreeNodeTitle-type {
   &:before {
     content: " ";
-    border-left: 1px solid #cacaca;
+    border-left: 1.5px solid var(--spectrum-gray-500);
     padding-left: 8px;
   }
-  color: #707070;
+  color: var(--spectrum-gray-600);
 }
 
-.ant-tree-treenode-disabled .XdmTreeNodeTitle-type {
-  color: inherit;
+.ant-tree-treenode-disabled {
+  .XdmTreeNodeTitle {
+    color: var(--spectrum-gray-500);
+    &:before {
+      border-left-color: var(--spectrum-gray-500)
+    }
+    .XdmTreeNodeTitle-type {
+      color: var(--spectrum-gray-500);
+    }
+  }
 }
diff --git a/src/view/components/typography/body.jsx b/src/view/components/typography/body.jsx
@@ -14,7 +14,6 @@ import React from "react";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import getDimensionStyle from "../../utils/getDimensionStyle";
-import "./body.styl";
 
 /**
  * Provides typography styling for a block of text (a paragraph).

diff --git a/src/view/components/typography/body.styl b/src/view/components/typography/body.styl
diff --git a/src/view/components/typography/heading.jsx b/src/view/components/typography/heading.jsx
@@ -14,7 +14,6 @@ import React from "react";
 import classNames from "classnames";
 import PropTypes from "prop-types";
 import getDimensionStyle from "../../utils/getDimensionStyle";
-import "./heading.styl";
 
 const tagBySize = {
   XXXL: "h1",

diff --git a/src/view/components/typography/heading.styl b/src/view/components/typography/heading.styl
diff --git a/src/view/configuration/configuration.html b/src/view/configuration/configuration.html
@@ -5,6 +5,7 @@
     <title>Extension View</title>
     <link rel="stylesheet" href="https://use.typekit.net/ruf7eed.css" />
   </head>
+
   <body>
     <div id="root"></div>
     <script src="https://assets.adobedtm.com/activation/reactor/extensionbridge/extensionbridge.min.js"></script>

diff --git a/src/view/global.styl b/src/view/global.styl
@@ -24,7 +24,7 @@ html {
 // issue. Instead, we'll switch margin to padding.
 body {
   margin: 0;
-  padding: 8px;
+  padding: 0;
 }
 
 html
@@ -33,7 +33,11 @@ body,
 .react-spectrum-provider {
   display: flex;
   flex-direction: column;
-  flex: 1
+  flex: 1;
+}
+
+.react-spectrum-provider {
+  padding: 8px;
 }
 
 .formik-field textarea {

diff --git a/src/view/render.jsx b/src/view/render.jsx
@@ -17,6 +17,8 @@ import { Provider, lightTheme } from "@adobe/react-spectrum";
 import ErrorBoundary from "./components/errorBoundary";
 import "./global.styl";
 import monitorForOriginatingErrors from "./utils/monitorForOriginatingErrors";
+import "@spectrum-css/tokens/dist/index.css";
+import "@spectrum-css/typography/dist/index.css";
 
 monitorForOriginatingErrors();
 
@@ -28,7 +30,7 @@ export default View => {
     <Provider
       theme={lightTheme}
       colorScheme="light"
-      UNSAFE_className="react-spectrum-provider"
+      UNSAFE_className="react-spectrum-provider spectrum spectrum--medium spectrum--light"
     >
       <ErrorBoundary>
         <View />