@utahdts/utah-design-system 0.10.3 → 1.0.1

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 (20) hide show
  1. package/README.md +2 -2
  2. package/css/1-settings/_settings-index.scss +39 -38
  3. package/css/6-components/base-components/containers/_action-card.scss +4 -1
  4. package/css/6-components/base-components/forms/_checkbox.scss +1 -0
  5. package/css/6-components/base-components/forms/_switch.scss +1 -1
  6. package/css/6-components/base-components/text/_pre-code.scss +6 -10
  7. package/css/6-components/project-components/_swatch-list.scss +12 -0
  8. package/dist/style.css +103 -109
  9. package/dist/utah-design-system.es.js +51 -60
  10. package/dist/utah-design-system.umd.js +51 -60
  11. package/index.js +0 -2
  12. package/package.json +9 -9
  13. package/react/components/forms/TextInput.jsx +20 -4
  14. package/react/components/icons/Icons.jsx +5 -2
  15. package/react/hooks/useRememberCursorPosition.js +32 -0
  16. package/react/hooks/useStateEffect.js +1 -0
  17. package/react/hooks/useCurrentMenuItem.js +0 -27
  18. package/react/hooks/usePrepMenuItems.js +0 -24
  19. package/react/util/menuItems/calculateMenuItemsParents.js +0 -54
  20. package/react/util/menuItems/findMenuItemInMenusByPathname.js +0 -29
package/README.md CHANGED
@@ -17,9 +17,10 @@ Please see the [documentation site](https://designsystem.utah.gov/) for all info
17
17
  [![See it on NPM!](https://img.shields.io/npm/v/@utahdts/utah-design-system.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@utahdts/utah-design-system)
18
18
  [![License](https://img.shields.io/npm/l/@utahdts/utah-design-system.svg?color=blue&style=for-the-badge)](https://github.com/utahdts/utah-design-system/raw/dev/LICENSE)
19
19
  [![issues](https://img.shields.io/github/issues-raw/utahdts/utah-design-system?style=for-the-badge)](https://github.com/utahdts/utah-design-system/issues)
20
+ [![ARB Approved](https://img.shields.io/badge/Utah_ARB_Approved-126DC4?style=for-the-badge)](https://dts.utah.gov/standards/architecture-review-board)
20
21
 
21
22
  ```bash
22
- $ npm i @utahdts/utah-design-system
23
+ npm i @utahdts/utah-design-system
23
24
  ```
24
25
 
25
26
  ### Using the React components
@@ -31,7 +32,6 @@ import { DocumentationTemplate, LandingTemplate } from '@utahdts/utah-design-sys
31
32
  // uncompiled style
32
33
  import { OnThisPage } from '@utahdts/utah-design-systemOnThisPage';
33
34
  import { VerticalMenu } from '@utahdts/utah-design-system';
34
- import { useCurrentMenuItem } from '@utahdts/utah-design-system';
35
35
 
36
36
  //import all scss
37
37
  import '@utahdts/utah-design-system/css/index.scss';
package/css/1-settings/_settings-index.scss CHANGED
@@ -20,8 +20,8 @@ variables and settings
20
20
  /* color */
21
21
  /* ######## Pick these colors to match your desired style ######## */
22
22
  --primary-color: #{color-swatches.$red-rock-05};
23
- --primary-color-dark: #{color-swatches.$red-rock-01};;
24
- --primary-color-light: #{color-swatches.$red-rock-17};;
23
+ --primary-color-dark: #{color-swatches.$red-rock-01};
24
+ --primary-color-light: #{color-swatches.$red-rock-17};
25
25
  --gray-on-primary-color: #474747;
26
26
 
27
27
  --secondary-color: #{color-swatches.$celadon-blue-05};
@@ -106,51 +106,52 @@ variables and settings
106
106
  --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
107
107
  --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);
108
108
 
109
- }
110
109
 
111
- /* color utility classes */
112
- .primary-color-background { background-color: var(--primary-color); }
113
- .primary-color-dark-background { background-color: var(--primary-color-dark); }
114
- .primary-color-light-background { background-color: var(--primary-color-light); }
115
- .gray-on-primary-background { background-color: var(--gray-on-primary-color); }
110
+ /* color utility classes */
111
+ .primary-color-background { background-color: var(--primary-color); }
112
+ .primary-color-dark-background { background-color: var(--primary-color-dark); }
113
+ .primary-color-light-background { background-color: var(--primary-color-light); }
114
+ .gray-on-primary-background { background-color: var(--gray-on-primary-color); }
116
115
 
117
- .primary-color { color: var(--primary-color); }
118
- .primary-color-border { border-color: var(--primary-color); }
116
+ .primary-color { color: var(--primary-color); }
117
+ .primary-color-border { border-color: var(--primary-color); }
119
118
 
120
- .secondary-color-background { background-color: var(--secondary-color); }
121
- .secondary-color-dark-background { background-color: var(--secondary-color-dark); }
122
- .secondary-color-light-background { background-color: var(--secondary-color-light); }
123
- .gray-on-secondary-background { background-color: var(--gray-on-secondary-color); }
119
+ .secondary-color-background { background-color: var(--secondary-color); }
120
+ .secondary-color-dark-background { background-color: var(--secondary-color-dark); }
121
+ .secondary-color-light-background { background-color: var(--secondary-color-light); }
122
+ .gray-on-secondary-background { background-color: var(--gray-on-secondary-color); }
124
123
 
125
- .secondary-color { color: var(--secondary-color) }
126
- .secondary-color-border { border-color: var(--secondary-color) }
124
+ .secondary-color { color: var(--secondary-color) }
125
+ .secondary-color-border { border-color: var(--secondary-color) }
127
126
 
128
- .accent-color-background { background-color: var(--accent-color); }
129
- .accent-color-dark-background { background-color: var(--accent-color-dark); }
130
- .accent-color-light-background { background-color: var(--accent-color-light); }
131
- .gray-on-accent-background { background-color: var(--gray-on-accent-color); }
127
+ .accent-color-background { background-color: var(--accent-color); }
128
+ .accent-color-dark-background { background-color: var(--accent-color-dark); }
129
+ .accent-color-light-background { background-color: var(--accent-color-light); }
130
+ .gray-on-accent-background { background-color: var(--gray-on-accent-color); }
132
131
 
133
- .accent-color { color: var(--accent-color) }
134
- .accent-color-border { border-color: var(--accent-color) }
132
+ .accent-color { color: var(--accent-color) }
133
+ .accent-color-border { border-color: var(--accent-color) }
135
134
 
136
- .gray-color-background { background-color: var(--gray-color); }
137
- .gray-color-light-background { background-color: var(--gray-light-color) }
135
+ .gray-color-background { background-color: var(--gray-color); }
136
+ .gray-color-light-background { background-color: var(--gray-light-color) }
138
137
 
139
- .white-color { color: white; }
138
+ .white-color { color: white; }
140
139
 
141
- .background-frosted-dark {
142
- background: rgba(0,0,0,0.6);
143
- backdrop-filter: blur(16px) brightness(1.5);
144
- -webkit-backdrop-filter: blur(16px) brightness(1.5);
145
- }
140
+ .background-frosted-dark {
141
+ background: rgba(0,0,0,0.6);
142
+ backdrop-filter: blur(16px) brightness(1.5);
143
+ -webkit-backdrop-filter: blur(16px) brightness(1.5);
144
+ }
146
145
 
147
- .background-frosted-light {
148
- background: rgba(255,255,255,0.1);
149
- backdrop-filter: blur(16px);
150
- -webkit-backdrop-filter: blur(16px);
151
- }
146
+ .background-frosted-light {
147
+ background: rgba(255,255,255,0.1);
148
+ backdrop-filter: blur(16px);
149
+ -webkit-backdrop-filter: blur(16px);
150
+ }
152
151
 
153
- .backdrop-dark {
154
- background: rgba(0,0,0,0.6);
155
- backdrop-filter: blur(6px) brightness(60%);
152
+ .backdrop-dark {
153
+ background: rgba(0,0,0,0.6);
154
+ backdrop-filter: blur(6px) brightness(60%);
155
+ }
156
156
  }
157
+
package/css/6-components/base-components/containers/_action-card.scss CHANGED
@@ -10,13 +10,16 @@
10
10
  padding: var(--spacing);
11
11
  text-decoration: none;
12
12
  color: var(--gray-color);
13
- transition: all 200ms ease-in-out;
13
+ transition: all 200ms ease-in-out, outline-offset 0ms ease;
14
14
  box-sizing: border-box;
15
15
  &:hover {
16
16
  box-shadow: none;
17
17
  background: var(--gray-color);
18
18
  color: white;
19
19
  }
20
+ &:focus-visible {
21
+ outline-offset: var(--spacing-2xs);
22
+ }
20
23
  &--primary-color {
21
24
  border: 2px solid var(--primary-color);
22
25
  color: var(--primary-color);
package/css/6-components/base-components/forms/_checkbox.scss CHANGED
@@ -11,6 +11,7 @@
11
11
  background-color: white;
12
12
  box-sizing: border-box;
13
13
  appearance: none;
14
+ flex-shrink: 0;
14
15
 
15
16
  &::after {
16
17
  content: '';
package/css/6-components/base-components/forms/_switch.scss CHANGED
@@ -175,7 +175,7 @@
175
175
 
176
176
  .switch-old::after {
177
177
  top: 4px;
178
- background-color: #fff;
178
+ background-color: #ffffff;
179
179
  border-radius: 50%;
180
180
  width: 14px;
181
181
  height: 14px;
package/css/6-components/base-components/text/_pre-code.scss CHANGED
@@ -6,6 +6,12 @@
6
6
  &__wrapper {
7
7
  position: relative;
8
8
  width: 100%;
9
+ .copy-button .icon-button--borderless {
10
+ background: var(--gray-light-color);
11
+ &:hover {
12
+ background: white;
13
+ }
14
+ }
9
15
  }
10
16
  }
11
17
 
@@ -39,14 +45,4 @@
39
45
  overflow: scroll;
40
46
  }
41
47
  }
42
- .pre-code {
43
- &__wrapper {
44
- .copy-button .icon-button--borderless {
45
- background: var(--gray-light-color);
46
- &:hover {
47
- background: white;
48
- }
49
- }
50
- }
51
- }
52
48
  }
package/css/6-components/project-components/_swatch-list.scss CHANGED
@@ -37,5 +37,17 @@
37
37
  min-height: auto;
38
38
  padding: 0;
39
39
  }
40
+ .selected button {
41
+ border-radius: var(--radius-circle) !important;
42
+ box-shadow: 0 1px 6px rgba($color: black, $alpha: 0.7);;
43
+ }
44
+ button .utds-icon-before-check{
45
+ &.is-dark {
46
+ color: white;
47
+ }
48
+ &.is-light {
49
+ color: black;
50
+ }
51
+ }
40
52
  }
41
53
  }
package/dist/style.css CHANGED
@@ -627,106 +627,82 @@ variables and settings
627
627
  --elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
628
628
  --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
629
629
  --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);
630
+ /* color utility classes */
630
631
  }
631
-
632
- /* color utility classes */
633
- .primary-color-background {
632
+ .utah-design-system .primary-color-background {
634
633
  background-color: var(--primary-color);
635
634
  }
636
-
637
- .primary-color-dark-background {
635
+ .utah-design-system .primary-color-dark-background {
638
636
  background-color: var(--primary-color-dark);
639
637
  }
640
-
641
- .primary-color-light-background {
638
+ .utah-design-system .primary-color-light-background {
642
639
  background-color: var(--primary-color-light);
643
640
  }
644
-
645
- .gray-on-primary-background {
641
+ .utah-design-system .gray-on-primary-background {
646
642
  background-color: var(--gray-on-primary-color);
647
643
  }
648
-
649
- .primary-color {
644
+ .utah-design-system .primary-color {
650
645
  color: var(--primary-color);
651
646
  }
652
-
653
- .primary-color-border {
647
+ .utah-design-system .primary-color-border {
654
648
  border-color: var(--primary-color);
655
649
  }
656
-
657
- .secondary-color-background {
650
+ .utah-design-system .secondary-color-background {
658
651
  background-color: var(--secondary-color);
659
652
  }
660
-
661
- .secondary-color-dark-background {
653
+ .utah-design-system .secondary-color-dark-background {
662
654
  background-color: var(--secondary-color-dark);
663
655
  }
664
-
665
- .secondary-color-light-background {
656
+ .utah-design-system .secondary-color-light-background {
666
657
  background-color: var(--secondary-color-light);
667
658
  }
668
-
669
- .gray-on-secondary-background {
659
+ .utah-design-system .gray-on-secondary-background {
670
660
  background-color: var(--gray-on-secondary-color);
671
661
  }
672
-
673
- .secondary-color {
662
+ .utah-design-system .secondary-color {
674
663
  color: var(--secondary-color);
675
664
  }
676
-
677
- .secondary-color-border {
665
+ .utah-design-system .secondary-color-border {
678
666
  border-color: var(--secondary-color);
679
667
  }
680
-
681
- .accent-color-background {
668
+ .utah-design-system .accent-color-background {
682
669
  background-color: var(--accent-color);
683
670
  }
684
-
685
- .accent-color-dark-background {
671
+ .utah-design-system .accent-color-dark-background {
686
672
  background-color: var(--accent-color-dark);
687
673
  }
688
-
689
- .accent-color-light-background {
674
+ .utah-design-system .accent-color-light-background {
690
675
  background-color: var(--accent-color-light);
691
676
  }
692
-
693
- .gray-on-accent-background {
677
+ .utah-design-system .gray-on-accent-background {
694
678
  background-color: var(--gray-on-accent-color);
695
679
  }
696
-
697
- .accent-color {
680
+ .utah-design-system .accent-color {
698
681
  color: var(--accent-color);
699
682
  }
700
-
701
- .accent-color-border {
683
+ .utah-design-system .accent-color-border {
702
684
  border-color: var(--accent-color);
703
685
  }
704
-
705
- .gray-color-background {
686
+ .utah-design-system .gray-color-background {
706
687
  background-color: var(--gray-color);
707
688
  }
708
-
709
- .gray-color-light-background {
689
+ .utah-design-system .gray-color-light-background {
710
690
  background-color: var(--gray-light-color);
711
691
  }
712
-
713
- .white-color {
692
+ .utah-design-system .white-color {
714
693
  color: white;
715
694
  }
716
-
717
- .background-frosted-dark {
695
+ .utah-design-system .background-frosted-dark {
718
696
  background: rgba(0, 0, 0, 0.6);
719
697
  backdrop-filter: blur(16px) brightness(1.5);
720
698
  -webkit-backdrop-filter: blur(16px) brightness(1.5);
721
699
  }
722
-
723
- .background-frosted-light {
700
+ .utah-design-system .background-frosted-light {
724
701
  background: rgba(255, 255, 255, 0.1);
725
702
  backdrop-filter: blur(16px);
726
703
  -webkit-backdrop-filter: blur(16px);
727
704
  }
728
-
729
- .backdrop-dark {
705
+ .utah-design-system .backdrop-dark {
730
706
  background: rgba(0, 0, 0, 0.6);
731
707
  backdrop-filter: blur(6px) brightness(60%);
732
708
  }
@@ -1479,106 +1455,106 @@ variables and settings
1479
1455
  --elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
1480
1456
  --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
1481
1457
  --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);
1458
+ /* color utility classes */
1482
1459
  }
1483
1460
 
1484
- /* color utility classes */
1485
- .primary-color-background {
1461
+ .utah-design-system .primary-color-background {
1486
1462
  background-color: var(--primary-color);
1487
1463
  }
1488
1464
 
1489
- .primary-color-dark-background {
1465
+ .utah-design-system .primary-color-dark-background {
1490
1466
  background-color: var(--primary-color-dark);
1491
1467
  }
1492
1468
 
1493
- .primary-color-light-background {
1469
+ .utah-design-system .primary-color-light-background {
1494
1470
  background-color: var(--primary-color-light);
1495
1471
  }
1496
1472
 
1497
- .gray-on-primary-background {
1473
+ .utah-design-system .gray-on-primary-background {
1498
1474
  background-color: var(--gray-on-primary-color);
1499
1475
  }
1500
1476
 
1501
- .primary-color {
1477
+ .utah-design-system .primary-color {
1502
1478
  color: var(--primary-color);
1503
1479
  }
1504
1480
 
1505
- .primary-color-border {
1481
+ .utah-design-system .primary-color-border {
1506
1482
  border-color: var(--primary-color);
1507
1483
  }
1508
1484
 
1509
- .secondary-color-background {
1485
+ .utah-design-system .secondary-color-background {
1510
1486
  background-color: var(--secondary-color);
1511
1487
  }
1512
1488
 
1513
- .secondary-color-dark-background {
1489
+ .utah-design-system .secondary-color-dark-background {
1514
1490
  background-color: var(--secondary-color-dark);
1515
1491
  }
1516
1492
 
1517
- .secondary-color-light-background {
1493
+ .utah-design-system .secondary-color-light-background {
1518
1494
  background-color: var(--secondary-color-light);
1519
1495
  }
1520
1496
 
1521
- .gray-on-secondary-background {
1497
+ .utah-design-system .gray-on-secondary-background {
1522
1498
  background-color: var(--gray-on-secondary-color);
1523
1499
  }
1524
1500
 
1525
- .secondary-color {
1501
+ .utah-design-system .secondary-color {
1526
1502
  color: var(--secondary-color);
1527
1503
  }
1528
1504
 
1529
- .secondary-color-border {
1505
+ .utah-design-system .secondary-color-border {
1530
1506
  border-color: var(--secondary-color);
1531
1507
  }
1532
1508
 
1533
- .accent-color-background {
1509
+ .utah-design-system .accent-color-background {
1534
1510
  background-color: var(--accent-color);
1535
1511
  }
1536
1512
 
1537
- .accent-color-dark-background {
1513
+ .utah-design-system .accent-color-dark-background {
1538
1514
  background-color: var(--accent-color-dark);
1539
1515
  }
1540
1516
 
1541
- .accent-color-light-background {
1517
+ .utah-design-system .accent-color-light-background {
1542
1518
  background-color: var(--accent-color-light);
1543
1519
  }
1544
1520
 
1545
- .gray-on-accent-background {
1521
+ .utah-design-system .gray-on-accent-background {
1546
1522
  background-color: var(--gray-on-accent-color);
1547
1523
  }
1548
1524
 
1549
- .accent-color {
1525
+ .utah-design-system .accent-color {
1550
1526
  color: var(--accent-color);
1551
1527
  }
1552
1528
 
1553
- .accent-color-border {
1529
+ .utah-design-system .accent-color-border {
1554
1530
  border-color: var(--accent-color);
1555
1531
  }
1556
1532
 
1557
- .gray-color-background {
1533
+ .utah-design-system .gray-color-background {
1558
1534
  background-color: var(--gray-color);
1559
1535
  }
1560
1536
 
1561
- .gray-color-light-background {
1537
+ .utah-design-system .gray-color-light-background {
1562
1538
  background-color: var(--gray-light-color);
1563
1539
  }
1564
1540
 
1565
- .white-color {
1541
+ .utah-design-system .white-color {
1566
1542
  color: white;
1567
1543
  }
1568
1544
 
1569
- .background-frosted-dark {
1545
+ .utah-design-system .background-frosted-dark {
1570
1546
  background: rgba(0, 0, 0, 0.6);
1571
1547
  backdrop-filter: blur(16px) brightness(1.5);
1572
1548
  -webkit-backdrop-filter: blur(16px) brightness(1.5);
1573
1549
  }
1574
1550
 
1575
- .background-frosted-light {
1551
+ .utah-design-system .background-frosted-light {
1576
1552
  background: rgba(255, 255, 255, 0.1);
1577
1553
  backdrop-filter: blur(16px);
1578
1554
  -webkit-backdrop-filter: blur(16px);
1579
1555
  }
1580
1556
 
1581
- .backdrop-dark {
1557
+ .utah-design-system .backdrop-dark {
1582
1558
  background: rgba(0, 0, 0, 0.6);
1583
1559
  backdrop-filter: blur(6px) brightness(60%);
1584
1560
  }
@@ -1756,7 +1732,7 @@ CSS Classes - SCSS Variables
1756
1732
  padding: var(--spacing);
1757
1733
  text-decoration: none;
1758
1734
  color: var(--gray-color);
1759
- transition: all 200ms ease-in-out;
1735
+ transition: all 200ms ease-in-out, outline-offset 0ms ease;
1760
1736
  box-sizing: border-box;
1761
1737
  }
1762
1738
 
@@ -1766,6 +1742,10 @@ CSS Classes - SCSS Variables
1766
1742
  color: white;
1767
1743
  }
1768
1744
 
1745
+ .utah-design-system .action-card:focus-visible {
1746
+ outline-offset: var(--spacing-2xs);
1747
+ }
1748
+
1769
1749
  .utah-design-system .action-card--primary-color {
1770
1750
  border: 2px solid var(--primary-color);
1771
1751
  color: var(--primary-color);
@@ -2619,6 +2599,7 @@ base color swatches for the design system
2619
2599
  background-color: white;
2620
2600
  box-sizing: border-box;
2621
2601
  appearance: none;
2602
+ flex-shrink: 0;
2622
2603
  }
2623
2604
 
2624
2605
  .utah-design-system input[type=checkbox]::after {
@@ -2963,7 +2944,7 @@ base color swatches for the design system
2963
2944
 
2964
2945
  .utah-design-system .switch-old::after {
2965
2946
  top: 4px;
2966
- background-color: #fff;
2947
+ background-color: #ffffff;
2967
2948
  border-radius: 50%;
2968
2949
  width: 14px;
2969
2950
  height: 14px;
@@ -4096,106 +4077,106 @@ variables and settings
4096
4077
  --elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
4097
4078
  --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
4098
4079
  --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);
4080
+ /* color utility classes */
4099
4081
  }
4100
4082
 
4101
- /* color utility classes */
4102
- .primary-color-background {
4083
+ .utah-design-system .primary-color-background {
4103
4084
  background-color: var(--primary-color);
4104
4085
  }
4105
4086
 
4106
- .primary-color-dark-background {
4087
+ .utah-design-system .primary-color-dark-background {
4107
4088
  background-color: var(--primary-color-dark);
4108
4089
  }
4109
4090
 
4110
- .primary-color-light-background {
4091
+ .utah-design-system .primary-color-light-background {
4111
4092
  background-color: var(--primary-color-light);
4112
4093
  }
4113
4094
 
4114
- .gray-on-primary-background {
4095
+ .utah-design-system .gray-on-primary-background {
4115
4096
  background-color: var(--gray-on-primary-color);
4116
4097
  }
4117
4098
 
4118
- .primary-color {
4099
+ .utah-design-system .primary-color {
4119
4100
  color: var(--primary-color);
4120
4101
  }
4121
4102
 
4122
- .primary-color-border {
4103
+ .utah-design-system .primary-color-border {
4123
4104
  border-color: var(--primary-color);
4124
4105
  }
4125
4106
 
4126
- .secondary-color-background {
4107
+ .utah-design-system .secondary-color-background {
4127
4108
  background-color: var(--secondary-color);
4128
4109
  }
4129
4110
 
4130
- .secondary-color-dark-background {
4111
+ .utah-design-system .secondary-color-dark-background {
4131
4112
  background-color: var(--secondary-color-dark);
4132
4113
  }
4133
4114
 
4134
- .secondary-color-light-background {
4115
+ .utah-design-system .secondary-color-light-background {
4135
4116
  background-color: var(--secondary-color-light);
4136
4117
  }
4137
4118
 
4138
- .gray-on-secondary-background {
4119
+ .utah-design-system .gray-on-secondary-background {
4139
4120
  background-color: var(--gray-on-secondary-color);
4140
4121
  }
4141
4122
 
4142
- .secondary-color {
4123
+ .utah-design-system .secondary-color {
4143
4124
  color: var(--secondary-color);
4144
4125
  }
4145
4126
 
4146
- .secondary-color-border {
4127
+ .utah-design-system .secondary-color-border {
4147
4128
  border-color: var(--secondary-color);
4148
4129
  }
4149
4130
 
4150
- .accent-color-background {
4131
+ .utah-design-system .accent-color-background {
4151
4132
  background-color: var(--accent-color);
4152
4133
  }
4153
4134
 
4154
- .accent-color-dark-background {
4135
+ .utah-design-system .accent-color-dark-background {
4155
4136
  background-color: var(--accent-color-dark);
4156
4137
  }
4157
4138
 
4158
- .accent-color-light-background {
4139
+ .utah-design-system .accent-color-light-background {
4159
4140
  background-color: var(--accent-color-light);
4160
4141
  }
4161
4142
 
4162
- .gray-on-accent-background {
4143
+ .utah-design-system .gray-on-accent-background {
4163
4144
  background-color: var(--gray-on-accent-color);
4164
4145
  }
4165
4146
 
4166
- .accent-color {
4147
+ .utah-design-system .accent-color {
4167
4148
  color: var(--accent-color);
4168
4149
  }
4169
4150
 
4170
- .accent-color-border {
4151
+ .utah-design-system .accent-color-border {
4171
4152
  border-color: var(--accent-color);
4172
4153
  }
4173
4154
 
4174
- .gray-color-background {
4155
+ .utah-design-system .gray-color-background {
4175
4156
  background-color: var(--gray-color);
4176
4157
  }
4177
4158
 
4178
- .gray-color-light-background {
4159
+ .utah-design-system .gray-color-light-background {
4179
4160
  background-color: var(--gray-light-color);
4180
4161
  }
4181
4162
 
4182
- .white-color {
4163
+ .utah-design-system .white-color {
4183
4164
  color: white;
4184
4165
  }
4185
4166
 
4186
- .background-frosted-dark {
4167
+ .utah-design-system .background-frosted-dark {
4187
4168
  background: rgba(0, 0, 0, 0.6);
4188
4169
  backdrop-filter: blur(16px) brightness(1.5);
4189
4170
  -webkit-backdrop-filter: blur(16px) brightness(1.5);
4190
4171
  }
4191
4172
 
4192
- .background-frosted-light {
4173
+ .utah-design-system .background-frosted-light {
4193
4174
  background: rgba(255, 255, 255, 0.1);
4194
4175
  backdrop-filter: blur(16px);
4195
4176
  -webkit-backdrop-filter: blur(16px);
4196
4177
  }
4197
4178
 
4198
- .backdrop-dark {
4179
+ .utah-design-system .backdrop-dark {
4199
4180
  background: rgba(0, 0, 0, 0.6);
4200
4181
  backdrop-filter: blur(6px) brightness(60%);
4201
4182
  }
@@ -4595,6 +4576,14 @@ Media Sizes - SCSS Variables
4595
4576
  width: 100%;
4596
4577
  }
4597
4578
 
4579
+ .utah-design-system .pre-code__wrapper .copy-button .icon-button--borderless {
4580
+ background: var(--gray-light-color);
4581
+ }
4582
+
4583
+ .utah-design-system .pre-code__wrapper .copy-button .icon-button--borderless:hover {
4584
+ background: white;
4585
+ }
4586
+
4598
4587
  .utah-design-system pre {
4599
4588
  position: relative;
4600
4589
  font-family: var(--fixed-width-font-family);
@@ -4629,14 +4618,6 @@ Media Sizes - SCSS Variables
4629
4618
  overflow: scroll;
4630
4619
  }
4631
4620
 
4632
- .utah-design-system .pre-code__wrapper .copy-button .icon-button--borderless {
4633
- background: var(--gray-light-color);
4634
- }
4635
-
4636
- .utah-design-system .pre-code__wrapper .copy-button .icon-button--borderless:hover {
4637
- background: white;
4638
- }
4639
-
4640
4621
  .utah-design-system input.input--height-small,
4641
4622
  .utah-design-system .input--height-small {
4642
4623
  min-height: var(--form-ele-small);
@@ -4838,6 +4819,19 @@ Media Sizes - SCSS Variables
4838
4819
  padding: 0;
4839
4820
  }
4840
4821
 
4822
+ .utah-design-system .color-family .selected button {
4823
+ border-radius: var(--radius-circle) !important;
4824
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
4825
+ }
4826
+
4827
+ .utah-design-system .color-family button .utds-icon-before-check.is-dark {
4828
+ color: white;
4829
+ }
4830
+
4831
+ .utah-design-system .color-family button .utds-icon-before-check.is-light {
4832
+ color: black;
4833
+ }
4834
+
4841
4835
  /*
4842
4836
  ############ _components-index.scss ############
4843
4837
  component specific, BEM (Block, Element, Modifier)