diff --git a/.prettierignore b/.prettierignore index a48cf0d..dd99542 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,2 @@ public +web/app/themes/*/resources/views/block-patterns diff --git a/web/app/themes/sage/resources/styles/blocks/table/shared.css b/web/app/themes/sage/resources/styles/blocks/table/shared.css index fbc0ec0..c2aabc3 100644 --- a/web/app/themes/sage/resources/styles/blocks/table/shared.css +++ b/web/app/themes/sage/resources/styles/blocks/table/shared.css @@ -1,30 +1,30 @@ :root { - --wp-block-table-block-spacing: 1.5rem; - --wp-block-table-border-color: var( --color-primary ); - --wp-block-table-cell-min-width: 100px; - --wp-block-table-cell-padding-x: 1.25em; - --wp-block-table-cell-padding-y: 0.75em; - --wp-block-table-font-size: var( --text-sm ); - --wp-block-table-radius: var( --radius-theme ); - --wp-block-table-stripes-bg-color: var( --color-primary-100 ); - --wp-block-table-tfoot-font-weight: 700; - --wp-block-table-thead-bg-color: var( --color-primary ); - --wp-block-table-thead-color: var( --color-white ); - --wp-block-table-thead-font-weight: 700; + --table-block-spacing: 1.5rem; + --table-border-color: var( --color-primary ); + --table-cell-min-width: 100px; + --table-cell-padding-x: 1.25em; + --table-cell-padding-y: 0.75em; + --table-font-size: var( --text-sm ); + --table-radius: var( --radius-theme ); + --table-stripes-bg-color: var( --color-primary-100 ); + --table-tfoot-font-weight: 700; + --table-thead-bg-color: var( --color-primary ); + --table-thead-color: var( --color-white ); + --table-thead-font-weight: 700; @variant md { - --wp-block-table-block-spacing: 2rem; + --table-block-spacing: 2rem; } } .wp-block-table { - @apply w-full rounded-t-(--wp-block-table-radius) text-left text-(length:--wp-block-table-font-size) not-first:mt-(--wp-block-table-block-spacing) not-first:mb-(--wp-block-table-block-spacing); + @apply w-full rounded-t-(--table-radius) text-left text-(length:--table-font-size) not-first:mt-(--table-block-spacing) not-first:mb-(--table-block-spacing); &:not( .has-fixed-layout ) { @apply overflow-x-auto; :is( td, th ) { - @apply min-w-(--wp-block-table-cell-min-width); + @apply min-w-(--table-cell-min-width); } } @@ -33,7 +33,7 @@ } thead { - @apply overflow-hidden border-none bg-(--wp-block-table-thead-bg-color) font-(weight:--wp-block-table-thead-font-weight) text-(--wp-block-table-thead-color); + @apply overflow-hidden border-none bg-(--table-thead-bg-color) font-(--table-thead-font-weight) text-(--table-thead-color); } tfoot { @@ -41,7 +41,7 @@ } tr { - @apply border-t border-(--wp-block-table-border-color); + @apply border-t border-(--table-border-color); :is( tbody, thead ) & { @apply first:border-none; @@ -49,7 +49,7 @@ } :is( td, th ) { - @apply border-none px-(--wp-block-table-cell-padding-x) py-(--wp-block-table-cell-padding-y) align-top; + @apply border-none px-(--table-cell-padding-x) py-(--table-cell-padding-y) align-top; } } @@ -57,6 +57,6 @@ @apply border-none; tbody tr:nth-child( odd ) { - @apply bg-(--wp-block-table-stripes-bg-color); + @apply bg-(--table-stripes-bg-color); } } diff --git a/web/app/themes/sage/resources/styles/blocks/tabs/shared.css b/web/app/themes/sage/resources/styles/blocks/tabs/shared.css index 8b97610..86f66c7 100644 --- a/web/app/themes/sage/resources/styles/blocks/tabs/shared.css +++ b/web/app/themes/sage/resources/styles/blocks/tabs/shared.css @@ -22,6 +22,10 @@ --tabs-button-icon-bg-color-hover: var( --color-primary-400 ); --tabs-button-icon-bg-color-selected: var( --color-primary ); --tabs-button-icon-bg-color: var( --color-primary-400 ); + --tabs-button-icon-border-color-hover: var( --color-primary ); + --tabs-button-icon-border-color-selected: var( --color-primary ); + --tabs-button-icon-border-color: var( --color-primary ); + --tabs-button-icon-border-width: 0px; --tabs-button-icon-color-hover: var( --color-white ); --tabs-button-icon-color-selected: var( --color-white ); --tabs-button-icon-color: var( --color-white ); @@ -80,6 +84,9 @@ --tabs-button-icon-bg-color: var( --tabs-button-icon-bg-color-selected ); + --tabs-button-icon-border-color: var( + --tabs-button-icon-border-color-selected + ); --tabs-button-icon-color: var( --tabs-button-icon-color-selected ); } @@ -89,6 +96,9 @@ --tabs-button-icon-bg-color: var( --tabs-button-icon-bg-color-hover ); + --tabs-button-icon-border-color: var( + --tabs-button-icon-border-color-hover + ); --tabs-button-icon-color: var( --tabs-button-icon-color-hover ); } } @@ -98,7 +108,7 @@ @apply relative flex w-full items-center gap-(--tabs-button-gap) rounded-(--tabs-radius) bg-(--tabs-button-bg-color) p-(--tabs-button-padding) text-left leading-(--tabs-button-leading) text-(--tabs-button-color) transition-colors duration-300; &::before { - @apply fontawesome left-(--tabs-button-padding-x) flex size-(--tabs-button-icon-size) shrink-0 items-center justify-center rounded-(--tabs-radius) bg-(--tabs-button-icon-bg-color) text-(--tabs-button-icon-color) transition-all duration-300; + @apply fontawesome left-(--tabs-button-padding-x) flex size-(--tabs-button-icon-size) shrink-0 items-center justify-center rounded-(--tabs-radius) border-(length:--tabs-button-icon-border-width) border-(--tabs-button-icon-border-color) bg-(--tabs-button-icon-bg-color) text-(--tabs-button-icon-color) transition-all duration-300; --fa-icon: var( --tabs-button-icon ); } diff --git a/web/app/themes/sage/resources/styles/components/cards.css b/web/app/themes/sage/resources/styles/components/cards.css index a34ef3d..d40914f 100644 --- a/web/app/themes/sage/resources/styles/components/cards.css +++ b/web/app/themes/sage/resources/styles/components/cards.css @@ -1,9 +1,9 @@ :root { --card-bg-color: var( --color-white ); - --card-radius: var( --rounded-theme ); + --card-radius: var( --radius-theme ); --card-label-bg-color: var( --color-primary-100 ); --card-label-border-color: var( --card-label-bg-color ); - --card-label-radius: var( --rounded-theme ); + --card-label-radius: var( --radius-theme ); --card-label-border-width: 1px; --card-label-color: var( --color-black ); --card-label-font-size: var( --text-sm );