Skip to content

Commit e8bbc8a

Browse files
jawinnjawinn
committed
feat(accordion): reduced font sizes and component heights
Use updated font sizes and component height (minimum height) tokens from specs.
1 parent 6a48b9f commit e8bbc8a

File tree

1 file changed

+16
-16
lines changed

1 file changed

+16
-16
lines changed

‎components/accordion/index.css

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
.spectrum-Accordion {
1515
/* Layout and spacing */
16-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
16+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
1717
--spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width);
1818
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-100);
1919
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-medium);
@@ -34,7 +34,7 @@
3434
--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
3535
--spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
3636
--spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
37-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
37+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
3838
--spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100);
3939

4040
--spectrum-accordion-item-header-cursor: pointer;
@@ -88,87 +88,87 @@
8888
}
8989

9090
.spectrum-Accordion--sizeS {
91-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
91+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75);
9292
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-75);
9393
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-small);
9494
--spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-75);
9595
--spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-small);
9696
--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-small);
97-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
97+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-100);
9898
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
9999
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
100100
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
101101
}
102102

103103
.spectrum-Accordion--sizeL {
104-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
104+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
105105
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-200);
106106
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-large);
107107
--spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-200);
108108
--spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-large);
109109
--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-large);
110-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
110+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
111111
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
112112
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
113113
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
114114
}
115115

116116
.spectrum-Accordion--sizeXL {
117-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400);
117+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
118118
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-300);
119119
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-extra-large);
120120
--spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-300);
121121
--spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-extra-large);
122122
--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large);
123-
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
123+
--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-400);
124124
--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
125125
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
126126
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
127127
}
128128

129129
.spectrum-Accordion--compact {
130-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
130+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75);
131131
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
132132
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
133133

134134
&.spectrum-Accordion--sizeS {
135-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75);
135+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-50);
136136
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
137137
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
138138
}
139139

140140
&.spectrum-Accordion--sizeL {
141-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
141+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
142142
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
143143
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
144144
}
145145

146146
&.spectrum-Accordion--sizeXL {
147-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
147+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
148148
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
149149
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
150150
}
151151
}
152152

153153
.spectrum-Accordion--spacious {
154-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
154+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
155155
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
156156
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
157157

158158
&.spectrum-Accordion--sizeS {
159-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
159+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
160160
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
161161
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
162162
}
163163

164164
&.spectrum-Accordion--sizeL {
165-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400);
165+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
166166
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
167167
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
168168
}
169169

170170
&.spectrum-Accordion--sizeXL {
171-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-500);
171+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400);
172172
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
173173
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
174174
}

0 commit comments

Comments
 (0)