feat(link): use core tokens

adobe · Nov 14, 2022 · 510173b · 510173b
1 parent 8bd8772
commit 510173b
Show file tree

Hide file tree

Showing 12 changed files with 187 additions and 289 deletions.
diff --git a/packages/link/README.md b/packages/link/README.md
@@ -24,47 +24,13 @@ When looking to leverage the `Link` base class as a type and/or for extension pu
 import { Link } from '@spectrum-web-components/link';
 ```
 
-## Sizes
+## Example
 
-<sp-tabs selected="m" auto label="Size Attribute Options">
-<sp-tab value="s">Small</sp-tab>
-<sp-tab-panel value="s">
-
-<!-- prettier-ignore -->
-```html
-This is an <sp-link size="s" href="#">example link</sp-link>.
-```
-
-</sp-tab-panel>
-<sp-tab value="m">Medium</sp-tab>
-<sp-tab-panel value="m">
-
-<!-- prettier-ignore -->
-```html
-This is an <sp-link size="m" href="#">example link</sp-link>.
-```
-
-</sp-tab-panel>
-<sp-tab value="l">Large</sp-tab>
-<sp-tab-panel value="l">
-
-<!-- prettier-ignore -->
-```html
-This is an <sp-link size="l" href="#">example link</sp-link>.
-```
-
-</sp-tab-panel>
-<sp-tab value="xl">Extra Large</sp-tab>
-<sp-tab-panel value="xl">
-
 <!-- prettier-ignore -->
 ```html
-This is an <sp-link size="xl" href="#">example link</sp-link>.
+This is an <sp-link href="#">example link</sp-link>.
 ```
 
-</sp-tab-panel>
-</sp-tabs>
-
 ## Variants
 
 ### Standard links

diff --git a/packages/link/package.json b/packages/link/package.json
@@ -61,7 +61,7 @@
         "@spectrum-web-components/shared": "^0.15.2"
     },
     "devDependencies": {
-        "@spectrum-css/link": "^3.1.23"
+        "@spectrum-css/link": "^4.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/link/src/Link.ts b/packages/link/src/Link.ts
@@ -10,11 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-import {
-    CSSResultArray,
-    SizedMixin,
-    TemplateResult,
-} from '@spectrum-web-components/base';
+import { CSSResultArray, TemplateResult } from '@spectrum-web-components/base';
 import {
     property,
     query,
@@ -30,9 +26,7 @@ import linkStyles from './link.css.js';
  * @attr quiet - uses quiet styles or not
  * @attr over-background - uses over background styles or not
  */
-export class Link extends SizedMixin(LikeAnchor(Focusable), {
-    noDefaultSize: true,
-}) {
+export class Link extends LikeAnchor(Focusable) {
     public static override get styles(): CSSResultArray {
         return [linkStyles];
     }
@@ -43,6 +37,9 @@ export class Link extends SizedMixin(LikeAnchor(Focusable), {
     @property({ type: String, reflect: true })
     public variant: 'secondary' | undefined;
 
+    @property({ type: String, reflect: true })
+    public static: 'black' | 'white' | undefined;
+
     public override get focusElement(): HTMLElement {
         return this.anchorElement;
     }

diff --git a/packages/link/src/spectrum-config.js b/packages/link/src/spectrum-config.js
@@ -32,30 +32,19 @@ const config = {
                 {
                     type: 'enum',
                     name: 'variant',
-                    values: [
-                        '.spectrum-Link--secondary',
-                    ],
+                    values: ['.spectrum-Link--secondary'],
                 },
                 {
                     type: 'enum',
-                    name: 'size',
-                    forceOntoHost: true,
+                    name: 'static',
                     values: [
                         {
-                            name: 's',
-                            selector: '.spectrum-Link--sizeS',
-                        },
-                        {
-                            name: 'm',
-                            selector: '.spectrum-Link--sizeM',
-                        },
-                        {
-                            name: 'l',
-                            selector: '.spectrum-Link--sizeL',
+                            name: 'black',
+                            selector: '.spectrum-Link--staticBlack',
                         },
                         {
-                            name: 'xl',
-                            selector: '.spectrum-Link--sizeXL',
+                            name: 'white',
+                            selector: '.spectrum-Link--staticWhite',
                         },
                     ],
                 },