Skip to content

Commit 48a8e76

Browse files
aweellaweell
authored
Merge pull request #581 from dxc-technology/component-button
Fixed typos and variants spacing
2 parents 83915b9 + 40003d7 commit 48a8e76

File tree

1 file changed

+25
-38
lines changed

1 file changed

+25
-38
lines changed

‎guidelines/components/button/README.md‎

Lines changed: 25 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,21 @@ _Design specifications for button component_
4040

4141
### General
4242

43+
#### Spacing
44+
45+
| Component token | Element | Core token | Value |
46+
| :----------------------------- | :--------------- | :---------------- | :-------------- |
47+
| `primaryPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
48+
| `primaryPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
49+
| `primaryPaddingTop` | Container | `spacing-03` | 0.5rem / 8px |
50+
| `primaryPaddingBottom` | Container | `spacing-03` | 0.5rem / 8px |
51+
52+
| Property | Element | Core token | Value |
53+
| :----------------------------- | :--------------- | :---------------- | :-------------- |
54+
| `margin-right` | Label | `spacing-03` | 0.5rem / 8px |
55+
| `margin-left` | Label | `spacing-03` | 0.5rem / 8px |
56+
| `margin-left` | Icon | `spacing-03` | 0.5rem / 8px |
57+
4358

4459
### Size
4560

@@ -103,7 +118,7 @@ These values can be applied independently to each side of the component:
103118
| `primaryActiveBackgroundColor` | Container fill:active | `color-purple-900` | #321353 |
104119
| `primaryDisabledBackgroundColor` | Container fill:disabled | `color-grey-100` | #f2f2f2 |
105120
| `primaryDisabledFontColor` | Label:disabled | `color-grey-500` | #999999 |
106-
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
121+
| `primaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
107122

108123
#### Border
109124

@@ -120,18 +135,9 @@ These values can be applied independently to each side of the component:
120135
| Component token | Element | Core token | Value |
121136
| :---------------------- | :---------------- | :------------------- | :------------------------- |
122137
| `primaryFontFamily` | Label | `font-family-sans` | 'Open Sans', sans-serif |
123-
| `primaryBorderStyle` | Label | `font-scale-03` | 1 rem / 16px |
124-
| `primaryBorderRadius` | Label | `font-regular` | 400 |
125-
138+
| `primaryFontSize` | Label | `font-scale-03` | 1 rem / 16px |
139+
| `primaryBorderWeight` | Label | `font-regular` | 400 |
126140

127-
#### Spacing
128-
129-
| Component token | Element | Core token | Value |
130-
| :----------------------------- | :--------------- | :---------------- | :-------------- |
131-
| `primaryPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
132-
| `primaryPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
133-
| `primaryPaddingTop` | Container | `spacing-05` | 1rem / 16px |
134-
| `primaryPaddingBottom` | Container | `spacing-05` | 1rem / 16px |
135141

136142

137143
### Secondary
@@ -151,11 +157,12 @@ These values can be applied independently to each side of the component:
151157
| Component token | Element | Token | Value |
152158
| :---------------------------------- | :-------------------------- | :----------------------- | :---------- |
153159
| `secondaryHoverBackgroundColor` | Container fill:hover | `color-purple-700` | #5f249f |
160+
| `secondaryHoverFontColor` | Label:hover | `color-white` | #ffffff |
154161
| `secondaryActiveBackgroundColor` | Container fill:active | `color-purple-900` | #321353 |
155-
| `secondaryDisabledBackgroundColor` | Container fill:disabled | `color-transparent` | transparent |
162+
| `secondaryDisabledBackgroundColor` | Container fill:disabled | `color-transparent` | transparent |
156163
| `secondaryDisabledFontColor` | Label:disabled | `color-grey-500` | #999999 |
157-
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
158-
| `secondaryDisabledBorderColor` | Container border:disabled | `color-grey-500` | #999999 |
164+
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
165+
| `secondaryDisabledBorderColor` | Container border:disabled | `color-grey-500` | #999999 |
159166

160167
#### Border
161168

@@ -175,16 +182,6 @@ These values can be applied independently to each side of the component:
175182
| `secondaryFontWeight` | Label | `font-regular` | 400 |
176183

177184

178-
#### Spacing
179-
180-
| Component token | Element | Core token | Value |
181-
| :----------------------------- | :--------------- | :---------------- | :-------------- |
182-
| `secondaryPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
183-
| `secondaryPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
184-
| `secondaryPaddingTop` | Container | `spacing-05` | 1rem / 16px |
185-
| `secondaryPaddingBottom` | Container | `spacing-05` | 1rem / 16px |
186-
187-
188185
### Text
189186

190187
#### Color
@@ -193,7 +190,7 @@ These values can be applied independently to each side of the component:
193190

194191
| Component token | Element | Token | Value |
195192
| :---------------------------------- | :-------------------------- | :----------------------- | :---------- |
196-
| `textBackgroundColor` | Container fill | `transparent` | transparent |
193+
| `textBackgroundColor` | Container fill | `color-transparent` | transparent |
197194
| `textFontColor` | Label | `color-purple-700` | #5f249f |
198195

199196
###### Interactive
@@ -202,9 +199,9 @@ These values can be applied independently to each side of the component:
202199
| :---------------------------------- | :-------------------------- | :----------------------- | :---------- |
203200
| `textHoverBackgroundColor` | Container fill:hover | `color-purple-100` | #f2eafa |
204201
| `textActiveBackgroundColor` | Container fill:active | `color-purple-200` | #e5d5f6 |
205-
| `textDisabledBackgroundColor` | Container fill:disabled | `color-grey-100` | #f2f2f2 |
202+
| `textDisabledBackgroundColor` | Container fill:disabled | `color-transparent` | transparent |
206203
| `textDisabledFontColor` | Label:disabled | `color-grey-500` | #999999 |
207-
| `secondaryFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
204+
| `textFocusBorderColor` | Container border:focus | `color-blue-600` | #0095ff |
208205

209206

210207
#### Border
@@ -226,16 +223,6 @@ These values can be applied independently to each side of the component:
226223
| `textFontWeight` | Label | `font-regular` | 400 |
227224

228225

229-
#### Spacing
230-
231-
| Component token | Element | Core token | Value |
232-
| :-------------------------- | :--------------- | :---------------- | :-------------- |
233-
| `textPaddingLeft` | Container | `spacing-03` | 0.5rem / 8px |
234-
| `textPaddingRight` | Container | `spacing-03` | 0.5rem / 8px |
235-
| `textPaddingTop` | Container | `spacing-05` | 1rem / 16px |
236-
| `textPaddingBottom` | Container | `spacing-05` | 1rem / 16px |
237-
238-
239226
## Icon Usage
240227

241228
Any icon can be used in Halstack Design System, so it is apt to the user to choose between one of the multiple options that are offered through internet but it is recommended to use the same library of icons along the application to keeping concistency.

0 commit comments

Comments
 (0)