Colors
The colors personalization.
All TallStackUI components are based on three custom colors: primary, secondary, and dark. Speaking mainly of the primary color, it is the color that defines and guides the color style of your application. Apart from that, all other colors are the original TailwindCSS colors. You can customize the primary, secondary, and dark colors as per your preference following the TailwindCSS custom color concept.
If you want to customize custom colors like primary, secondary and dark, just follow the normal TailwindCSS color customization concept:
theme: { extend: { // ... colors: { 'primary': { DEFAULT: '#acf73b', '50': '#f7ffe5', '100': '#edffc7', '200': '#daff95', '300': '#beff57', '400': '#acf73b', '500': '#83dd05', '600': '#63b100', '700': '#4b8605', '800': '#3e690b', '900': '#34590e', '950': '#193201', }, 'secondary': { DEFAULT: '#b5b5b5', '50': '#f7f7f7', '100': '#ededed', '200': '#dfdfdf', '300': '#c8c8c8', '400': '#b5b5b5', '500': '#999999', '600': '#888888', '700': '#7b7b7b', '800': '#676767', '900': '#545454', '950': '#363636', }, 'dark': { DEFAULT: '#3f4d69', '50': '#f6f7f9', '100': '#ebeef3', '200': '#d3d9e4', '300': '#acb8cd', '400': '#7f92b1', '500': '#5f7498', '600': '#4b5d7e', '700': '#3f4d69', '800': '#364156', '900': '#30384a', '950': '#202531', } } },},Remember to rebuild your assets after making any adjustments to TailwindCSS colors:
npm run build && php artisan optimize:clearAlthough the components use the standard TailwindCSS colors, if you wonder if it is possible to manipulate the colors or even create completely custom colors, in addition to those offered by default and mentioned above: primary, secondary and dark, the answer is yes. The process of manipulating colors is extremely easy through the definition of object classes used to map the color manipulation of TallStackUI components.
To create or manipulate the colors, you need to execute the following command to select the component:
php artisan tallstackui:setup-color
After selecting the component from the list of available options, a PHP object class will be created in
the App\View\Components\TallStackUi\Colors
namespace. At first, don't worry about this namespace, you
are free to change this namespace to any other namespace you want.
Let's assume that you have selected the Alert
component, then the object class will be like this:
// app/View/Components/TallStackUi/Colors/AlertColors.php namespace App\View\Components\TallStackUi\Colors; use Illuminate\View\Component; class AlertColors{ /** * Background colors. */ public function backgroundColors(Component $component): array { return [ 'solid' => [ 'white' => null, 'black' => null, 'primary' => null, 'secondary' => null, 'slate' => null, 'gray' => null, 'zinc' => null, 'neutral' => null, 'stone' => null, 'red' => null, 'orange' => null, 'amber' => null, 'yellow' => null, 'lime' => null, 'green' => null, 'emerald' => null, 'teal' => null, 'cyan' => null, 'sky' => null, 'blue' => null, 'indigo' => null, 'violet' => null, 'purple' => null, 'fuchsia' => null, 'pink' => null, 'rose' => null, ], 'outline' => [ 'white' => null, 'black' => null, 'primary' => null, 'secondary' => null, 'slate' => null, 'gray' => null, 'zinc' => null, 'neutral' => null, 'stone' => null, 'red' => null, 'orange' => null, 'amber' => null, 'yellow' => null, 'lime' => null, 'green' => null, 'emerald' => null, 'teal' => null, 'cyan' => null, 'sky' => null, 'blue' => null, 'indigo' => null, 'violet' => null, 'purple' => null, 'fuchsia' => null, 'pink' => null, 'rose' => null, ], 'light' => [ 'white' => null, 'black' => null, 'primary' => null, 'secondary' => null, 'slate' => null, 'gray' => null, 'zinc' => null, 'neutral' => null, 'stone' => null, 'red' => null, 'orange' => null, 'amber' => null, 'yellow' => null, 'lime' => null, 'green' => null, 'emerald' => null, 'teal' => null, 'cyan' => null, 'sky' => null, 'blue' => null, 'indigo' => null, 'violet' => null, 'purple' => null, 'fuchsia' => null, 'pink' => null, 'rose' => null, ], ]; } /** * Text colors. */ public function textColors(Component $component): array { return [ 'solid' => [ 'white' => null, 'black' => null, 'primary' => null, 'secondary' => null, 'slate' => null, 'gray' => null, 'zinc' => null, 'neutral' => null, 'stone' => null, 'red' => null, 'orange' => null, 'amber' => null, 'yellow' => null, 'lime' => null, 'green' => null, 'emerald' => null, 'teal' => null, 'cyan' => null, 'sky' => null, 'blue' => null, 'indigo' => null, 'violet' => null, 'purple' => null, 'fuchsia' => null, 'pink' => null, 'rose' => null, ], 'outline' => [ 'white' => null, 'black' => null, 'primary' => null, 'secondary' => null, 'slate' => null, 'gray' => null, 'zinc' => null, 'neutral' => null, 'stone' => null, 'red' => null, 'orange' => null, 'amber' => null, 'yellow' => null, 'lime' => null, 'green' => null, 'emerald' => null, 'teal' => null, 'cyan' => null, 'sky' => null, 'blue' => null, 'indigo' => null, 'violet' => null, 'purple' => null, 'fuchsia' => null, 'pink' => null, 'rose' => null, ], 'light' => [ 'white' => null, 'black' => null, 'primary' => null, 'secondary' => null, 'slate' => null, 'gray' => null, 'zinc' => null, 'neutral' => null, 'stone' => null, 'red' => null, 'orange' => null, 'amber' => null, 'yellow' => null, 'lime' => null, 'green' => null, 'emerald' => null, 'teal' => null, 'cyan' => null, 'sky' => null, 'blue' => null, 'indigo' => null, 'violet' => null, 'purple' => null, 'fuchsia' => null, 'pink' => null, 'rose' => null, ], ]; }}Here is some important caveats:
-
There is two methods inside the class used in this example,
backgroundColorsandtextColors, which means that these methods are responsible for defining the background and text colors of the component, respectively. Each component has its own color methods, so you can manipulate the colors of each component individually. -
You may have noticed that there is a
\Illuminate\View\Component $componentproperty added as a parameter to each method. This property is actually the component instance so you can interact with it if you need to. -
Notice that all colors have their values as
null, which means that the default value - internal, will be applied when the value is null, blank or the color index does not exist in the array. So only if the color index exists and has a valid value will it be applied. - It's important to mention that if one of the methods is removed, the internal definitions will be applied, the same happens if you change - accidentally or not, the visibility of the method, if it exists, it will be used, regardless of whether it is public, private or protected.
When you publish the configuration file, you can change the default namespace for the color classes. If you prefer, you can control this through an environment variable:
TALLSTACKUI_COLOR_CLASSES_NAMESPACE="App\\View\\Components\\TallStackUi\\Colors"Given all the above explanations, creating a new and totally personal color is extremely easy:
namespace App\View\Components\TallStackUi\Colors; use Illuminate\View\Component; class AlertColors{ /** * Background colors. */ public function backgroundColors(Component $component): array { // You can omit all other colors if you don't want to change them. return [ 'solid' => [ 'foo-bar' => 'bg-gradient-to-bl from-slate-700 via-violet-600 to-indigo-600', // 'primary' => null, // 'secondary' => null, // 'slate' => null, ], // 'outline' => [/* ... */], // 'light' => [/* ... */], ]; } /** * Text colors. */ public function textColors(Component $component): array { return [ 'solid' => [ 'foo-bar' => 'text-slate-900', // 'primary' => null, // 'secondary' => null, // 'slate' => null, ], // 'outline' => [/* ... */], // 'light' => [/* ... */], ]; }}Now all you need to do is use the new color in the component class:
<x-alert text="My custom color is foo-bar" color="foo-bar" />
Although this example used red
, you can use completely custom colors as you build in TailwindCSS.