Skip to content

Commit 2010c8f

Browse files
curdajcurdaj
committed
Feat(web): Introduce text color prop to the Box #DS-1782
1 parent 48c7a58 commit 2010c8f

File tree

2 files changed

+148
-29
lines changed

2 files changed

+148
-29
lines changed

‎packages/web/src/scss/components/Box/index.html‎

Lines changed: 148 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@
44
<div class="Container">
55
<h2 class="docs-Heading">Default</h2>
66
<div class="docs-Stack docs-Stack--start">
7-
87
<div>Content</div>
9-
108
</div>
119
</div>
1210
</section>
@@ -15,39 +13,116 @@ <h2 class="docs-Heading">Default</h2>
1513
<div class="Container">
1614
<h2 class="docs-Heading">With Custom Padding</h2>
1715
<div class="docs-Stack docs-Stack--start">
18-
1916
<p>For demo purposes, the boxes are bordered.</p>
2017
<div class="border-basic border-100 p-800 border-solid">With custom padding</div>
2118
<div class="border-basic border-100 px-800 py-400 border-solid">With custom vertical and horizontal padding</div>
22-
<div class="border-basic border-100 pt-200 pb-800 pl-600 pr-1200 border-solid">With custom padding for each direction</div>
23-
<div class="border-basic border-100 px-400 px-tablet-800 px-desktop-1200 py-200 py-tablet-400 py-desktop-600 border-solid">With responsive padding</div>
19+
<div class="border-basic border-100 pt-200 pb-800 pl-600 pr-1200 border-solid">
20+
With custom padding for each direction
21+
</div>
22+
<div
23+
class="border-basic border-100 px-400 px-tablet-800 px-desktop-1200 py-200 py-tablet-400 py-desktop-600 border-solid"
24+
>
25+
With responsive padding
26+
</div>
2427
</div>
2528
</div>
2629
</section>
2730

2831
<section class="py-900 py-tablet-1000">
2932
<div class="Container">
3033
<h2 class="docs-Heading">With Border</h2>
31-
<div class="docs-Stack docs-Stack--start">
32-
33-
<p>For demo purposes, the boxes have custom padding.</p>
34-
<div class="border-basic border-100 border-solid p-800">With solid border style</div>
35-
<div class="border-basic border-100 border-dotted p-800">With dotted border style</div>
36-
<div class="border-basic border-100 border-dashed p-800">With dashed border style</div>
37-
<div class="border-basic border-200 border-solid p-800">With thicker border</div>
34+
<div class="docs-Stack docs-Stack--start"><p>For demo purposes, the boxes have custom padding.</p>
35+
<div gap="space-600"
36+
class="Grid Grid--alignmentXStretch Grid--alignmentYStretch Grid--desktop--cols-3 Grid--tablet--cols-1 Grid--cols-1">
37+
<div>
38+
<div class="docs-Stack docs-Stack--start">
39+
<h3>Border colors</h3>
40+
<div class="border-basic border-solid border-100 p-800">With solid border style</div>
41+
<div class="border-basic border-dotted border-100 p-800">With dotted border style</div>
42+
<div class="border-basic border-dashed border-100 p-800">With dashed border style</div>
43+
<div class="border-basic border-solid border-200 p-800">With thicker border</div>
44+
</div>
45+
</div>
46+
<div>
47+
<div class="docs-Stack docs-Stack--start">
48+
<h3>Accent colors</h3>
49+
<div class="border-accent-01-basic border-solid border-100 p-800">With accent-01-basic border color</div>
50+
<div class="border-accent-01-subtle border-solid border-100 p-800">With accent-01-subtle border color</div>
51+
<div class="border-accent-02-basic border-solid border-100 p-800">With accent-02-basic border color</div>
52+
<div class="border-accent-02-subtle border-solid border-100 p-800">With accent-02-subtle border color</div>
53+
</div>
54+
</div>
55+
<div>
56+
<div class="docs-Stack docs-Stack--start">
57+
<h3>Emotion colors</h3>
58+
<div class="border-emotion-danger-basic border-solid border-100 p-800">With emotion-danger-basic border
59+
color
60+
</div>
61+
<div class="border-emotion-danger-subtle border-solid border-100 p-800">With emotion-danger-subtle border
62+
color
63+
</div>
64+
<div class="border-emotion-informative-basic border-solid border-100 p-800">With emotion-informative-basic
65+
border color
66+
</div>
67+
<div class="border-emotion-informative-subtle border-solid border-100 p-800">With emotion-informative-subtle
68+
border color
69+
</div>
70+
<div class="border-emotion-success-basic border-solid border-100 p-800">With emotion-success-basic border
71+
color
72+
</div>
73+
<div class="border-emotion-success-subtle border-solid border-100 p-800">With emotion-success-subtle border
74+
color
75+
</div>
76+
<div class="border-emotion-warning-basic border-solid border-100 p-800">With emotion-warning-basic border
77+
color
78+
</div>
79+
<div class="border-emotion-warning-subtle border-solid border-100 p-800">With emotion-warning-subtle border
80+
color
81+
</div>
82+
</div>
83+
</div>
84+
</div>
3885
</div>
3986
</div>
4087
</section>
4188

4289
<section class="py-900 py-tablet-1000">
4390
<div class="Container">
4491
<h2 class="docs-Heading">With Background Color</h2>
45-
<div class="docs-Stack docs-Stack--start">
46-
47-
<p>For demo purposes, the boxes have custom padding.</p>
48-
<div class="bg-primary p-800">Primary Background</div>
49-
<div class="bg-secondary p-800">Secondary Background</div>
50-
<div class="bg-tertiary p-800">Tertiary Background</div>
92+
<div class="docs-Stack docs-Stack--start"><p>For demo purposes, the boxes have custom padding.</p>
93+
<div gap="space-600"
94+
class="Grid Grid--alignmentXStretch Grid--alignmentYStretch Grid--desktop--cols-3 Grid--tablet--cols-1 Grid--cols-1">
95+
<div>
96+
<div class="docs-Stack docs-Stack--start">
97+
<h3>Background colors</h3>
98+
<div class="bg-primary text-primary p-800">With primary background</div>
99+
<div class="bg-secondary text-primary p-800">With secondary background</div>
100+
<div class="bg-tertiary text-primary p-800">With tertiary background</div>
101+
</div>
102+
</div>
103+
<div>
104+
<div class="docs-Stack docs-Stack--start">
105+
<h3>Accent colors</h3>
106+
<div class="bg-accent-01-basic text-accent-01-subtle p-800">With accent-01-basic background</div>
107+
<div class="bg-accent-01-subtle text-accent-01-basic p-800">With accent-01-subtle background</div>
108+
<div class="bg-accent-02-basic text-accent-02-subtle p-800">With accent-02-basic background</div>
109+
<div class="bg-accent-02-subtle text-accent-02-basic p-800">With accent-02-subtle background</div>
110+
</div>
111+
</div>
112+
<div>
113+
<div class="docs-Stack docs-Stack--start">
114+
<h3>Emotion colors</h3>
115+
<div class="bg-emotion-danger-basic text-emotion-danger-subtle p-800">With emotion-danger-basic background</div>
116+
<div class="bg-emotion-danger-subtle text-emotion-danger-basic p-800">With emotion-danger-subtle background</div>
117+
<div class="bg-emotion-informative-basic text-emotion-informative-subtle p-800">With emotion-informative-basic background</div>
118+
<div class="bg-emotion-informative-subtle text-emotion-informative-basic p-800">With emotion-informative-subtle background</div>
119+
<div class="bg-emotion-success-basic text-emotion-success-subtle p-800">With emotion-success-basic background</div>
120+
<div class="bg-emotion-success-subtle text-emotion-success-basic p-800">With emotion-success-subtle background</div>
121+
<div class="bg-emotion-warning-basic text-emotion-warning-subtle p-800">With emotion-warning-basic background</div>
122+
<div class="bg-emotion-warning-subtle text-emotion-warning-basic p-800">With emotion-warning-subtle background</div>
123+
</div>
124+
</div>
125+
</div>
51126
</div>
52127
</div>
53128
</section>
@@ -56,11 +131,12 @@ <h2 class="docs-Heading">With Background Color</h2>
56131
<div class="Container">
57132
<h2 class="docs-Heading">With Background Gradient</h2>
58133
<div class="docs-Stack docs-Stack--start">
59-
60134
<p>For demo purposes, the boxes have custom padding.</p>
61-
<div class="bg-gradient-primary p-800">Primary Background Gradient</div>
62-
<div class="bg-gradient-secondary p-800">Secondary Background Gradient</div>
63-
<div class="bg-gradient-primary bg-gradient-tablet-secondary bg-gradient-desktop-secondary p-800">Responsive Background Gradient</div>
135+
<div class="bg-gradient-primary p-800">Primary background gradient</div>
136+
<div class="bg-gradient-secondary p-800">Secondary background gradient</div>
137+
<div class="bg-gradient-primary bg-gradient-tablet-secondary bg-gradient-desktop-secondary p-800">
138+
Responsive background gradient
139+
</div>
64140
</div>
65141
</div>
66142
</section>
@@ -69,13 +145,51 @@ <h2 class="docs-Heading">With Background Gradient</h2>
69145
<div class="Container">
70146
<h2 class="docs-Heading">With Radius</h2>
71147
<div class="docs-Stack docs-Stack--start">
72-
73148
<p>For demo purposes, the boxes have custom padding.</p>
74149
<div class="bg-secondary p-800">Without radius</div>
75150
<div class="bg-secondary rounded-300 p-800">With custom radius</div>
76151
<div class="bg-secondary rounded-full p-800">With full radius</div>
77-
<div class="bg-secondary p-800 rounded-100 rounded-tablet-200 rounded-desktop-400">
78-
With responsive radius
152+
<div class="bg-secondary p-800 rounded-100 rounded-tablet-200 rounded-desktop-400">With responsive radius</div>
153+
</div>
154+
</div>
155+
</section>
156+
157+
<section class="py-900 py-tablet-1000">
158+
<div class="Container Container--xlarge">
159+
<h2 class="docs-Heading">With Text Color</h2>
160+
<div class="docs-Stack docs-Stack--start"><p>For demo purposes, the boxes have custom padding.</p>
161+
<div gap="space-600"
162+
class="Grid Grid--alignmentXStretch Grid--alignmentYStretch Grid--desktop--cols-3 Grid--tablet--cols-1 Grid--cols-1">
163+
<div>
164+
<div class="docs-Stack docs-Stack--start">
165+
<h3>Text colors</h3>
166+
<div class="bg-secondary text-primary p-800">With primary text</div>
167+
<div class="bg-secondary text-secondary p-800">With secondary text</div>
168+
<div class="bg-secondary text-tertiary p-800">With tertiary text</div>
169+
</div>
170+
</div>
171+
<div>
172+
<div class="docs-Stack docs-Stack--start">
173+
<h3>Accent text colors</h3>
174+
<div class="bg-accent-01-subtle text-accent-01-basic p-800">With accent-01-basic text</div>
175+
<div class="bg-accent-01-basic text-accent-01-subtle p-800">With accent-01-subtle text</div>
176+
<div class="bg-accent-02-subtle text-accent-02-basic p-800">With accent-02-basic text</div>
177+
<div class="bg-accent-02-basic text-accent-02-subtle p-800">With accent-02-subtle text</div>
178+
</div>
179+
</div>
180+
<div>
181+
<div class="docs-Stack docs-Stack--start">
182+
<h3>Emotion text colors</h3>
183+
<div class="bg-emotion-danger-subtle text-emotion-danger-basic p-800">With emotion-danger-basic text</div>
184+
<div class="bg-emotion-danger-basic text-emotion-danger-subtle p-800">With emotion-danger-subtle text</div>
185+
<div class="bg-emotion-informative-subtle text-emotion-informative-basic p-800">With emotion-informative-basic text</div>
186+
<div class="bg-emotion-informative-basic text-emotion-informative-subtle p-800">With emotion-informative-subtle text</div>
187+
<div class="bg-emotion-success-subtle text-emotion-success-basic p-800">With emotion-success-basic text</div>
188+
<div class="bg-emotion-success-basic text-emotion-success-subtle p-800">With emotion-success-subtle text</div>
189+
<div class="bg-emotion-warning-subtle text-emotion-warning-basic p-800">With emotion-warning-basic text</div>
190+
<div class="bg-emotion-warning-basic text-emotion-warning-subtle p-800">With emotion-warning-subtle text</div>
191+
</div>
192+
</div>
79193
</div>
80194
</div>
81195
</div>
@@ -85,11 +199,16 @@ <h2 class="docs-Heading">With Radius</h2>
85199
<div class="Container">
86200
<h2 class="docs-Heading">With All</h2>
87201
<div class="docs-Stack docs-Stack--start">
88-
89202
<p>For demo purposes, the boxes have custom padding.</p>
90-
<div class="bg-primary border-basic border-solid border-100 p-800">With primary background, solid border and no radius</div>
91-
<div class="bg-secondary border-basic border-dashed rounded-300 border-200 p-800">With primary background, custom radius, dashed thicker border</div>
92-
<div class="bg-tertiary border-basic border-dotted rounded-full border-200 p-800">With primary background, full radius, dotted thicker border</div>
203+
<div class="bg-primary border-basic border-solid border-100 p-800">
204+
With primary background, solid border and no radius
205+
</div>
206+
<div class="bg-secondary border-basic border-dashed rounded-300 border-200 p-800">
207+
With secondary background, custom radius, dashed thicker border
208+
</div>
209+
<div class="bg-tertiary border-basic border-dotted border-200 text-tertiary p-800 rounded-full">
210+
With tertiary background, tertiary text color, full radius, dotted thicker border
211+
</div>
93212
</div>
94213
</div>
95214
</section>

‎tests/e2e/demo-components-compare.spec.ts-snapshots/box-chromium-linux.png‎

138 KB
Loading

0 commit comments

Comments
 (0)