docs

Author: danharrin

docs-assets/app/app/Livewire/PrimesDemo.php

@@ -96,6 +96,16 @@ public function primes(Schema $schema): Schema
                         Text::make('Information')
                             ->color('info'),
                     ]),
+                Group::make()
+                    ->id('textNeutral')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Text::make('Modifying these permissions may give users access to sensitive information.'),
+                        Text::make('Modifying these permissions may give users access to sensitive information.')
+                            ->color('neutral'),
+                    ]),
                 Group::make()
                     ->id('textBadge')
                     ->extraAttributes([
@@ -117,6 +127,33 @@ public function primes(Schema $schema): Schema
                             ->badge()
                             ->icon(Heroicon::ExclamationTriangle),
                     ]),
+                Group::make()
+                    ->id('textLarge')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Text::make('Modifying these permissions may give users access to sensitive information.')
+                            ->size(TextSize::Large),
+                    ]),
+                Group::make()
+                    ->id('textBold')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Text::make('Modifying these permissions may give users access to sensitive information.')
+                            ->weight(FontWeight::Bold),
+                    ]),
+                Group::make()
+                    ->id('textMono')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
+                            ->fontFamily(FontFamily::Mono),
+                    ]),
             ]);
     }
 

docs-assets/screenshots/images/dark/primes/text/bold.jpg

@@ -1856,6 +1856,15 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'primes/text/neutral': {
+        url: 'primes',
+        selector: '#textNeutral',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'primes/text/badge': {
         url: 'primes',
         selector: '#textBadge',
@@ -1874,6 +1883,33 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'primes/text/large': {
+        url: 'primes',
+        selector: '#textLarge',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'primes/text/bold': {
+        url: 'primes',
+        selector: '#textBold',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
+    'primes/text/mono': {
+        url: 'primes',
+        selector: '#textMono',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+    },
     'tables/example': {
         url: 'tables?table=example',
         selector: 'body',

docs-assets/screenshots/images/dark/primes/text/color.jpg

@@ -524,7 +524,7 @@ TextEntry::make('tags')
 
 <UtilityInjection set="infolistEntries" version="4.x">As well as allowing a static value, the `separator()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
 
-### Customizing the text size
+## Customizing the text size
 
 Text columns have small font size by default, but you may change this to `TextSize::ExtraSmall`, `TextSize::Medium`, or `TextSize::Large`.
 
@@ -540,7 +540,7 @@ TextEntry::make('title')
 
 <AutoScreenshot name="infolists/entries/text/large" alt="Text entry in a large font size" version="4.x" />
 
-### Customizing the font weight
+## Customizing the font weight
 
 Text entries have regular font weight by default, but you may change this to any of the following options: `FontWeight::Thin`, `FontWeight::ExtraLight`, `FontWeight::Light`, `FontWeight::Medium`, `FontWeight::SemiBold`, `FontWeight::Bold`, `FontWeight::ExtraBold` or `FontWeight::Black`.
 

docs-assets/screenshots/images/dark/primes/text/large.jpg

@@ -57,10 +57,25 @@ Text::make('Information')
     ->color('info')
 ```
 
-<UtilityInjection set="infolistEntries" version="4.x">As well as allowing a static value, the `color()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+<UtilityInjection set="primeComponents" version="4.x">As well as allowing a static value, the `color()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
 
 <AutoScreenshot name="primes/text/color" alt="Text in the info color" version="4.x" />
 
+### Using a neutral color
+
+By default, the text color is set to `gray`, which is typically fairly dim against its background. You can darken it using the `color('neutral')` method:
+
+```php
+use Filament\Schemas\Components\Text;
+
+Text::make('Modifying these permissions may give users access to sensitive information.')
+
+Text::make('Modifying these permissions may give users access to sensitive information.')
+    ->color('neutral')
+```
+
+<AutoScreenshot name="primes/text/neutral" alt="Text in the neutral color" version="4.x" />
+
 ## Displaying as a "badge"
 
 By default, text is quite plain and has no background color. You can make it appear as a "badge" instead using the `badge()` method. A great use case for this is with statuses, where may want to display a badge with a [color](#customizing-the-color) that matches the status:
@@ -85,9 +100,9 @@ Text::make('Warning')
     ->badge(FeatureFlag::active())
 ```
 
-<UtilityInjection set="infolistEntries" version="4.x">As well as allowing a static value, the `badge()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+<UtilityInjection set="primeComponents" version="4.x">As well as allowing a static value, the `badge()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
 
-### Adding an icon to a badge
+### Adding an icon to the badge
 
 You may add other things to the badge, like an [icon](../../styling/icons):
 
@@ -102,3 +117,55 @@ Text::make('Warning')
 ```
 
 <AutoScreenshot name="primes/text/badge-icon" alt="Text as badge with an icon" version="4.x" />
+
+## Customizing the text size
+
+Text columns have small font size by default, but you may change this to `TextSize::ExtraSmall`, `TextSize::Medium`, or `TextSize::Large`.
+
+For instance, you may make the text larger using `size(TextSize::Large)`:
+
+```php
+use Filament\Schemas\Components\Text;
+use Filament\Support\Enums\TextSize;
+
+Text::make('Modifying these permissions may give users access to sensitive information.')
+    ->size(TextSize::Large)
+```
+
+<AutoScreenshot name="primes/text/large" alt="Text entry in a large font size" version="4.x" />
+
+## Customizing the font weight
+
+Text entries have regular font weight by default, but you may change this to any of the following options: `FontWeight::Thin`, `FontWeight::ExtraLight`, `FontWeight::Light`, `FontWeight::Medium`, `FontWeight::SemiBold`, `FontWeight::Bold`, `FontWeight::ExtraBold` or `FontWeight::Black`.
+
+For instance, you may make the font bold using `weight(FontWeight::Bold)`:
+
+```php
+use Filament\Schemas\Components\Text;
+use Filament\Support\Enums\FontWeight;
+
+Text::make('Modifying these permissions may give users access to sensitive information.')
+    ->weight(FontWeight::Bold)
+```
+
+<UtilityInjection set="primeComponents" version="4.x">As well as allowing a static value, the `weight()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+<AutoScreenshot name="primes/text/bold" alt="Text entry in a bold font" version="4.x" />
+
+## Customizing the font family
+
+You can change the text font family to any of the following options: `FontFamily::Sans`, `FontFamily::Serif` or `FontFamily::Mono`.
+
+For instance, you may make the font monospaced using `fontFamily(FontFamily::Mono)`:
+
+```php
+use Filament\Support\Enums\FontFamily;
+use Filament\Schemas\Components\Text;
+
+Text::make('28o.-AK%D~xh*.:[4"3)zPiC')
+    ->fontFamily(FontFamily::Mono)
+```
+
+<UtilityInjection set="primeComponents" version="4.x">As well as allowing a static value, the `fontFamily()` method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+<AutoScreenshot name="primes/text/mono" alt="Text entry in a monospaced font" version="4.x" />