Skip to content
This repository was archived by the owner on Mar 18, 2025. It is now read-only.

Commit 0f1e70c

Browse files
rawilkrawilk
committed
Update tailwind colors
1 parent 752004b commit 0f1e70c

23 files changed

+62
-77
lines changed

‎docs/advanced-usage/customizing-css.md‎

Lines changed: 11 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ select[disabled] {
4747
@apply bg-gray-100;
4848

4949
/* default styles from the package */
50-
/*@apply bg-blue-gray-50 cursor-not-allowed;*/
50+
/*@apply bg-slate-50 cursor-not-allowed;*/
5151
}
5252

5353
...
@@ -66,42 +66,27 @@ module.exports = {
6666
theme: {
6767
extend: {
6868
colors: {
69-
'blue-gray': colors.blueGray,
70-
'cool-gray': colors.coolGray,
69+
slate: colors.slate,
7170
},
7271
},
7372
},
7473
};
7574
```
7675

77-
This will extend the default tailwind color palette to include the `blue-gray` and `cool-gray` color variants.
76+
This will extend the default tailwind color palette to include the `slate` color variant.
7877

7978
> {note} If you have a custom color palette configured, you will need to make sure you have the `blue` and `red` colors configured as well, with all
8079
> levels available (`50` through `900`).
8180
82-
Certain components make use of a custom utility class called `outline-blue-gray`, which adds a 2px dotted outline around the element when focused. If you opt to not add this outline variant to your configuration, it will not affect building the CSS since the package's stylesheet does not reference it; the outline variant is only rendered directly onto the elements it's used for. If you want the outline to show up, you can add the following to your `tailwind.config.js` file:
81+
Certain components make use of a custom utility class called `outline-slate`, which adds a 2px dotted outline around the element when focused. If you opt to not add this outline variant to your configuration, it will not affect building the CSS since the package's stylesheet does not reference it; the outline variant is only rendered directly onto the elements it's used for. If you want the outline to show up, you can add the following to a stylesheet in a `@layer utilities`:
8382

84-
```js
85-
// tailwind.config.js
86-
87-
const colors = require('tailwindcss/colors');
88-
89-
module.exports = {
90-
// ...
91-
92-
theme: {
93-
extend: {
94-
colors: {
95-
// see above snippet for colors
96-
// ...
97-
},
98-
99-
outline: {
100-
'blue-gray': [`2px dotted ${colors.blueGray['500']}`, '2px'],
101-
},
102-
},
103-
},
104-
};
83+
```css
84+
@layer utilities {
85+
.outline-slate {
86+
outline: 2px dotted theme('colors.slate.400');
87+
outline-offset: 2px;
88+
}
89+
}
10590
```
10691

10792
## Purge CSS/Tailwind JIT

‎resources/css/custom-select.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@apply pl-2
55
pr-1
66
border
7-
border-blue-gray-300
7+
border-slate-300
88
rounded-md
99
bg-white
1010
sm:text-sm
@@ -16,7 +16,7 @@
1616

1717
.custom-select__button.disabled,
1818
.tree-select__button.disabled {
19-
@apply bg-blue-gray-50 cursor-not-allowed;
19+
@apply bg-slate-50 cursor-not-allowed;
2020
}
2121

2222
.custom-select-menu,
@@ -59,12 +59,12 @@
5959

6060
.custom-select-menu:not(.invisible)[data-popper-placement="bottom-start"] + .custom-select__button,
6161
.tree-select-menu:not(.invisible)[data-popper-placement="bottom-start"] + .tree-select__button {
62-
@apply rounded-b-none border-b-blue-gray-200;
62+
@apply rounded-b-none border-b-slate-200;
6363
}
6464

6565
.custom-select-menu:not(.invisible)[data-popper-placement="top-start"] + .custom-select__button,
6666
.tree-select-menu:not(.invisible)[data-popper-placement="top-start"] + .tree-select__button {
67-
@apply rounded-t-none border-t-blue-gray-200;
67+
@apply rounded-t-none border-t-slate-200;
6868
}
6969

7070
.custom-select-option,
@@ -74,12 +74,12 @@
7474

7575
.custom-select-option__container,
7676
.tree-select-option__container {
77-
@apply px-2.5 text-sm text-blue-gray-600 flex items-center;
77+
@apply px-2.5 text-sm text-slate-600 flex items-center;
7878
}
7979

8080
.custom-select-option:not(.disabled).has-focus > .custom-select-option__container,
8181
.tree-select-option:not(.disabled).has-focus > .tree-select-option__container{
82-
@apply bg-blue-gray-100 outline-none;
82+
@apply bg-slate-100 outline-none;
8383
}
8484

8585
.custom-select-option.disabled > .custom-select-option__container,
@@ -93,15 +93,15 @@
9393
}
9494

9595
.custom-select-option--opt-group .custom-select-option__container {
96-
@apply text-blue-gray-400 font-semibold;
96+
@apply text-slate-400 font-semibold;
9797
}
9898

9999
.custom-select-option--opt-group .custom-select-option__label {
100100
@apply py-2;
101101
}
102102

103103
.custom-select-option--opt-group:not(:first-child) {
104-
@apply border-t border-t-blue-gray-300;
104+
@apply border-t border-t-slate-300;
105105
}
106106

107107
.custom-select-option.selected > .custom-select-option__container,

‎resources/css/disabled.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
input[disabled],
33
textarea[disabled],
44
select[disabled] {
5-
@apply bg-blue-gray-50 cursor-not-allowed;
5+
@apply bg-slate-50 cursor-not-allowed;
66
}
77

88
.form-checkbox[disabled],
99
.form-checkbox.disabled,
1010
.form-radio[disabled],
1111
.form-radio.disabled {
12-
@apply opacity-75 text-blue-gray-300;
12+
@apply opacity-75 text-slate-300;
1313
}
1414
}

‎resources/css/filepond.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* filepond overrides */
22
/* purgecss start ignore */
33
.filepond--panel-root {
4-
@apply border-dashed border-2 border-blue-gray-200 rounded-md max-w-full transition;
4+
@apply border-dashed border-2 border-slate-200 rounded-md max-w-full transition;
55
@apply bg-transparent !important;
66
}
77

@@ -11,7 +11,7 @@
1111
}
1212

1313
.fc-filepond-desc {
14-
@apply text-blue-gray-500;
14+
@apply text-slate-500;
1515
}
1616

1717
.fc-filepond--sub-desc {

‎resources/css/flatpickr.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
.flatpickr-months .flatpickr-prev-month:hover svg,
2929
.flatpickr-months .flatpickr-next-month:hover svg {
30-
fill: theme('colors.blue-gray.800') !important;
30+
fill: theme('colors.slate.800') !important;
3131
}
3232

3333
.flatpickr-months .flatpickr-prev-month svg,
@@ -38,7 +38,7 @@
3838

3939
.flatpickr-months .flatpickr-prev-month:hover,
4040
.flatpickr-months .flatpickr-next-month:hover {
41-
@apply bg-blue-gray-300;
41+
@apply bg-slate-300;
4242
}
4343

4444
.flatpickr-months .flatpickr-month {
@@ -68,6 +68,6 @@
6868
}
6969

7070
.flatpickr-day.today:not(.selected) {
71-
@apply border-none bg-blue-gray-300 rounded-full text-blue-gray-500;
71+
@apply border-none bg-slate-300 rounded-full text-slate-500;
7272
}
7373
/* purgecss end ignore */

‎resources/css/switch-toggle.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
transition-colors
2020
ease-in-out
2121
duration-200
22-
bg-blue-gray-200;
22+
bg-slate-200;
2323
}
2424

2525
.switch-toggle-simple.pressed {
@@ -75,7 +75,7 @@
7575
h-5
7676
w-5
7777
border
78-
border-blue-gray-200
78+
border-slate-200
7979
rounded-full
8080
bg-white
8181
shadow
@@ -105,7 +105,7 @@
105105
.switch-toggle[disabled].switch-toggle-simple,
106106
.switch-toggle.disabled .switch-toggle-short-bg,
107107
.switch-toggle[disabled] .switch-toggle-short-bg {
108-
@apply bg-cool-gray-200;
108+
@apply bg-gray-200;
109109
}
110110

111111
.switch-toggle.disabled.switch-toggle-simple.pressed,
@@ -119,7 +119,7 @@
119119
.switch-toggle.disabled .switch-toggle-short-button,
120120
.switch-toggle[disabled] .switch-toggle-button,
121121
.switch-toggle[disabled] .switch-toggle-short-button {
122-
@apply bg-blue-gray-100;
122+
@apply bg-slate-100;
123123
}
124124

125125
/*

‎resources/views/components/choice/checkbox-or-radio.blade.php‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="choice-container relative flex items-start">
22
<div class="choice-input flex items-center h-5">
3-
<input {!! $attributes->class($type === 'checkbox' ? 'form-checkbox h-4 w-4 text-blue-600 border-blue-gray-300 rounded focus:ring-blue-500' : 'form-radio h-4 w-4 text-blue-600 border-blue-gray-300 focus:ring-blue-500')->except('type') !!}
3+
<input {!! $attributes->class($type === 'checkbox' ? 'form-checkbox h-4 w-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500' : 'form-radio h-4 w-4 text-blue-600 border-slate-300 focus:ring-blue-500')->except('type') !!}
44
@if ($name) name="{{ $name }}" @endif
55
@if ($id) id="{{ $id }}" @endif
66
type="{{ $type }}"
@@ -17,7 +17,7 @@
1717
@if (! $slot->isEmpty() || $label || $description)
1818
<div class="choice-label ml-3 text-sm leading-5">
1919
@if (! $slot->isEmpty() || $label)
20-
<label for="{{ $id }}" class="font-medium text-blue-gray-700">
20+
<label for="{{ $id }}" class="font-medium text-slate-700">
2121
@if ($label)
2222
{{ $label }}
2323
@else
@@ -27,7 +27,7 @@
2727
@endif
2828

2929
@if ($description)
30-
<p class="choice-description text-blue-gray-500">{{ $description }}</p>
30+
<p class="choice-description text-slate-500">{{ $description }}</p>
3131
@endif
3232
</div>
3333
@endif

‎resources/views/components/choice/switch-toggle.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ class="{{ $getContainerClass() }}"
2424
>
2525
@if ($label && $labelPosition === 'left')
2626
<span x-on:click="$refs.button.click(); $refs.button.focus();"
27-
class="flex-grow switch-toggle-label form-label block text-sm font-medium leading-5 text-blue-gray-700"
27+
class="flex-grow switch-toggle-label form-label block text-sm font-medium leading-5 text-slate-700"
2828
id="{{ $labelId() }}"
2929
>
3030
{{ $label }}
@@ -84,7 +84,7 @@ class="switch-toggle-button"
8484

8585
@if ($label && $labelPosition === 'right')
8686
<span x-on:click="$refs.button.click(); $refs.button.focus()"
87-
class="ml-3 switch-toggle-label form-label block text-sm font-medium leading-5 text-blue-gray-700"
87+
class="ml-3 switch-toggle-label form-label block text-sm font-medium leading-5 text-slate-700"
8888
id="{{ $labelId() }}"
8989
>
9090
{{ $label }}

‎resources/views/components/files/file-upload.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class="sr-only"
3131

3232
<label for="{{ $id }}"
3333
x-bind:class="{ 'file-upload__label--focused outline-none border-blue-300 ring-blue-300': focused }"
34-
class="file-upload__label cursor-pointer py-2 px-3 border border-blue-gray-300 rounded-md text-sm leading-4 font-medium text-blue-gray-700 transition shadow-sm hover:text-blue-gray-500 active:bg-blue-gray-50 active:text-blue-gray-800"
34+
class="file-upload__label cursor-pointer py-2 px-3 border border-slate-300 rounded-md text-sm leading-4 font-medium text-slate-700 transition shadow-sm hover:text-slate-500 active:bg-slate-50 active:text-slate-800"
3535
>
3636
<span role="button"
3737
aria-controls="{{ $id }}"

‎resources/views/components/form-group.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
@endif
1414

1515
@if ($inline && $hint)
16-
<span class="text-sm mt-1 text-blue-gray-500 hidden sm:block"
16+
<span class="text-sm mt-1 text-slate-500 hidden sm:block"
1717
@if ($inputId) id="{{ $inputId }}-hint-inline" @endif
1818
>
1919
{{ $hint }}
2020
</span>
2121
@endif
2222

2323
@if ($helpText)
24-
<p class="form-help mt-2 text-sm text-blue-gray-500" id="{{ $inputId }}-description">{{ $helpText }}</p>
24+
<p class="form-help mt-2 text-sm text-slate-500" id="{{ $inputId }}-description">{{ $helpText }}</p>
2525
@endif
2626
</div>
2727
</div>

0 commit comments

Comments
 (0)