@skyux/theme 15.0.0-alpha.9 → 15.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/css/sky.css +66 -4
  2. package/css/themes/modern/styles.css +650 -476
  3. package/package.json +2 -2
  4. package/scss/_compat/_mixins.scss +5 -0
package/css/sky.css CHANGED
@@ -357,6 +357,7 @@ template {
357
357
  --sky-theme-font-style-hint-m-weight: 400;
358
358
  --sky-theme-font-style-hint-s-style: italic;
359
359
  --sky-theme-font-style-hint-s-weight: 400;
360
+ --sky-theme-font-text_decoration-action-on_status: var(--sky-font-text_decoration-action-tertiary-on_status-base);
360
361
  --sky-theme-font-letter_spacing-hint-s: var(--sky-font-letter_spacing-hint-s);
361
362
  --sky-theme-font-line_height-body-deemphasized-m: var(--sky-font-line_height-body-m);
362
363
  --sky-theme-font-line_height-body-deemphasized-s: var(--sky-font-line_height-body-s);
@@ -458,6 +459,7 @@ template {
458
459
  --sky-theme-color-background-icon_matte-success: var(--sky-color-background-icon_matte-success);
459
460
  --sky-theme-color-background-icon_matte-warning: var(--sky-color-background-icon_matte-warning);
460
461
  --sky-theme-color-background-page: var(--sky-color-background-page);
462
+ --sky-theme-color-border-action-on_status-focus: var(--sky-color-border-action-on_status-focus);
461
463
  --sky-theme-color-border-container-default: var(--sky-color-border-container-base);
462
464
  --sky-theme-color-border-container-header-prominent: var(--sky-color-border-container-header-prominent);
463
465
  --sky-theme-color-border-danger: var(--sky-color-border-danger);
@@ -490,9 +492,11 @@ template {
490
492
  --sky-theme-color-icon-on_prominent-base: var(--sky-color-icon-on_prominent-base);
491
493
  --sky-theme-color-icon-on_prominent-disabled: var(--sky-color-icon-on_prominent-disabled);
492
494
  --sky-theme-color-icon-on_status: var(--sky-color-icon-on_status);
495
+ --sky-theme-color-icon-on_status_bg: var(--sky-color-icon-on_status_bg);
493
496
  --sky-theme-color-icon-success: var(--sky-color-icon-success);
494
497
  --sky-theme-color-text-action: var(--sky-color-text-action);
495
498
  --sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
499
+ --sky-theme-color-text-action_on_status: var(--sky-color-text-action_on_status);
496
500
  --sky-theme-color-text-deemphasized: var(--sky-color-text-deemphasized);
497
501
  --sky-theme-color-text-default: var(--sky-color-text-default);
498
502
  --sky-theme-color-text-heading: var(--sky-color-text-heading);
@@ -545,6 +549,7 @@ template {
545
549
  .sky-theme-modern.sky-theme-brand-base {
546
550
  --sky-theme-border-container-default: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-container-base);
547
551
  --sky-theme-border-container-header-prominent: var(--sky-border-width-emphasized) var(--sky-border-style-divider) var(--sky-color-border-container-header-prominent);
552
+ --sky-theme-border-container-overlay: var(--sky-border-width-container-base) var(--sky-border-style-container-overlay) var(--sky-color-border-container-base);
548
553
  --sky-theme-border-danger: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-danger);
549
554
  --sky-theme-border-divider-default: var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider);
550
555
  --sky-theme-border-divider-soft: var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row);
@@ -557,6 +562,7 @@ template {
557
562
  --sky-theme-border-radius-s: var(--sky-border-radius-s);
558
563
  --sky-theme-border-radius-xs: var(--sky-border-radius-xs);
559
564
  --sky-theme-border-style-accent: var(--sky-border-style-accent);
565
+ --sky-theme-border-style-container-overlay: var(--sky-border-style-container-overlay);
560
566
  --sky-theme-border-style-divider-default: var(--sky-border-style-divider);
561
567
  --sky-theme-border-style-divider-soft: var(--sky-border-style-separator-row);
562
568
  --sky-theme-border-width-accent: var(--sky-border-width-accent);
@@ -652,6 +658,7 @@ template {
652
658
  --sky-theme-font-style-hint-s-style: italic;
653
659
  --sky-theme-font-style-hint-s-weight: 400;
654
660
  --sky-theme-font-style-strong: 700;
661
+ --sky-theme-font-text_decoration-action-on_status: underline;
655
662
  --sky-theme-font-weight-body-deemphasized-m: 400;
656
663
  --sky-theme-font-weight-body-deemphasized-s: 400;
657
664
  --sky-theme-font-weight-body-emphasized-m: 600;
@@ -695,6 +702,7 @@ template {
695
702
  --sky-theme-color-background-icon_matte-success: #b7da9b;
696
703
  --sky-theme-color-background-icon_matte-warning: #ffd597;
697
704
  --sky-theme-color-background-page: #ffffff;
705
+ --sky-theme-color-border-action-on_status-focus: #212327;
698
706
  --sky-theme-color-border-container-default: #cdcfd2;
699
707
  --sky-theme-color-border-container-header-prominent: #7289af;
700
708
  --sky-theme-color-border-danger: #ef4044;
@@ -727,9 +735,11 @@ template {
727
735
  --sky-theme-color-icon-on_prominent-base: #ffffff;
728
736
  --sky-theme-color-icon-on_prominent-disabled: #686c73;
729
737
  --sky-theme-color-icon-on_status: #ffffff;
738
+ --sky-theme-color-icon-on_status_bg: #212327;
730
739
  --sky-theme-color-icon-success: #72bf44;
731
740
  --sky-theme-color-text-action: #0974a1;
732
741
  --sky-theme-color-text-action_contrast: #0974a1;
742
+ --sky-theme-color-text-action_on_status: #212327;
733
743
  --sky-theme-color-text-deemphasized: #686c73;
734
744
  --sky-theme-color-text-default: #212327;
735
745
  --sky-theme-color-text-heading: #212327;
@@ -782,6 +792,7 @@ template {
782
792
  :root {
783
793
  --sky-theme-border-container-default: 1px solid #cdcfd2;
784
794
  --sky-theme-border-container-header-prominent: 1px solid #7289AF;
795
+ --sky-theme-border-container-overlay: 1px none #cdcfd2;
785
796
  --sky-theme-border-danger: 1px solid #ef4044;
786
797
  --sky-theme-border-divider-default: 1px solid #cdcfd2;
787
798
  --sky-theme-border-divider-soft: 1px solid #cdcfd2;
@@ -792,6 +803,7 @@ template {
792
803
  --sky-theme-border-radius-s: 4px;
793
804
  --sky-theme-border-radius-xs: 4px;
794
805
  --sky-theme-border-style-accent: solid;
806
+ --sky-theme-border-style-container-overlay: none;
795
807
  --sky-theme-border-style-divider-default: solid;
796
808
  --sky-theme-border-style-divider-soft: solid;
797
809
  --sky-theme-border-success: 1px solid #72bf44;
@@ -1425,6 +1437,22 @@ em {
1425
1437
  border-bottom: var(--sky-theme-border-container-header-prominent);
1426
1438
  }
1427
1439
 
1440
+ .sky-theme-border-container-overlay-top {
1441
+ border-top: var(--sky-theme-border-container-overlay);
1442
+ }
1443
+
1444
+ .sky-theme-border-container-overlay-right {
1445
+ border-right: var(--sky-theme-border-container-overlay);
1446
+ }
1447
+
1448
+ .sky-theme-border-container-overlay-bottom {
1449
+ border-bottom: var(--sky-theme-border-container-overlay);
1450
+ }
1451
+
1452
+ .sky-theme-border-container-overlay-left {
1453
+ border-left: var(--sky-theme-border-container-overlay);
1454
+ }
1455
+
1428
1456
  .sky-theme-border-divider-default-top {
1429
1457
  border-top: var(--sky-theme-border-divider-default);
1430
1458
  }
@@ -1783,7 +1811,7 @@ button:active {
1783
1811
  }
1784
1812
 
1785
1813
  a.sky-btn:hover {
1786
- text-decoration: none;
1814
+ text-decoration-line: none;
1787
1815
  }
1788
1816
 
1789
1817
  .sky-btn-default {
@@ -1853,6 +1881,10 @@ a.sky-btn:hover {
1853
1881
  text-decoration: underline;
1854
1882
  outline: none;
1855
1883
  }
1884
+ .sky-btn-link:hover.sky-btn-disabled, .sky-btn-link-inline:hover.sky-btn-disabled, .sky-btn-link:hover[disabled], .sky-btn-link-inline:hover[disabled] {
1885
+ color: var(--sky-text-color-action-primary);
1886
+ text-decoration-line: none;
1887
+ }
1856
1888
 
1857
1889
  .sky-btn-link-inline {
1858
1890
  font-size: inherit;
@@ -1988,6 +2020,9 @@ a.sky-btn:hover {
1988
2020
  color: rgb(55.5616438356, 57.698630137, 61.4383561644);
1989
2021
  transition: color var(--sky-global-duration-short);
1990
2022
  }
2023
+ .sky-btn-borderless:hover[disabled], .sky-btn-borderless-inline:hover[disabled], .sky-btn-borderless:hover.sky-btn-disabled, .sky-btn-borderless-inline:hover.sky-btn-disabled {
2024
+ color: #686c73;
2025
+ }
1991
2026
  .sky-btn-borderless, .sky-btn-borderless-inline {
1992
2027
  border: none;
1993
2028
  }
@@ -2015,6 +2050,9 @@ a.sky-btn:hover {
2015
2050
  color: rgb(55.5616438356, 57.698630137, 61.4383561644);
2016
2051
  transition: color var(--sky-global-duration-short);
2017
2052
  }
2053
+ .sky-btn-icon-borderless:hover[disabled], .sky-btn-icon-borderless:hover.sky-btn-disabled {
2054
+ color: #686c73;
2055
+ }
2018
2056
  .sky-btn-icon-borderless {
2019
2057
  height: 26px;
2020
2058
  width: 26px;
@@ -2511,6 +2549,30 @@ body:not(.sky-theme-modern) {
2511
2549
  var(--sky-comp-layout-header-list-space-inset-xs-bottom)
2512
2550
  var(--sky-comp-layout-header-list-space-inset-xs-left)
2513
2551
  );
2552
+ --sky-comp-override-toolbar-space-inset-top: var(
2553
+ --sky-comp-toolbar-space-inset-top
2554
+ );
2555
+ --sky-comp-override-toolbar-space-inset-right: var(
2556
+ --sky-comp-toolbar-space-inset-right
2557
+ );
2558
+ --sky-comp-override-toolbar-space-inset-left: var(
2559
+ --sky-comp-toolbar-space-inset-left
2560
+ );
2561
+ --sky-comp-override-toolbar-section-space-inset-top: var(
2562
+ --sky-comp-toolbar-space-inset-top
2563
+ );
2564
+ --sky-comp-override-toolbar-section-space-inset-right: var(
2565
+ --sky-comp-toolbar-space-inset-right
2566
+ );
2567
+ --sky-comp-override-toolbar-section-space-inset-left: var(
2568
+ --sky-comp-toolbar-space-inset-left
2569
+ );
2570
+ --sky-comp-override-list-summary-space-inset-right: var(
2571
+ --sky-comp-list_summary-space-inset-right
2572
+ );
2573
+ --sky-comp-override-list-summary-space-inset-left: var(
2574
+ --sky-comp-list_summary-space-inset-left
2575
+ );
2514
2576
  }
2515
2577
  .sky-layout-host-tabs {
2516
2578
  --sky-layout-host-content-spacing: 0;
@@ -3269,15 +3331,15 @@ h6 {
3269
3331
 
3270
3332
  a {
3271
3333
  color: var(--sky-text-color-action-primary);
3272
- text-decoration: none;
3334
+ text-decoration-line: none;
3273
3335
  }
3274
3336
  a:hover, a:active {
3275
3337
  color: var(--sky-text-color-action-primary-hover);
3276
- text-decoration: underline;
3338
+ text-decoration-line: underline;
3277
3339
  }
3278
3340
  a.sky-href[href=""], a.sky-href[href=""]:hover, a.sky-href[href=""]:active, a.sky-href:not([href]), a.sky-href:not([href]):hover, a.sky-href:not([href]):active {
3279
3341
  color: inherit !important;
3280
- text-decoration: none !important;
3342
+ text-decoration-line: none !important;
3281
3343
  }
3282
3344
 
3283
3345
  .sky-pull-right {