Skip to content

Commit 61c35b2

Browse files
vosidiyvosidiy
committed
doc text color
1 parent 4693803 commit 61c35b2

3 files changed

Lines changed: 230 additions & 32 deletions

File tree

‎css/final.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6334,7 +6334,7 @@ textarea.form-control {
63346334
.article-wrap > p {
63356335
margin-bottom: 1rem;
63366336
}
6337-
.article-wrap > h1, .article-wrap h2, .article-wrap h3, .article-wrap h4, .article-wrap h5, .article-wrap h6 {
6337+
.article-wrap > h1, .article-wrap > h2, .article-wrap > h3, .article-wrap > h4, .article-wrap > h5, .article-wrap > h6 {
63386338
margin-bottom: 1rem;
63396339
}
63406340
.article-wrap p ~ h1, .article-wrap p ~ h2, .article-wrap p ~ h3, .article-wrap p ~ h4, .article-wrap p ~ h5, .article-wrap p ~ h6 {

‎docs/doc-utility-text-color.html‎

Lines changed: 228 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -43,70 +43,268 @@
4343

4444

4545
<!-- === start of documentation === -->
46-
4746
<h6 class="mb-3 text-secondary">Documentation</h6>
48-
<h1 class="text-4xl my-20px">Utility name</h1>
47+
<h1 class="text-4xl my-20px">Text color</h1>
4948
<hr>
5049
<article class="article-wrap mb-16">
51-
<p> {{ REPLACE THIS WITH SHORT INFO ABOUT UTILITY, HOW TO USE IT, WHEN TO USE IT }} </p>
52-
<p>Responsive: ✅ Yes <br>
53-
<span class="text-secondary">lg:classname, md:classname, sm:classname, <br>
54-
max-lg:classname, max-md:classname, max-sm:classname</span>
55-
</p>
56-
<hr>
50+
<p>Text color utilities allow you to quickly apply text colors to any element. The library provides semantic color names (like text-base, text-secondary, text-muted), theme colors (like text-primary, text-red, text-blue), and shade variants (like text-blue-300, text-red-600) for fine-grained control. All colors automatically adapt to dark mode through CSS variables.</p>
5751

58-
<h5> What it does? </h5>
59-
<p class="text-secondary"> Here are representative examples of these classes: </p>
52+
<hr>
53+
<h5>What it does?</h5>
54+
<p class="text-secondary">Here are representative examples of these classes:</p>
6055
<table class="table table-compact table-hover">
61-
<tr class="bg-secondary"> <th> Class </th> <td> Styles </th> </tr>
62-
<tr> <td class="text-blue"> {{ CLASSNAME }} </td> <td class="text-purple"> {{ ITS CSS STYLE }} </td> </tr>
63-
<!-- {{ ADD ROWS IF AVAILABLE <tr> <td> {{ CLASSNAME }} </td> <td> {{ ITS CSS STYLE }} </td> </tr> }} -->
56+
<tr class="bg-secondary"> <th>Class</th> <td>Styles</td> </tr>
57+
<tr> <td class="text-blue">text-base</td> <td class="text-purple">color: var(--text-color-base);</td> </tr>
58+
<tr> <td class="text-blue">text-secondary</td> <td class="text-purple">color: var(--text-color-secondary);</td> </tr>
59+
<tr> <td class="text-blue">text-muted</td> <td class="text-purple">color: var(--text-color-muted);</td> </tr>
60+
<tr> <td class="text-blue">text-inherit</td> <td class="text-purple">color: inherit;</td> </tr>
61+
<tr> <td class="text-blue">text-initial</td> <td class="text-purple">color: initial;</td> </tr>
62+
<tr> <td class="text-blue">text-white</td> <td class="text-purple">color: #FFF;</td> </tr>
63+
<tr> <td class="text-blue">text-dark</td> <td class="text-purple">color: #000;</td> </tr>
64+
<tr> <td class="text-blue">text-black</td> <td class="text-purple">color: #000;</td> </tr>
65+
<tr> <td class="text-blue">text-primary</td> <td class="text-purple">color: #4f46e5;</td> </tr>
66+
<tr> <td class="text-blue">text-primary-100</td> <td class="text-purple">color: var(--primary-100) !important;</td> </tr>
67+
<tr> <td class="text-blue">text-primary-200</td> <td class="text-purple">color: var(--primary-200) !important;</td> </tr>
68+
<tr> <td class="text-blue">text-primary-300 ... 900</td> <td class="text-purple">color: var(--primary-[shade]) !important;</td> </tr>
69+
<tr> <td class="text-blue">text-red</td> <td class="text-purple">color: #d11616;</td> </tr>
70+
<tr> <td class="text-blue">text-red-100 ... 900</td> <td class="text-purple">color: var(--red-[shade]) !important;</td> </tr>
71+
<tr> <td class="text-blue">text-green</td> <td class="text-purple">color: #0d923e;</td> </tr>
72+
<tr> <td class="text-blue">text-green-100 ... 900</td> <td class="text-purple">color: var(--green-[shade]) !important;</td> </tr>
73+
<tr> <td class="text-blue">text-blue</td> <td class="text-purple">color: #2563eb;</td> </tr>
74+
<tr> <td class="text-blue">text-blue-100 ... 900</td> <td class="text-purple">color: var(--blue-[shade]) !important;</td> </tr>
75+
<tr> <td class="text-blue">text-orange</td> <td class="text-purple">color: #d14f09;</td> </tr>
76+
<tr> <td class="text-blue">text-orange-100 ... 900</td> <td class="text-purple">color: var(--orange-[shade]) !important;</td> </tr>
77+
<tr> <td class="text-blue">text-yellow</td> <td class="text-purple">color: #D6A400;</td> </tr>
78+
<tr> <td class="text-blue">text-yellow-100 ... 900</td> <td class="text-purple">color: var(--yellow-[shade]) !important;</td> </tr>
79+
<tr> <td class="text-blue">text-purple</td> <td class="text-purple">color: #9333ea;</td> </tr>
80+
<tr> <td class="text-blue">text-purple-100 ... 900</td> <td class="text-purple">color: var(--purple-[shade]) !important;</td> </tr>
81+
<tr> <td class="text-blue">text-teal</td> <td class="text-purple">color: #0d9488;</td> </tr>
82+
<tr> <td class="text-blue">text-teal-100 ... 900</td> <td class="text-purple">color: var(--teal-[shade]) !important;</td> </tr>
83+
<tr> <td class="text-blue">text-neutral-0 ... 1000</td> <td class="text-purple">color: var(--neutral-[shade]) !important;</td> </tr>
84+
<tr> <td class="text-blue">hover:text-*</td> <td class="text-purple">color: [color] (on hover state);</td> </tr>
85+
<tr> <td class="text-blue">group-hover:text-*</td> <td class="text-purple">color: [color] (when parent .group is hovered);</td> </tr>
86+
<tr> <td class="text-blue">links-color-*</td> <td class="text-purple">Applies color to all &lt;a&gt; elements inside;</td> </tr>
6487
</table>
65-
66-
67-
<h5> Basic example </h5>
88+
<h5>Basic example</h5>
6889
<figure class="rounded border shadow">
6990
<div class="card-body">
7091
<!-- example -->
71-
{{ REPLECE_THIS WITH SIMPLE EXAMPLE BASED ON GIVEN SASS STYLING, TO REPRESENT DEMO }}
92+
<p class="text-base">This text uses the base color</p>
93+
<p class="text-secondary">This text uses the secondary color</p>
94+
<p class="text-muted">This text uses the muted color</p>
95+
<p class="text-primary">This text uses the primary theme color</p>
96+
<p class="text-red">This text is red</p>
97+
<p class="text-green">This text is green</p>
98+
<p class="text-blue">This text is blue</p>
7299
<!-- example .//end -->
73100
</div>
74101
<figcaption>
75102
<!-- code -->
76-
<pre class="m-0"><code class="rounded-bottom language-html"> {{ &lt;tag&gt; CODE_OF_ABOVE_EXAMPLE_WITH_HTML_ESCAPE &lt;tag&gt; }}</code></pre>
103+
<pre class="m-0"><code class="rounded-bottom language-html">&lt;p class="text-base"&gt;This text uses the base color&lt;/p&gt;
104+
&lt;p class="text-secondary"&gt;This text uses the secondary color&lt;/p&gt;
105+
&lt;p class="text-muted"&gt;This text uses the muted color&lt;/p&gt;
106+
&lt;p class="text-primary"&gt;This text uses the primary theme color&lt;/p&gt;
107+
&lt;p class="text-red"&gt;This text is red&lt;/p&gt;
108+
&lt;p class="text-green"&gt;This text is green&lt;/p&gt;
109+
&lt;p class="text-blue"&gt;This text is blue&lt;/p&gt;</code></pre>
77110
<!-- code -->
78111
</figcaption>
79112
</figure>
80-
81-
82-
<h5>Examples</h5>
83-
<p class="text-secondary"> {{ Some text about this example and reason to use }} </p>
113+
<h5>Text on hover</h5>
114+
<p class="text-secondary">You can change text color on hover using the <code>hover:</code> prefix. This is useful for interactive elements like links and buttons where you want to provide visual feedback.</p>
84115
<figure class="rounded border shadow">
85116
<div class="card-body">
86117
<!-- example -->
87-
{{ REPLECE_THIS WITH EXAMPLES BASED ON GIVEN SASS STYLING, TO REPRESENT DEMO }}
118+
<p class="text-base hover:text-primary">Hover over this text to see it turn primary color</p>
119+
<p class="text-secondary hover:text-red">Hover over this text to see it turn red</p>
120+
<p class="text-muted hover:text-green">Hover over this text to see it turn green</p>
121+
<button class="btn text-base hover:text-blue">Hover me</button>
88122
<!-- example .//end -->
89123
</div>
90124
<figcaption>
91125
<!-- code -->
92-
<pre class="m-0"><code class="rounded-bottom language-html"> {{ &lt;tag&gt; CODE_OF_ABOVE_EXAMPLE_WITH_HTML_ESCAPE &lt;tag&gt; }}</code></pre>
126+
<pre class="m-0"><code class="rounded-bottom language-html">&lt;p class="text-base hover:text-primary"&gt;Hover over this text to see it turn primary color&lt;/p&gt;
127+
&lt;p class="text-secondary hover:text-red"&gt;Hover over this text to see it turn red&lt;/p&gt;
128+
&lt;p class="text-muted hover:text-green"&gt;Hover over this text to see it turn green&lt;/p&gt;
129+
&lt;button class="btn text-base hover:text-blue"&gt;Hover me&lt;/button&gt;</code></pre>
93130
<!-- code -->
94131
</figcaption>
95132
</figure>
133+
<h5>Changing text color based on parent hover</h5>
134+
<p class="text-secondary">Use the <code>group-hover:</code> variant to change child element colors when hovering over a parent element. Add the <code>group</code> class to the parent, then use <code>group-hover:text-*</code> on child elements. This is perfect for card components, navigation items, or any grouped interactive elements.</p>
135+
<figure class="rounded border shadow">
136+
<div class="card-body">
137+
<!-- example -->
138+
<div class="card group p-4 mb-3">
139+
<h6 class="group-hover:text-primary">Hover over this card</h6>
140+
<p class="text-secondary group-hover:text-red">The text color changes on parent hover</p>
141+
</div>
96142

143+
<div class="card group p-4 hover:bg-primary-100">
144+
<h6 class="group-hover:text-green">Interactive Card</h6>
145+
<p class="text-secondary group-hover:text-purple">Hover over the entire card area</p>
146+
</div>
147+
<!-- example .//end -->
148+
</div>
149+
<figcaption>
150+
<!-- code -->
151+
<pre class="m-0"><code class="rounded-bottom language-html"> &lt;div class=&quot;card group &quot;&gt;
152+
&lt;h6 class=&quot;group-hover:text-primary&quot;&gt;Hover over this card&lt;/h6&gt;
153+
&lt;p class=&quot;text-secondary group-hover:text-red&quot;&gt;The text color changes on parent hover&lt;/p&gt;
154+
&lt;/div&gt;
97155

98-
<h5> How to customize? </h5>
99-
<p> {{ SHORT TEXT ABOUT CUSTOMIZATION USING scss/utilities/_filename.scss AND COMPILE }} </p>
156+
&lt;div class=&quot;card group hover:bg-primary-100&quot;&gt;
157+
&lt;h6 class=&quot;group-hover:text-green&quot;&gt;Interactive Card&lt;/h6&gt;
158+
&lt;p class=&quot;text-secondary group-hover:text-purple&quot;&gt;Hover over the entire card area&lt;/p&gt;
159+
&lt;/div&gt;</code></pre>
160+
<!-- code -->
161+
</figcaption>
162+
</figure>
163+
<h5>Link colors</h5>
164+
<p class="text-secondary">Apply colors to all links within a container using <code>links-color-*</code> classes. This is useful for styling multiple links at once without adding classes to each individual link element.</p>
165+
<figure class="rounded border shadow">
166+
<div class="card-body">
167+
<!-- example -->
168+
<div class="links-color-primary mb-3">
169+
<p>Links in this container are primary colored: <a href="#">Link one</a>, <a href="#">Link two</a>, <a href="#">Link three</a></p>
170+
</div>
171+
<div class="links-color-red mb-3">
172+
<p>Links in this container are red: <a href="#">Link one</a>, <a href="#">Link two</a>, <a href="#">Link three</a></p>
173+
</div>
174+
<div class="links-color-green">
175+
<p>Links in this container are green: <a href="#">Link one</a>, <a href="#">Link two</a>, <a href="#">Link three</a></p>
176+
</div>
177+
<!-- example .//end -->
178+
</div>
179+
<figcaption>
180+
<!-- code -->
181+
<pre class="m-0"><code class="rounded-bottom language-html"> &lt;div class=&quot;links-color-primary&quot;&gt;
182+
&lt;p&gt;Links in this container are primary colored: &lt;a href=&quot;#&quot;&gt;Link one&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Link two&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Link three&lt;/a&gt;&lt;/p&gt;
183+
&lt;/div&gt;
184+
&lt;div class=&quot;links-color-red&quot;&gt;
185+
&lt;p&gt;Links in this container are red: &lt;a href=&quot;#&quot;&gt;Link one&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Link two&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Link three&lt;/a&gt;&lt;/p&gt;
186+
&lt;/div&gt;
187+
&lt;div class=&quot;links-color-green&quot;&gt;
188+
&lt;p&gt;Links in this container are green: &lt;a href=&quot;#&quot;&gt;Link one&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Link two&lt;/a&gt;, &lt;a href=&quot;#&quot;&gt;Link three&lt;/a&gt;&lt;/p&gt;
189+
&lt;/div&gt; </code></pre>
190+
<!-- code -->
191+
</figcaption>
192+
</figure>
193+
<h5>Different color shades</h5>
194+
<p class="text-secondary">Each color comes with 9 shade variants (100-900) for precise color control. Use lighter shades (100-300) for subtle text, medium shades (400-600) for standard text, and darker shades (700-900) for emphasis. For example: <code>text-blue-300</code>, <code>text-red-600</code>, <code>text-green-800</code>.</p>
195+
<figure class="rounded border shadow">
196+
<div class="card-body">
197+
<!-- example -->
198+
<div class="mb-4">
199+
<h6>Blue shades:</h6>
200+
<p class="text-blue-200">text-blue-200 - Lightest</p>
201+
<p class="text-blue-300">text-blue-300 - Light</p>
202+
<p class="text-blue-500">text-blue-500 - Medium</p>
203+
<p class="text-blue-700">text-blue-700 - Dark</p>
204+
<p class="text-blue-900">text-blue-900 - Darkest</p>
205+
</div>
206+
<div class="mb-4">
207+
<h6>Red shades:</h6>
208+
<p class="text-red-200">text-red-200</p>
209+
<p class="text-red-400">text-red-400</p>
210+
<p class="text-red-600">text-red-600</p>
211+
<p class="text-red-800">text-red-800</p>
212+
</div>
213+
<div>
214+
<h6>Green shades:</h6>
215+
<p class="text-green-200">text-green-200</p>
216+
<p class="text-green-400">text-green-400</p>
217+
<p class="text-green-600">text-green-600</p>
218+
<p class="text-green-800">text-green-800</p>
219+
</div>
220+
<!-- example .//end -->
221+
</div>
222+
<figcaption>
223+
<!-- code -->
224+
<pre class="m-0"><code class="rounded-bottom language-html">&lt;p class="text-blue-200"&gt;text-blue-200 - Lightest&lt;/p&gt;
225+
&lt;p class="text-blue-300"&gt;text-blue-300 - Light&lt;/p&gt;
226+
&lt;p class="text-blue-500"&gt;text-blue-500 - Medium&lt;/p&gt;
227+
&lt;p class="text-blue-700"&gt;text-blue-700 - Dark&lt;/p&gt;
228+
&lt;p class="text-blue-900"&gt;text-blue-900 - Darkest&lt;/p&gt;
229+
&lt;p class="text-red-600">text-red-600&lt;/p&gt
230+
&lt;p class="text-green-600">text-green-600&lt;/p&gt</code></pre>
231+
<!-- code -->
232+
</figcaption>
233+
</figure>
234+
<h5>How color system work?</h5>
235+
<p>All colors are defined in the <code>scss/_theme.scss</code> file using a comprehensive color palette system. The library uses CSS custom properties (variables) that automatically adapt to dark mode, ensuring consistent theming across your entire application. When dark mode is enabled, color values automatically adjust to maintain proper contrast and readability without requiring any additional classes or modifications to your HTML.</p>
236+
<h5>Base color variables</h5>
237+
<p>FinalCSS uses semantic color variables defined in the <code>scss/_variables-root.scss</code> file. You can override these default values to customize your theme. Key variables include:</p>
100238
<figure class="rounded">
101239
<figcaption>
102240
<!-- code -->
103-
<pre class="m-0"><code class="rounded language-css"> {{ PUT HERE SCSS CODE }}</code></pre>
241+
<pre class="m-0"><code class="rounded language-css">/* Semantic text color variables */
242+
--text-color-base: var(--neutral-800);
243+
--text-color-secondary: var(--neutral-600);
244+
--text-color-muted: var(--neutral-400);
245+
--text-color-invert: #fff;
246+
--text-color-primary: var(--primary-600);
247+
/* Border and background variables */
248+
--border-color-default: var(--neutral-200);
249+
--bg-color-base: #fff;
250+
--bg-color-raised: var(--neutral-50);</code></pre>
251+
<!-- code -->
252+
</figcaption>
253+
</figure>
254+
<p>These variables reference the main color palette, which includes shades from 100 to 900 for colors like primary, red, green, blue, orange, yellow, purple, teal, and neutral. You can customize any of these values to match your brand identity.</p>
255+
<h5>How to customize?</h5>
256+
<p>To customize text colors, edit the <code>scss/utilities/_text-color.scss</code> file and modify the color definitions in <code>scss/_theme.scss</code>. After making changes, compile your SCSS to CSS to see the updates.</p>
257+
<figure class="rounded">
258+
<figcaption>
104259
<!-- code -->
105-
</figcaption>
260+
<pre class="m-0"><code class="rounded language-css"> /* scss/utilities/_text-color.scss
261+
Define colors of text
262+
Default color chosen as 600, for example text-red classname = text-red-600
263+
*/
264+
$colors_text_main:(
265+
"base": var(--text-color-base),
266+
"secondary": var(--text-color-secondary),
267+
"muted": var(--text-color-muted),
268+
"inherit": inherit,
269+
"initial": initial,
270+
"white": #FFF,
271+
"dark": #000,
272+
"black": #000,
273+
"primary": map-get(map-get($colors_list, "primary"), "600"),
274+
"red": map-get(map-get($colors_list, "red"), "600"),
275+
"green": map-get(map-get($colors_list, "green"), "600"),
276+
"blue": map-get(map-get($colors_list, "blue"), "600"),
277+
"orange": map-get(map-get($colors_list, "orange"), "600"),
278+
"yellow": map-get(map-get($colors_list, "yellow"), "600"),
279+
"purple": map-get(map-get($colors_list, "purple"), "600"),
280+
"teal": map-get(map-get($colors_list, "teal"), "600")
281+
);
282+
283+
/* Link colors or a tag */
284+
@each $classname, $value in $colors_text_main {
285+
.links-color-#{$classname} a { color: #{$value}; }
286+
.text-#{$classname} { color: #{$value}; }
287+
.hover\:text-#{$classname}:hover{ color: #{$value}; }
288+
.group:hover .group-hover\:text-#{$classname}{ color: #{$value}; }
289+
}
290+
291+
292+
/* Generate classes for text colors based on color list of theme.scss */
293+
@each $color, $shades in $colors_list {
294+
@each $shade, $value in $shades {
295+
.text-#{$color}-#{$shade} { color:var(--#{$color}-#{$shade}) !important; }
296+
.hover\:text-#{$color}-#{$shade}:hover { color:var(--#{$color}-#{$shade}) !important; }
297+
.group:hover .group-hover\:text-#{$color}-#{$shade} { color:var(--#{$color}-#{$shade}) !important; }
298+
}
299+
}
300+
</code></pre>
301+
<!-- code -->
302+
</figcaption>
106303
</figure>
107-
<p> {{ REWRITE FOLLWING ABOUT COMPILING SCSS / SASS INTO CSS: Option A) node and npm tools (if you know terminal and nodejs) B) Prepros.io software or codekit (if you like visual apps UI and hate terminal) }} </p>
304+
<p>To compile SCSS to CSS, you have two main options:</p>
305+
<p><strong>Option A:</strong> Use Node.js and npm tools if you're comfortable with the terminal and command-line interface. Install sass via npm (<code>npm install -g sass</code>) and run <code>sass input.scss output.css</code> to compile.</p>
306+
<p><strong>Option B:</strong> Use visual applications like Prepros.io or CodeKit if you prefer graphical user interfaces and want to avoid terminal commands. These apps provide drag-and-drop functionality and automatic compilation when you save files.</p>
108307
</article>
109-
110308
<!-- === end of documentation === -->
111309

112310

‎scss/utilities/_text-article.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
> p:not(:first-child){ margin-top: 1rem; }
55
> p{ margin-bottom: 1rem; }
66

7-
> h1, h2, h3, h4, h5, h6{
7+
> h1, > h2, > h3, > h4, > h5, > h6{
88
margin-bottom:1rem;
99
}
1010
p ~ h1, p ~ h2, p ~ h3, p ~ h4, p ~ h5, p ~ h6{

0 commit comments

Comments
 (0)