Skip to content

Commit b2d71bc

Browse files
jawinnjawinn
committed
feat(tokens): add icon xxl and xxs tokens
- Add icon XXL token, that is currently being used in a Card variant and at the top of each docs page. XXL and the 400 sizing does not currently exist as part of the formal design specs. It is planned for deprecation in Spectrum 2. - Add XXS token to support existing SWC size. Also planned for deprecation in Spectrum 2. - Add large tokens used for combined UI Icon display.
1 parent 1d8a3b3 commit b2d71bc

File tree

5 files changed

+45
-9
lines changed

5 files changed

+45
-9
lines changed

‎tokens/custom-spectrum/custom-large-vars.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@ governing permissions and limitations under the License.
7777
--spectrum-well-border-radius: 5px;
7878

7979
--spectrum-icon-chevron-size-50: 8px;
80+
/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
81+
--spectrum-workflow-icon-size-xxl: 40px;
82+
--spectrum-workflow-icon-size-xxs: 15px;
8083

8184
--spectrum-treeview-item-indentation-medium: 20px;
8285
--spectrum-treeview-item-indentation-small: 15px;
@@ -117,7 +120,10 @@ governing permissions and limitations under the License.
117120
--spectrum-assetcard-selectionindicator-margin: 15px;
118121
--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
119122
--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs);
120-
--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
123+
--spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
121124

122125
--spectrum-tooltip-animation-distance: 5px;
126+
127+
--spectrum-ui-icon-medium-display: none;
128+
--spectrum-ui-icon-large-display: block;
123129
}

‎tokens/custom-spectrum/custom-medium-vars.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,9 @@ governing permissions and limitations under the License.
7676
--spectrum-well-border-radius: var(--spectrum-spacing-75);
7777

7878
--spectrum-icon-chevron-size-50: 6px;
79+
/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
80+
--spectrum-workflow-icon-size-xxl: 32px;
81+
--spectrum-workflow-icon-size-xxs: 12px;
7982

8083
--spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
8184
--spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
@@ -114,9 +117,12 @@ governing permissions and limitations under the License.
114117

115118
--spectrum-assetcard-focus-ring-border-radius: 8px;
116119
--spectrum-assetcard-selectionindicator-margin: 12px;
117-
--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
120+
--spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
118121
--spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs);
119-
--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
122+
--spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
120123

121124
--spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
125+
126+
--spectrum-ui-icon-medium-display: block;
127+
--spectrum-ui-icon-large-display: none;
122128
}

‎tokens/dist/css/spectrum/custom-large-vars.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@
6363
--spectrum-well-border-radius:5px;
6464

6565
--spectrum-icon-chevron-size-50:8px;
66+
/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
67+
--spectrum-workflow-icon-size-xxl:40px;
68+
--spectrum-workflow-icon-size-xxs:15px;
6669

6770
--spectrum-treeview-item-indentation-medium:20px;
6871
--spectrum-treeview-item-indentation-small:15px;
@@ -103,7 +106,10 @@
103106
--spectrum-assetcard-selectionindicator-margin:15px;
104107
--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);
105108
--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);
106-
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
109+
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
107110

108111
--spectrum-tooltip-animation-distance:5px;
112+
113+
--spectrum-ui-icon-medium-display:none;
114+
--spectrum-ui-icon-large-display:block;
109115
}

‎tokens/dist/css/spectrum/custom-medium-vars.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,9 @@
6262
--spectrum-well-border-radius:var(--spectrum-spacing-75);
6363

6464
--spectrum-icon-chevron-size-50:6px;
65+
/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
66+
--spectrum-workflow-icon-size-xxl:32px;
67+
--spectrum-workflow-icon-size-xxs:12px;
6568

6669
--spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300);
6770
--spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200);
@@ -100,9 +103,12 @@
100103

101104
--spectrum-assetcard-focus-ring-border-radius:8px;
102105
--spectrum-assetcard-selectionindicator-margin:12px;
103-
--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
106+
--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
104107
--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs);
105-
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
108+
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
106109

107110
--spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);
111+
112+
--spectrum-ui-icon-medium-display:block;
113+
--spectrum-ui-icon-large-display:none;
108114
}

‎tokens/dist/index.css

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2225,6 +2225,9 @@
22252225
--spectrum-well-border-radius:5px;
22262226

22272227
--spectrum-icon-chevron-size-50:8px;
2228+
/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
2229+
--spectrum-workflow-icon-size-xxl:40px;
2230+
--spectrum-workflow-icon-size-xxs:15px;
22282231

22292232
--spectrum-treeview-item-indentation-medium:20px;
22302233
--spectrum-treeview-item-indentation-small:15px;
@@ -2265,9 +2268,12 @@
22652268
--spectrum-assetcard-selectionindicator-margin:15px;
22662269
--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xxs);
22672270
--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xxs);
2268-
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
2271+
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-xs);
22692272

22702273
--spectrum-tooltip-animation-distance:5px;
2274+
2275+
--spectrum-ui-icon-medium-display:none;
2276+
--spectrum-ui-icon-large-display:block;
22712277
--spectrum-checkbox-control-size-small:16px;
22722278
--spectrum-checkbox-control-size-medium:18px;
22732279
--spectrum-checkbox-control-size-large:20px;
@@ -3396,6 +3402,9 @@
33963402
--spectrum-well-border-radius:var(--spectrum-spacing-75);
33973403

33983404
--spectrum-icon-chevron-size-50:6px;
3405+
/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
3406+
--spectrum-workflow-icon-size-xxl:32px;
3407+
--spectrum-workflow-icon-size-xxs:12px;
33993408

34003409
--spectrum-treeview-item-indentation-medium:var(--spectrum-spacing-300);
34013410
--spectrum-treeview-item-indentation-small:var(--spectrum-spacing-200);
@@ -3434,11 +3443,14 @@
34343443

34353444
--spectrum-assetcard-focus-ring-border-radius:8px;
34363445
--spectrum-assetcard-selectionindicator-margin:12px;
3437-
--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
3446+
--spectrum-assetcard-title-font-size:var(--spectrum-heading-size-xs);
34383447
--spectrum-assetcard-header-content-font-size:var(--spectrum-heading-size-xs);
3439-
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
3448+
--spectrum-assetcard-content-font-size:var(--spectrum-body-size-s);
34403449

34413450
--spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);
3451+
3452+
--spectrum-ui-icon-medium-display:block;
3453+
--spectrum-ui-icon-large-display:none;
34423454
--spectrum-checkbox-control-size-small:12px;
34433455
--spectrum-checkbox-control-size-medium:14px;
34443456
--spectrum-checkbox-control-size-large:16px;

0 commit comments

Comments
 (0)