@utahdts/utah-design-system 0.9.5 → 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.
- package/README.md +4 -4
- package/css/1-settings/_color-swatches.scss +19 -0
- package/css/1-settings/_settings-index.scss +57 -45
- package/css/1-settings/_spacing.scss +8 -0
- package/css/4-elements/_elements-index.scss +1 -1
- package/css/6-components/_components-index.scss +1 -0
- package/css/6-components/base-components/buttons/_button.scss +4 -0
- package/css/6-components/base-components/containers/_action-card.scss +77 -0
- package/css/6-components/base-components/forms/_checkbox.scss +1 -0
- package/css/6-components/base-components/forms/_switch.scss +1 -1
- package/css/6-components/base-components/tablesAndLists/_table.scss +3 -0
- package/css/6-components/base-components/templates/_landing-page-template.scss +0 -1
- package/css/6-components/base-components/text/_pre-code.scss +11 -1
- package/css/6-components/project-components/_swatch-list.scss +12 -0
- package/css/7-utilities/_utilities-index.scss +3 -0
- package/css/index.scss +1 -0
- package/dist/style.css +978 -73
- package/dist/utah-design-system.es.js +51 -60
- package/dist/utah-design-system.umd.js +51 -60
- package/index.js +0 -2
- package/package.json +9 -9
- package/react/components/forms/TextInput.jsx +20 -4
- package/react/components/icons/Icons.jsx +5 -2
- package/react/hooks/useRememberCursorPosition.js +32 -0
- package/react/hooks/useStateEffect.js +1 -0
- package/react/hooks/useCurrentMenuItem.js +0 -27
- package/react/hooks/usePrepMenuItems.js +0 -24
- package/react/util/menuItems/calculateMenuItemsParents.js +0 -54
- package/react/util/menuItems/findMenuItemInMenusByPathname.js +0 -29
package/README.md
CHANGED
|
@@ -10,16 +10,17 @@ 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://
|
|
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
|
[](https://www.npmjs.com/package/@utahdts/utah-design-system)
|
|
18
|
-
[](https://
|
|
18
|
+
[](https://github.com/utahdts/utah-design-system/raw/dev/LICENSE)
|
|
19
19
|
[](https://github.com/utahdts/utah-design-system/issues)
|
|
20
|
+
[](https://dts.utah.gov/standards/architecture-review-board)
|
|
20
21
|
|
|
21
22
|
```bash
|
|
22
|
-
|
|
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';
|
|
@@ -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;
|
|
@@ -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:
|
|
17
|
-
--primary-color-dark:
|
|
18
|
-
--primary-color-light:
|
|
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:
|
|
22
|
-
--secondary-color-dark:
|
|
23
|
-
--secondary-color-light:
|
|
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:
|
|
27
|
-
--accent-color-dark:
|
|
28
|
-
--accent-color-light:
|
|
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,55 +98,60 @@ 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
|
-
}
|
|
99
109
|
|
|
100
|
-
|
|
101
|
-
.primary-color-background { background-color: var(--primary-color); }
|
|
102
|
-
.primary-color-dark-background { background-color: var(--primary-color-dark); }
|
|
103
|
-
.primary-color-light-background { background-color: var(--primary-color-light); }
|
|
104
|
-
.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); }
|
|
105
115
|
|
|
106
|
-
.primary-color { color: var(--primary-color); }
|
|
107
|
-
.primary-color-border { border-color: var(--primary-color); }
|
|
116
|
+
.primary-color { color: var(--primary-color); }
|
|
117
|
+
.primary-color-border { border-color: var(--primary-color); }
|
|
108
118
|
|
|
109
|
-
.secondary-color-background { background-color: var(--secondary-color); }
|
|
110
|
-
.secondary-color-dark-background { background-color: var(--secondary-color-dark); }
|
|
111
|
-
.secondary-color-light-background { background-color: var(--secondary-color-light); }
|
|
112
|
-
.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); }
|
|
113
123
|
|
|
114
|
-
.secondary-color { color: var(--secondary-color) }
|
|
115
|
-
.secondary-color-border { border-color: var(--secondary-color) }
|
|
124
|
+
.secondary-color { color: var(--secondary-color) }
|
|
125
|
+
.secondary-color-border { border-color: var(--secondary-color) }
|
|
116
126
|
|
|
117
|
-
.accent-color-background { background-color: var(--accent-color); }
|
|
118
|
-
.accent-color-dark-background { background-color: var(--accent-color-dark); }
|
|
119
|
-
.accent-color-light-background { background-color: var(--accent-color-light); }
|
|
120
|
-
.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); }
|
|
121
131
|
|
|
122
|
-
.accent-color { color: var(--accent-color) }
|
|
123
|
-
.accent-color-border { border-color: var(--accent-color) }
|
|
132
|
+
.accent-color { color: var(--accent-color) }
|
|
133
|
+
.accent-color-border { border-color: var(--accent-color) }
|
|
124
134
|
|
|
125
|
-
.gray-color-background { background-color: var(--gray-color); }
|
|
126
|
-
.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) }
|
|
127
137
|
|
|
128
|
-
.white-color { color: white; }
|
|
138
|
+
.white-color { color: white; }
|
|
129
139
|
|
|
130
|
-
.background-frosted-dark {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
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
|
+
}
|
|
135
145
|
|
|
136
|
-
.background-frosted-light {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
146
|
+
.background-frosted-light {
|
|
147
|
+
background: rgba(255,255,255,0.1);
|
|
148
|
+
backdrop-filter: blur(16px);
|
|
149
|
+
-webkit-backdrop-filter: blur(16px);
|
|
150
|
+
}
|
|
141
151
|
|
|
142
|
-
.backdrop-dark {
|
|
143
|
-
|
|
144
|
-
|
|
152
|
+
.backdrop-dark {
|
|
153
|
+
background: rgba(0,0,0,0.6);
|
|
154
|
+
backdrop-filter: blur(6px) brightness(60%);
|
|
155
|
+
}
|
|
145
156
|
}
|
|
157
|
+
|
|
@@ -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); }
|
|
@@ -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),
|
|
@@ -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";
|
|
@@ -0,0 +1,77 @@
|
|
|
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, outline-offset 0ms ease;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
&:hover {
|
|
16
|
+
box-shadow: none;
|
|
17
|
+
background: var(--gray-color);
|
|
18
|
+
color: white;
|
|
19
|
+
}
|
|
20
|
+
&:focus-visible {
|
|
21
|
+
outline-offset: var(--spacing-2xs);
|
|
22
|
+
}
|
|
23
|
+
&--primary-color {
|
|
24
|
+
border: 2px solid var(--primary-color);
|
|
25
|
+
color: var(--primary-color);
|
|
26
|
+
&:hover {
|
|
27
|
+
background: var(--primary-color);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
&--secondary-color {
|
|
31
|
+
border: 2px solid var(--secondary-color);
|
|
32
|
+
color: var(--secondary-color);
|
|
33
|
+
&:hover {
|
|
34
|
+
background: var(--secondary-color);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
&--accent-color {
|
|
38
|
+
border: 2px solid var(--accent-color);
|
|
39
|
+
color: var(--accent-color);
|
|
40
|
+
&:hover {
|
|
41
|
+
background: var(--accent-color);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
&--solid {
|
|
45
|
+
background: var(--gray-color);
|
|
46
|
+
color: white;
|
|
47
|
+
&.action-card--primary-color {
|
|
48
|
+
background: var(--primary-color);
|
|
49
|
+
&:hover {
|
|
50
|
+
color: var(--primary-color);
|
|
51
|
+
background: white;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
&.action-card--secondary-color {
|
|
55
|
+
background: var(--secondary-color);
|
|
56
|
+
&:hover {
|
|
57
|
+
color: var(--secondary-color);
|
|
58
|
+
background: white;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
&.action-card--accent-color {
|
|
62
|
+
background: var(--accent-color);
|
|
63
|
+
&:hover {
|
|
64
|
+
color: var(--accent-color);
|
|
65
|
+
background: white;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
//TODO: Primary color is light
|
|
71
|
+
|
|
72
|
+
&__title {
|
|
73
|
+
display: flex;
|
|
74
|
+
justify-content: space-between;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -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
|
|
|
@@ -18,7 +24,7 @@
|
|
|
18
24
|
margin: 0 0 var(--spacing) 0;
|
|
19
25
|
&.gray-block {
|
|
20
26
|
background: var(--gray-light-color);
|
|
21
|
-
padding: var(--spacing-s) var(--spacing-
|
|
27
|
+
padding: var(--spacing-s) var(--spacing-3xl) var(--spacing-s) var(--spacing);
|
|
22
28
|
border-radius: var(--radius-medium);
|
|
23
29
|
}
|
|
24
30
|
&.pre-code {
|
|
@@ -34,5 +40,9 @@
|
|
|
34
40
|
.pre-code__overflow-content {
|
|
35
41
|
width: max-content;
|
|
36
42
|
}
|
|
43
|
+
&.size-small {
|
|
44
|
+
max-height: 200px;
|
|
45
|
+
overflow: scroll;
|
|
46
|
+
}
|
|
37
47
|
}
|
|
38
48
|
}
|
|
@@ -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/css/index.scss
CHANGED