@skyux/theme 12.5.0 → 12.7.0

package/css/sky.css

@@ -703,6 +703,25 @@ a.sky-btn:hover {
   transition: color 150ms;
 }
 
+.sky-btn-block {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+.sky-btn-block:has(.sky-btn-block-logo) {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+.sky-btn-block .sky-btn-block-logo {
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
 .sky-container {
   margin: 0 auto;
   padding: 0 15px;
@@ -1878,13 +1897,13 @@ mark.sky-highlight-mark {
   outline: none;
 }
 
-symbol[id^=sky-i-] * {
+symbol[id^=sky-i-]:not(.sky-i-branded) * {
   fill: currentColor;
 }
-symbol[id^=sky-i-] *.sky-i-path-1 {
+symbol[id^=sky-i-]:not(.sky-i-branded) *.sky-i-path-1 {
   fill: var(--sky-icon-svg-color-input, currentColor);
 }
-symbol[id^=sky-i-] *.sky-i-path-2 {
+symbol[id^=sky-i-]:not(.sky-i-branded) *.sky-i-path-2 {
   fill: var(--sky-icon-svg-path-2-color-input, #fff);
 }
 

package/css/themes/modern/styles.css

@@ -737,10 +737,10 @@
   --modern-font-size-150: 14px;
   --modern-font-size-125: 13px;
   --modern-font-size-100: 12px;
-  --modern-size-960: 960px;
-  --modern-size-640: 640px;
+  --modern-size-900: 900px;
+  --modern-size-600: 600px;
   --modern-size-400: 400px;
-  --modern-size-320: 320px;
+  --modern-size-300: 300px;
   --modern-size-296: 296px;
   --modern-size-276: 276px;
   --modern-size-236: 236px;
@@ -990,9 +990,9 @@
   --sky-size-avatar-s: var(--modern-size-32);
   --sky-size-thumbnail-l: var(--modern-size-100);
   --sky-size-max_width-overlay_message: var(--modern-size-236);
-  --sky-size-width-modal-l: var(--modern-size-960);
-  --sky-size-width-modal-m: var(--modern-size-640);
-  --sky-size-width-modal-s: var(--modern-size-320);
+  --sky-size-width-modal-l: var(--modern-size-900);
+  --sky-size-width-modal-m: var(--modern-size-600);
+  --sky-size-width-modal-s: var(--modern-size-300);
   --sky-size-width-viewport-smallest: var(--modern-size-296);
   --sky-size-width-resize_handle: var(--modern-size-14);
   --sky-size-illustration-xl: var(--modern-size-96);
@@ -1879,6 +1879,21 @@
   font-size: 12px;
   line-height: 1.5;
 }
+.sky-theme-modern .sky-btn-block {
+  font-size: var(--sky-font-size-body-l);
+  line-height: var(--sky-font-line_height-body-l);
+}
+.sky-theme-modern .sky-btn-block:has(.sky-btn-block-logo) {
+  --sky-btn-block-logo-padding-sides: calc(
+    var(--sky-size-icon-m) +
+      calc(var(--sky-space-inset-pillarbox-1_2-left-m) * 2)
+  );
+  padding-left: var(--sky-btn-block-logo-padding-sides);
+  padding-right: var(--sky-btn-block-logo-padding-sides);
+}
+.sky-theme-modern .sky-btn-block .sky-btn-block-logo {
+  left: var(--sky-space-inset-pillarbox-1_2-left-m);
+}
 .sky-theme-modern .sky-btn-tab {
   background-color: var(--sky-color-background-nav-base);
   border: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/theme",
-  "version": "12.5.0",
+  "version": "12.7.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -20,7 +20,7 @@
     "@angular/core": "^19.2.7"
   },
   "dependencies": {
-    "@blackbaud/skyux-design-tokens": "0.0.50",
+    "@blackbaud/skyux-design-tokens": "0.0.51",
     "@skyux/icons": "7.21.2",
     "fontfaceobserver": "2.3.0",
     "tslib": "^2.8.1"