Skip to content

Commit e862007

Browse files
yaroslav8765yaroslav8765
committed
chore: add styles for the button
1 parent e0b5365 commit e862007

File tree

3 files changed

+44
-52
lines changed

3 files changed

+44
-52
lines changed

‎adminforth/modules/styles.ts

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -140,15 +140,12 @@ export const styles = () => ({
140140
* *
141141
***************************************************************/
142142

143-
lightButtons: "#FFFFFF", // button background
144-
lightButtonsBorder: "#DDDDDD", // button border
145-
lightButtonsText: "#111827", // button text
146-
lightButtonsHover: "#f3f4f6", // button hover
147-
lightButtonsBorderHover: "#f3f4f6", // button border hover
148-
lightButtonsActive: "#f3f4f6", // button active
149-
lightButtonsDisabled: "#f3f4f6", // button disabled
150-
lightButtonsDisabledText: "#f3f4f6", // button disabled text
151-
lightButtonsIcon: "#333333", // button icon
143+
lightButtonsBackground: "alias:lightPrimary", // button background
144+
lightButtonsBorder: "alias:lightPrimary", // button border
145+
lightButtonsText: "alias:lightPrimaryContrast", // button text
146+
lightButtonsHover: "alias:lightPrimary lighten", // button hover
147+
lightButtonsBorderHover: "alias:lightPrimary", // button border hover
148+
lightButtonFocusRing: "alias:lightPrimary opacity:0.6", // button focus ring
152149

153150
lightDropdownButtonsBackground: "#f9fafb", // dropdown button/input background color
154151
lightDropownButtonsBorder: "#D1D5DB", //border color
@@ -365,7 +362,7 @@ export const styles = () => ({
365362

366363
/***************************************************************
367364
* *
368-
* Light Views *
365+
* Dark Views *
369366
* *
370367
***************************************************************/
371368
/*----------------------------------------*/
@@ -467,9 +464,16 @@ export const styles = () => ({
467464

468465
/***************************************************************
469466
* *
470-
* AdminForth light components *
467+
* AdminForth dark components *
471468
* *
472469
***************************************************************/
470+
darkButtonsBackground: "alias:darkPrimary", // button background
471+
darkButtonsBorder: "alias:darkPrimary", // button border
472+
darkButtonsText: "alias:darkPrimaryContrast", // button text
473+
darkButtonsHover: "alias:darkPrimary lighten", // button hover
474+
darkButtonsBorderHover: "alias:darkPrimary", // button border hover
475+
darkButtonFocusRing: "alias:darkPrimary opacity:0.6", // button focus ring
476+
473477
darkDropdownButtonsBackground: "#374151",
474478
darkDropdownButtonsBorder: "#4b5563",
475479
darkDropdownButtonsText: "#FFFFFF",

‎adminforth/spa/src/afcl/Button.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
<button
33
v-bind="$attrs"
44
type="submit"
5-
class="afcl-button flex items-center justify-center gap-1 text-lightPrimaryContrast bg-lightPrimary dark:bg-darkPrimary hover:brightness-110
6-
focus:ring-4 focus:outline-none focus:ring-lightPrimary focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkPrimary dark:focus:ring-opacity-50"
5+
class="afcl-button flex items-center justify-center gap-1 text-lightButtonsText bg-lightButtonsBackground border border-lightButtonsBorder dark:bg-darkButtonsBackground hover:bg-lightButtonsHover hover:border-lightButtonsBorderHover
6+
focus:ring-4 focus:outline-none focus:ring-lightButtonFocusRing focus:ring-opacity-50 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-darkButtonFocusRing dark:text-darkButtonsText dark:border-darkButtonsBorder dark:hover:bg-darkButtonsHover dark:hover:border-darkButtonsBorderHover"
77
:class="{
88
'cursor-default opacity-50 pointer-events-none': props.disabled,
99
'active brightness-200 hover:brightness-150' : props.active
1010
}"
1111
>
1212
<svg v-if="props.loader"
13-
aria-hidden="true" class="w-4 h-4 text-gray-200 animate-spin dark:text-gray-600 fill-lightPrimary dark:fill-darkPrimary"
13+
aria-hidden="true" class="w-4 h-4 text-lightButtonsText animate-spin dark:text-darkButtonsText fill-lightButtonsBackground dark:fill-darkPrimary"
1414
viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg>
1515
<slot></slot>
1616
</button>

‎dev-demo/index.ts

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,9 @@ export const admin = new AdminForth({
153153
styles:{
154154
colors: {
155155
light: {
156-
Html: "#d0f5f4",
156+
Html: "alias:lightPrimary opacity:0.6",
157157

158-
primary: '#00acb5',
158+
primary: '#ccb193',
159159

160160
Navbar: "alias:lightPrimary lighten",
161161
NavbarBorder: "alias:lightPrimary",
@@ -179,8 +179,8 @@ export const admin = new AdminForth({
179179
SidebarHeading: "alias:lightSidebarText opacity:0.3",
180180

181181
List: "#FFFFFF",
182-
ListTable: "#b0f5f3",
183-
ListTableHeading: "#2fe0c9",
182+
ListTable: "#alias:lightPrimary lighten",
183+
ListTableHeading: "alias:lightPrimary darken",
184184
ListTableHeadingText: "alias:lightListTableHeading inverse",
185185
ListTableText: "alias:lightListTableHeadingText opacity:0.8",
186186
ListTableRowHover: "alias:lightListTable lighten",
@@ -207,18 +207,15 @@ export const admin = new AdminForth({
207207
ShowTableBodyText: "alias:lightShowTablesBodyBackground inverse",
208208
ShowTableBodyBorder: "alias:lightShowTableHeadingBackground darken",
209209

210-
Buttons: "#FFFFFF",
211-
ButtonsBorder: "#DDDDDD",
212-
ButtonsText: "#111827",
213-
ButtonsHover: "#f3f4f6",
214-
ButtonsBorderHover: "#f3f4f6",
215-
ButtonsActive: "#f3f4f6",
216-
ButtonsDisabled: "#f3f4f6",
217-
ButtonsDisabledText: "#f3f4f6",
218-
ButtonsIcon: "#333333",
219-
210+
ButtonsBackground: "alias:lightPrimary",
211+
ButtonsBorder: "alias:lightPrimary darken",
212+
ButtonsText: "alias:lightPrimaryContrast",
213+
ButtonsHover: "alias:lightPrimary opacity:0.8",
214+
ButtonsBorderHover: "alias:lightPrimary",
215+
ButtonFocusRing: "alias:lightPrimary opacity:0.6",
216+
220217
DropdownButtonsBackground: "alias:lightForm lighten",
221-
DropownButtonsBorder: "alias:lightForm darken",
218+
DropdownButtonsBorder: "alias:lightForm darken",
222219
DropdownButtonsText: "alias:lightFormFieldTextColor",
223220
DropdownButtonsPlaceholderText: "alias:lightFormFieldTextColor opacity:0.6",
224221

@@ -234,7 +231,7 @@ export const admin = new AdminForth({
234231
DropdownMultipleSelectIconFocus: "alias:lightPrimary darken",
235232
DropdownMultipleSelectIconFocusBackground: "alias:lightPrimary opacity:0.1",
236233

237-
CheckboxBgUnchecked: "alias:lightPrimaryContrast lighten",
234+
CheckboxBgUnchecked: "alias:lightPrimary opacity:0.2",
238235
CheckboxBgChecked: "alias:lightPrimary",
239236
CheckboxIconColor: "alias:lightPrimaryContrast lighten",
240237
CheckboxBorderColor: "alias:lightPrimary darken",
@@ -249,14 +246,6 @@ export const admin = new AdminForth({
249246
ToggleBorderUnactive: "alias:lightPrimary lighten",
250247
ToggleBorderActive: "alias:lightPrimary darken",
251248

252-
ColumnValueInputBackground: "alias:lightForm lighten",
253-
ColumnValueInputPlaceholderText: "alias:lightFormFieldTextColor opacity:0.6",
254-
ColumnValueInputText: "alias:lightFormFieldTextColor",
255-
ColumnValueInputBorder: "alias:lightForm darken",
256-
ColumnValueInputIcons: "alias:lightPrimary",
257-
ColumnValueInputFocusRing: "alias:lightPrimary",
258-
ColumnValueInputFocusBorder: "alias:lightPrimary",
259-
260249
InputBackground: "alias:lightForm lighten",
261250
InputPlaceholderText: "alias:lightFormFieldTextColor opacity:0.6",
262251
InputText: "alias:lightFormFieldTextColor",
@@ -337,7 +326,7 @@ export const admin = new AdminForth({
337326
AcceptModalCancelButtonFocus: "#F3F4F6",
338327
AcceptModalCancelButtonBorder: "#E5E7EB",
339328

340-
BreadcrumbsHomepageText: "alias:lightPrimary",
329+
BreadcrumbsHomepageText: "alias:lightPrimary inverse",
341330
BreadcrumbsHomepageTextHover: "alias:lightBreadcrumbsHomepageText darken",
342331
BreadcrumbsArrowIcon: "alias:lightBreadcrumbsHomepageText opacity:0.6",
343332
BreadcrumbsText: "alias:lightBreadcrumbsHomepageText lighten",
@@ -383,11 +372,11 @@ export const admin = new AdminForth({
383372
FiltersClearAllButtonTextHover: "alias:lightFiltersClearAllButtonText darken",
384373
FiltersClearAllButtonFocus: "alias:lightFiltersClearAllButtonBackground opacity:0.6",
385374

386-
ThreeDotsMenuIconBackground: "alias:lightPrimary lighten",
387-
ThreeDotsMenuIconBackgroundHover: "alias:lightPrimary opacity:0.5",
375+
ThreeDotsMenuIconBackground: "alias:lightPrimary",
376+
ThreeDotsMenuIconBackgroundHover: "alias:lightThreeDotsMenuIconBackground lighten",
388377
ThreeDotsMenuIconBackgroundBorder: "alias:lightPrimary darken",
389378
ThreeDotsMenuIconDots: "alias:lightThreeDotsMenuIconBackground inverse",
390-
ThreeDotsMenuIconDotsHover: "alias:lightThreeDotsMenuIconDots opacity:0.3",
379+
ThreeDotsMenuIconDotsHover: "alias:lightThreeDotsMenuIconDots opacity:0.9",
391380
ThreeDotsMenuIconFocus: "alias:lightThreeDotsMenuIconBackground opacity:0.2",
392381
ThreeDotsMenuBodyBackground: "alias:lightThreeDotsMenuIconBackground",
393382
ThreeDotsMenuBodyBackgroundHover: "alias:lightThreeDotsMenuBodyBackground darken",
@@ -474,7 +463,7 @@ export const admin = new AdminForth({
474463
ListTable: "#753767",
475464
ListTableHeading: "#db0dbc",
476465
ListTableHeadingText: "alias:darkListTableHeading inverse",
477-
ListTableText: "alias:darkListTableHeadingText",
466+
ListTableText: "#222222",
478467
ListTableRowHover: "alias:darkListTableHeading opacity:0.6",
479468
ListBorder: "#444444",
480469
ListTablePaginationBackgoround: "alias:darkListTable",
@@ -499,8 +488,15 @@ export const admin = new AdminForth({
499488
ShowTableBodyText: "alias:darkShowTablesBodyBackground inverse",
500489
ShowTableBodyBorder: "alias:darkShowTableHeadingBackground darken",
501490

491+
ButtonsBackground: "alias:darkPrimary",
492+
ButtonsBorder: "alias:darkPrimary",
493+
ButtonsText: "alias:darkPrimaryContrast",
494+
ButtonsHover: "alias:darkPrimary lighten",
495+
ButtonsBorderHover: "alias:darkPrimary",
496+
ButtonFocusRing: "alias:darkPrimary opacity:0.6",
497+
502498
DropdownButtonsBackground: "alias:darkForm darken",
503-
DropownButtonsBorder: "alias:darkForm lighten",
499+
DropdownButtonsBorder: "alias:darkForm lighten",
504500
DropdownButtonsText: "alias:darkListTableText",
505501
DropdownButtonsPlaceholderText: "alias:darkListTableText opacity:0.6",
506502

@@ -531,14 +527,6 @@ export const admin = new AdminForth({
531527
ToggleBorderUnactive: "alias:darkPrimary lighten",
532528
ToggleBorderActive: "alias:darkPrimary darken",
533529

534-
ColumnValueInputBackground: "alias:darkForm darken",
535-
ColumnValueInputPlaceholderText: "alias:darkFormFieldTextColor opacity:0.6",
536-
ColumnValueInputText: "alias:darkFormFieldTextColor",
537-
ColumnValueInputBorder: "alias:darkForm darken",
538-
ColumnValueInputIcons: "alias:darkPrimary",
539-
ColumnValueInputFocusRing: "alias:darkPrimary",
540-
ColumnValueInputFocusBorder: "alias:darkPrimary",
541-
542530
InputBackground: "alias:darkForm darken",
543531
InputPlaceholderText: "alias:darkFormFieldTextColor opacity:0.6",
544532
InputText: "alias:darkFormFieldTextColor",

0 commit comments

Comments
 (0)