@skyux/theme 12.14.3 → 12.15.0

package/css/themes/modern/styles.css

@@ -296,6 +296,7 @@
   --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
   --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
   --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
+  --sky-color-border-column_divider: var(--bb-color-blue-600);
   --sky-color-border-container-base: var(--bb-color-gray-100);
   --sky-color-border-danger: var(--bb-color-red-600);
   --sky-color-border-divider: var(--bb-color-gray-100);
@@ -399,6 +400,7 @@
   --sky-border-width-container-base: var(--bb-size-fixed-6);
   --sky-border-width-divider: var(--bb-size-fixed-6);
   --sky-border-width-elevation: var(--bb-size-fixed-6);
+  --sky-border-width-emphasized: var(--bb-size-fixed-12);
   --sky-border-width-input-active: var(--bb-size-fixed-12);
   --sky-border-width-input-base: var(--bb-size-fixed-6);
   --sky-border-width-input-disabled: var(--bb-size-fixed-6);
@@ -921,6 +923,7 @@
   --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
   --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
   --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
+  --sky-color-border-column_divider: var(--modern-color-gray-70);
   --sky-color-border-container-base: var(--modern-color-gray-15);
   --sky-color-border-danger: var(--modern-color-red-50);
   --sky-color-border-divider: var(--modern-color-gray-15);
@@ -1023,6 +1026,7 @@
   --sky-border-width-container-base: var(--modern-size-1);
   --sky-border-width-divider: var(--modern-size-1);
   --sky-border-width-elevation: var(--modern-size-1);
+  --sky-border-width-emphasized: var(--modern-size-1);
   --sky-border-width-input-active: var(--modern-size-2);
   --sky-border-width-input-base: var(--modern-size-1);
   --sky-border-width-input-disabled: var(--modern-size-1);
@@ -1318,7 +1322,7 @@
 
 .sky-theme-modern {
   /* color */
-  --sky-background-color-page-default: #fcfcfc;
+  --sky-background-color-page-default: var(--sky-color-background-page);
   --sky-background-color-neutral-light: #fcfcfc;
   --sky-background-color-primary-dark: #1870B8;
   --sky-background-color-disabled: #ededee;
@@ -1355,18 +1359,6 @@
   --sky-viewkeeper-opacity: 1;
   --sky-viewkeeper-box-shadow: var(--modern-shadow-size-3);
 }
-.sky-theme-modern.sky-theme-mode-dark {
-  /* color */
-  --sky-background-color-page-default: #121212;
-  --sky-background-color-neutral-light: #121212;
-  --sky-background-color-primary-dark: #009cd1;
-  --sky-background-color-disabled: transparent;
-  --sky-border-color-neutral-medium: #686c73;
-  --sky-text-color-default: #fbfcfe;
-  --sky-text-color-deemphasized: #c0c2c5;
-  --sky-text-color-action-primary: #009cd1;
-  --sky-text-color-action-primary-hover: rgb(0, 117.9330143541, 158);
-}
 
 .sky-theme-modern .sky-box {
   background-color: var(--sky-color-background-container-base);
@@ -2093,6 +2085,9 @@
   --sky-override-error-label-margin-top: var(--modern-size-5);
 }
 
+.sky-theme-modern .sky-form-control {
+  font-size: var(--sky-font-size-body-m);
+}
 .sky-theme-modern .sky-error-label {
   margin-top: var(--sky-override-error-label-margin-top, var(--sky-space-inset-input_label-top-m));
   color: var(--sky-text-color-default);
@@ -2125,6 +2120,7 @@
   --sky-override-switch-background-color-success: rgb(209.802919708, 231.7737226277, 192.2262773723);
   --sky-override-switch-background-color-warning: rgb(255, 233.5961538462, 202);
   --sky-override-switch-border-color: var(--modern-color-blue-74);
+  --sky-override-switch-border-color-checked: var(--sky-color-border-selected);
   --sky-override-switch-box-shadow-focus-elevation: var(--sky-elevation-focus);
   --sky-override-switch-checked-color: var(--sky-color-icon-action);
   --sky-override-switch-icon-checked-color-no-group: var(
@@ -2161,12 +2157,12 @@
 }
 .sky-theme-modern .sky-switch .sky-switch-input.sky-switch-invalid + .sky-switch-control {
   border-width: var(--sky-border-width-input-error);
-  border-color: var(--sky-color-border-input-error);
+  border-color: var(--sky-color-border-switch-error);
 }
 .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control {
   background-color: var(--sky-color-background-selected-heavy);
   border-width: var(--sky-border-width-selected-s);
-  border-color: var(--sky-color-border-selected);
+  border-color: var(--sky-override-switch-border-color-checked, var(--sky-color-border-switch-selected-base));
 }
 .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon), .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control:not(.sky-switch-control-icon) {
   color: var(--sky-override-switch-checked-color, var(--sky-color-icon-inverse));
@@ -2190,35 +2186,47 @@
 .sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled) + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled) + .sky-switch-control.sky-switch-control-danger {
   background-color: var(--sky-override-switch-background-color-danger, var(--sky-color-background-selected-danger));
 }
+.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled):active + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled):active + .sky-switch-control {
+  border-color: var(--sky-color-border-switch-selected-active);
+}
+.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled):focus-visible:not(:active) + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled):focus-visible:not(:active) + .sky-switch-control {
+  border-color: var(--sky-color-border-switch-selected-focus);
+}
+.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled):hover + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled):hover + .sky-switch-control {
+  border-color: var(--sky-color-border-switch-selected-hover);
+}
+.sky-theme-modern .sky-switch .sky-switch-input:checked:not(:disabled):disabled + .sky-switch-control, .sky-theme-modern .sky-switch .sky-switch-input[type=checkbox]:indeterminate:not(:disabled):disabled + .sky-switch-control {
+  border-color: var(--sky-color-border-switch-selected-disabled);
+}
 .sky-theme-modern .sky-switch .sky-switch-input:disabled + .sky-switch-control {
   background-color: var(--sky-color-background-input-disabled);
   border-width: var(--sky-border-width-input-disabled);
-  border-color: var(--sky-color-border-input-disabled);
+  border-color: var(--sky-color-border-switch-disabled);
   color: var(--sky-color-text-deemphasized);
 }
 .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):hover + .sky-switch-control {
   border-width: var(--sky-border-width-input-hover);
-  border-color: var(--sky-color-border-input-hover);
+  border-color: var(--sky-color-border-switch-hover);
 }
 .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):active + .sky-switch-control {
   border-width: var(--sky-border-width-input-active);
-  border-color: var(--sky-color-border-input-active);
+  border-color: var(--sky-color-border-switch-active);
 }
 .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible + .sky-switch-control {
   border-width: var(--sky-border-width-input-focus);
-  border-color: var(--sky-color-border-input-focus);
+  border-color: var(--sky-color-border-switch-focus);
 }
 .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):focus-visible:not(:active) + .sky-switch-control {
   box-shadow: var(--sky-override-switch-box-shadow-focus-elevation, none);
   outline: none;
 }
-.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible):checked + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible)[type=checkbox]:indeterminate + .sky-switch-control.sky-switch-control-success {
+.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover):not(:active):not(:focus-visible):checked + .sky-switch-control.sky-switch-control-success, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover):not(:active):not(:focus-visible)[type=checkbox]:indeterminate + .sky-switch-control.sky-switch-control-success {
   border-color: var(--sky-override-switch-border-color, var(--sky-color-border-success));
 }
-.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible):checked + .sky-switch-control.sky-switch-control-warning, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible)[type=checkbox]:indeterminate + .sky-switch-control.sky-switch-control-warning {
+.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover):not(:active):not(:focus-visible):checked + .sky-switch-control.sky-switch-control-warning, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover):not(:active):not(:focus-visible)[type=checkbox]:indeterminate + .sky-switch-control.sky-switch-control-warning {
   border-color: var(--sky-override-switch-border-color, var(--sky-color-border-warning));
 }
-.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible):checked + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):enabled:not(:hover):not(:active):not(:focus-visible)[type=checkbox]:indeterminate + .sky-switch-control.sky-switch-control-danger {
+.sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover):not(:active):not(:focus-visible):checked + .sky-switch-control.sky-switch-control-danger, .sky-theme-modern .sky-switch .sky-switch-input:not(:disabled):not(:hover):not(:active):not(:focus-visible)[type=checkbox]:indeterminate + .sky-switch-control.sky-switch-control-danger {
   border-color: var(--sky-override-switch-border-color, var(--sky-color-border-danger));
 }
 .sky-theme-modern .sky-switch .sky-switch-control {
@@ -2229,7 +2237,7 @@
   margin: 0 var(--sky-space-gap-label-s) auto auto;
   display: inline-flex;
   position: relative;
-  border: var(--sky-border-width-input-base) solid var(--sky-color-border-input-base);
+  border: var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base);
   background-color: var(--sky-override-switch-background-color, var(--sky-color-background-input-base));
   color: var(--sky-color-icon-default);
   text-align: center;
@@ -2439,14 +2447,14 @@ html:has(.sky-theme-brand-base) {
 .sky-theme-modern .sky-font-data-label {
   color: var(--sky-color-text-deemphasized);
   font-family: var(--sky-font-family-primary);
-  font-size: var(--sky-font-size-data_label);
-  font-weight: var(--sky-font-weight-data_label);
+  font-size: var(--sky-font-size-body-m);
+  font-weight: var(--sky-font-weight-body-m);
 }
 .sky-theme-modern .sky-font-field-label {
   color: var(--sky-color-text-deemphasized);
   font-family: var(--sky-font-family-primary);
-  font-size: var(--sky-font-size-data_label);
-  font-weight: var(--sky-font-weight-data_label);
+  font-size: var(--sky-font-size-body-m);
+  font-weight: var(--sky-font-weight-body-m);
 }
 .sky-theme-modern .sky-font-deemphasized {
   color: var(--sky-color-text-deemphasized);
@@ -2513,10 +2521,10 @@ html:has(.sky-theme-brand-base) {
   line-height: var(--sky-font-line_height-body-l);
 }
 .sky-theme-modern.sky-theme-brand-base .sky-font-data-label {
-  line-height: var(--sky-font-line_height-data_label);
+  line-height: var(--sky-font-line_height-body-m);
 }
 .sky-theme-modern.sky-theme-brand-base .sky-font-field-label {
-  line-height: var(--sky-font-line_height-data_label);
+  line-height: var(--sky-font-line_height-body-m);
 }
 .sky-theme-modern.sky-theme-brand-base .sky-font-display-1 {
   line-height: var(--sky-font-line_height-display-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/theme",
-  "version": "12.14.3",
+  "version": "12.15.0",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -20,7 +20,7 @@
     "@angular/core": "^19.2.7"
   },
   "dependencies": {
-    "@blackbaud/skyux-design-tokens": "0.0.55",
+    "@blackbaud/skyux-design-tokens": "0.0.56",
     "@skyux/icons": "8.0.0",
     "fontfaceobserver": "2.3.0",
     "tslib": "^2.8.1"