@utahdts/utah-design-system 0.9.5 → 0.10.3

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 (17) hide show
  1. package/README.md +2 -2
  2. package/css/1-settings/_color-swatches.scss +19 -0
  3. package/css/1-settings/_settings-index.scss +20 -9
  4. package/css/1-settings/_spacing.scss +8 -0
  5. package/css/4-elements/_elements-index.scss +1 -1
  6. package/css/6-components/_components-index.scss +1 -0
  7. package/css/6-components/base-components/buttons/_button.scss +4 -0
  8. package/css/6-components/base-components/containers/_action-card.scss +74 -0
  9. package/css/6-components/base-components/tablesAndLists/_table.scss +3 -0
  10. package/css/6-components/base-components/templates/_landing-page-template.scss +0 -1
  11. package/css/6-components/base-components/text/_pre-code.scss +15 -1
  12. package/css/7-utilities/_utilities-index.scss +3 -0
  13. package/css/index.scss +1 -0
  14. package/dist/style.css +933 -22
  15. package/dist/utah-design-system.es.js +8 -8
  16. package/dist/utah-design-system.umd.js +8 -8
  17. package/package.json +8 -8
package/README.md CHANGED
@@ -10,12 +10,12 @@ A collection of styles and react components designed to make it quick and simple
10
10
 
11
11
  ## Documentation
12
12
 
13
- Please see the [documentation site](https://utahdts.github.io/utah-design-system/) for all information related to the Utah Design System.
13
+ Please see the [documentation site](https://designsystem.utah.gov/) for all information related to the Utah Design System.
14
14
 
15
15
  ## Install
16
16
 
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
- [![License](https://img.shields.io/npm/l/@utahdts/utah-design-system.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
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
20
 
21
21
  ```bash
package/css/1-settings/_color-swatches.scss CHANGED
@@ -98,6 +98,25 @@ $azul-15: #cddbf8;
98
98
  $azul-16: #dde7fa;
99
99
  $azul-17: #eef3fc;
100
100
 
101
+ $celtic-00: #1c2e40;
102
+ $celtic-01: #193e61;
103
+ $celtic-02: #174d82;
104
+ $celtic-03: #145da3;
105
+ $celtic-04: #126dc4;
106
+ $celtic-05: #2277c8;
107
+ $celtic-06: #3381cc;
108
+ $celtic-07: #448cd0;
109
+ $celtic-08: #5596d4;
110
+ $celtic-09: #66a1d9;
111
+ $celtic-10: #77abdd;
112
+ $celtic-11: #88b6e1;
113
+ $celtic-12: #99c0e5;
114
+ $celtic-13: #aacae9;
115
+ $celtic-14: #bbd5ee;
116
+ $celtic-15: #ccdff2;
117
+ $celtic-16: #ddeaf6;
118
+ $celtic-17: #eef4fa;
119
+
101
120
  $celadon-blue-00: #27424b;
102
121
  $celadon-blue-01: #205162;
103
122
  $celadon-blue-02: #1a6179;
package/css/1-settings/_settings-index.scss CHANGED
@@ -3,29 +3,35 @@
3
3
  variables and settings
4
4
  */
5
5
 
6
+ @forward "class-vars";
6
7
  @use "class-vars";
8
+ @forward "spacing";
7
9
  @use "spacing";
10
+ @forward "grid";
8
11
  @use "grid";
12
+ @forward "font-stuff";
9
13
  @use "font-stuff";
14
+ @forward "color-swatches";
10
15
  @use "color-swatches";
16
+ @forward "icons";
11
17
  @use "icons";
12
18
 
13
19
  #{class-vars.$base-class} {
14
20
  /* color */
15
21
  /* ######## Pick these colors to match your desired style ######## */
16
- --primary-color: purple;
17
- --primary-color-dark: rgb(50, 0, 50);
18
- --primary-color-light: rgb(219, 159, 219);
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};;
19
25
  --gray-on-primary-color: #474747;
20
26
 
21
- --secondary-color: rgb(0, 255, 136);
22
- --secondary-color-dark: rgb(0, 66, 35);
23
- --secondary-color-light: rgb(183, 250, 218);
27
+ --secondary-color: #{color-swatches.$celadon-blue-05};
28
+ --secondary-color-dark: #{color-swatches.$celadon-blue-00};
29
+ --secondary-color-light: #{color-swatches.$celadon-blue-17};
24
30
  --gray-on-secondary-color: #474747;
25
31
 
26
- --accent-color: gold;
27
- --accent-color-dark: rgb(114, 97, 0);
28
- --accent-color-light: rgb(245, 238, 196);
32
+ --accent-color: #{color-swatches.$electric-yellow-05};
33
+ --accent-color-dark: #{color-swatches.$electric-yellow-00};
34
+ --accent-color-light: #{color-swatches.$electric-yellow-17};
29
35
  --gray-on-accent-color: #474747;
30
36
 
31
37
  --form-ele-color: #{color-swatches.$azul-05};
@@ -81,6 +87,7 @@ variables and settings
81
87
 
82
88
  /* content layout sizes */
83
89
  --content-width-narrow: 808px;
90
+ --content-width-medium: 1016px;
84
91
  --content-width: 1224px;
85
92
  --content-width-wide: 1432px;
86
93
  --documentation-width: 700px;
@@ -91,9 +98,13 @@ variables and settings
91
98
 
92
99
  /* elevation box shadows */
93
100
  --drop-shadow-color: rgba(0, 0, 0, 0.3);
101
+ --drop-shadow-color-top: rgba(0, 0, 0, 0.15);
94
102
  --elevation-small: 0 3px 6px var(--drop-shadow-color);
95
103
  --elevation-medium: 0 6px 12px var(--drop-shadow-color);
96
104
  --elevation-large: 0 12px 16px var(--drop-shadow-color);
105
+ --elevation-small-borderless: 0 3px 6px var(--drop-shadow-color), 0 -3px 3px var(--drop-shadow-color-top);
106
+ --elevation-medium-borderless: 0 6px 12px var(--drop-shadow-color), 0 -3px 6px var(--drop-shadow-color-top);
107
+ --elevation-large-borderless: 0 12px 16px var(--drop-shadow-color), 0 -3px 12px var(--drop-shadow-color-top);
97
108
 
98
109
  }
99
110
 
package/css/1-settings/_spacing.scss CHANGED
@@ -35,6 +35,14 @@
35
35
  .mx-spacing-l { margin-left: var(--spacing-l); margin-right: var(--spacing-l); }
36
36
  .my-spacing-l { margin-top: var(--spacing-l); margin-bottom: var(--spacing-l); }
37
37
 
38
+ .m-spacing-xl { margin: var(--spacing-xl); }
39
+ .mt-spacing-xl { margin-top: var(--spacing-xl); }
40
+ .mr-spacing-xl { margin-right: var(--spacing-xl); }
41
+ .mb-spacing-xl { margin-bottom: var(--spacing-xl); }
42
+ .ml-spacing-xl { margin-left: var(--spacing-xl); }
43
+ .mx-spacing-xl { margin-left: var(--spacing-xl); margin-right: var(--spacing-xl); }
44
+ .my-spacing-xl { margin-top: var(--spacing-xl); margin-bottom: var(--spacing-xl); }
45
+
38
46
  .m-spacing-s { margin: var(--spacing-s); }
39
47
  .mt-spacing-s { margin-top: var(--spacing-s); }
40
48
  .mr-spacing-s { margin-right: var(--spacing-s); }
package/css/4-elements/_elements-index.scss CHANGED
@@ -74,7 +74,7 @@ elemental html: h1, h2, h3, ul, li, etc.
74
74
  border-top: 1px solid var(--gray-border);
75
75
  }
76
76
 
77
- a[href]:not(.button) {
77
+ a[href]:not(.button, .action-card) {
78
78
  color: var(--primary-color);
79
79
  &:hover {
80
80
  box-shadow: -3px -1px 0 0px var(--hover-gray-color-opaque),
package/css/6-components/_components-index.scss CHANGED
@@ -6,6 +6,7 @@ component specific, BEM (Block, Element, Modifier)
6
6
 
7
7
  /* ---- Base Components ---- */
8
8
  @use "base-components/containers/accordion";
9
+ @use "base-components/containers/action-card";
9
10
  @use "base-components/containers/tab-group";
10
11
  @use "base-components/buttons/button";
11
12
  @use "base-components/buttons/icon-button";
package/css/6-components/base-components/buttons/_button.scss CHANGED
@@ -84,6 +84,10 @@
84
84
  width: .8rem;
85
85
  fill: currentColor;
86
86
  }
87
+ [class*='utds-icon-after-']::after,
88
+ [class*='utds-icon-before-']::before {
89
+ font-size: .9em;
90
+ }
87
91
  }
88
92
  &--icon-left {
89
93
  margin-right: var(--spacing-xs)
package/css/6-components/base-components/containers/_action-card.scss ADDED
@@ -0,0 +1,74 @@
1
+ @use "../../../1-settings/class-vars";
2
+
3
+ /*
4
+ ############ _action-card.scss ############
5
+ */
6
+ #{class-vars.$base-class} {
7
+ .action-card {
8
+ border: 2px solid var(--gray-color);
9
+ border-radius: var(--radius-small);
10
+ padding: var(--spacing);
11
+ text-decoration: none;
12
+ color: var(--gray-color);
13
+ transition: all 200ms ease-in-out;
14
+ box-sizing: border-box;
15
+ &:hover {
16
+ box-shadow: none;
17
+ background: var(--gray-color);
18
+ color: white;
19
+ }
20
+ &--primary-color {
21
+ border: 2px solid var(--primary-color);
22
+ color: var(--primary-color);
23
+ &:hover {
24
+ background: var(--primary-color);
25
+ }
26
+ }
27
+ &--secondary-color {
28
+ border: 2px solid var(--secondary-color);
29
+ color: var(--secondary-color);
30
+ &:hover {
31
+ background: var(--secondary-color);
32
+ }
33
+ }
34
+ &--accent-color {
35
+ border: 2px solid var(--accent-color);
36
+ color: var(--accent-color);
37
+ &:hover {
38
+ background: var(--accent-color);
39
+ }
40
+ }
41
+ &--solid {
42
+ background: var(--gray-color);
43
+ color: white;
44
+ &.action-card--primary-color {
45
+ background: var(--primary-color);
46
+ &:hover {
47
+ color: var(--primary-color);
48
+ background: white;
49
+ }
50
+ }
51
+ &.action-card--secondary-color {
52
+ background: var(--secondary-color);
53
+ &:hover {
54
+ color: var(--secondary-color);
55
+ background: white;
56
+ }
57
+ }
58
+ &.action-card--accent-color {
59
+ background: var(--accent-color);
60
+ &:hover {
61
+ color: var(--accent-color);
62
+ background: white;
63
+ }
64
+ }
65
+ }
66
+
67
+ //TODO: Primary color is light
68
+
69
+ &__title {
70
+ display: flex;
71
+ justify-content: space-between;
72
+ }
73
+ }
74
+ }
package/css/6-components/base-components/tablesAndLists/_table.scss CHANGED
@@ -80,6 +80,9 @@
80
80
  }
81
81
  }
82
82
  }
83
+ &--full-width {
84
+ width: 100%;
85
+ }
83
86
  }
84
87
  .table-header {
85
88
  position: relative;
package/css/6-components/base-components/templates/_landing-page-template.scss CHANGED
@@ -7,7 +7,6 @@
7
7
  justify-content: center;
8
8
  align-items: center;
9
9
  flex-direction: column;
10
- padding-bottom: var(--spacing-xl);
11
10
 
12
11
  .content-width {
13
12
  max-width: calc(var(--content-width-narrow) + (2 * var(--spacing-2xl)));
package/css/6-components/base-components/text/_pre-code.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  margin: 0 0 var(--spacing) 0;
19
19
  &.gray-block {
20
20
  background: var(--gray-light-color);
21
- padding: var(--spacing-s) var(--spacing-xl) var(--spacing-s) var(--spacing);
21
+ padding: var(--spacing-s) var(--spacing-3xl) var(--spacing-s) var(--spacing);
22
22
  border-radius: var(--radius-medium);
23
23
  }
24
24
  &.pre-code {
@@ -34,5 +34,19 @@
34
34
  .pre-code__overflow-content {
35
35
  width: max-content;
36
36
  }
37
+ &.size-small {
38
+ max-height: 200px;
39
+ overflow: scroll;
40
+ }
41
+ }
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
+ }
37
51
  }
38
52
  }
package/css/7-utilities/_utilities-index.scss CHANGED
@@ -88,6 +88,9 @@ utility classes, atomic css
88
88
  .flex-3up-gap {
89
89
  flex: 0 1 calc(33% - var(--spacing));
90
90
  }
91
+ .flex-2up-gap {
92
+ flex: 0 1 calc(50% - var(--spacing));
93
+ }
91
94
 
92
95
 
93
96
  /* ----- Positioning ---- */
package/css/index.scss CHANGED
@@ -22,6 +22,7 @@ BEM standard: Block, Element, Modifier
22
22
  // @include meta.load-css("./3-generic/normalize.css");
23
23
 
24
24
  // variables and settings
25
+ @forward "1-settings/settings-index";
25
26
  @include meta.load-css("1-settings/settings-index");
26
27
 
27
28
  // mixins, functions