@cas-smartdesign/styles 3.6.1 → 3.7.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 (25) hide show
  1. package/dist/docs/doc.css +1 -1
  2. package/dist/docs/doc.mjs +46 -45
  3. package/dist/styles.css +1 -1
  4. package/dist/styles.css.map +12 -12
  5. package/dist/theme.css +1 -1
  6. package/dist/theme.css.map +13 -13
  7. package/npm-third-party-licenses.json +51 -46
  8. package/package.json +4 -4
  9. package/readme.md +0 -2
  10. package/scss/modules/_app.scss +2 -2
  11. package/scss/modules/_base_colors.scss +44 -43
  12. package/scss/modules/_button.scss +16 -13
  13. package/scss/modules/_colors.scss +4 -3
  14. package/scss/modules/_index.scss +9 -9
  15. package/scss/modules/_link.scss +2 -1
  16. package/scss/modules/_misc.scss +3 -2
  17. package/scss/modules/_spacing.scss +10 -9
  18. package/scss/modules/_token.scss +8 -5
  19. package/scss/modules/_typography.scss +16 -13
  20. package/scss/styles.scss +2 -2
  21. package/scss/theme.scss +14 -11
  22. package/scss/variables/_button.scss +14 -9
  23. package/scss/variables/_colors.scss +6 -5
  24. package/scss/variables/_index.scss +5 -6
  25. package/scss/variables/_typography.scss +8 -4
package/scss/modules/_base_colors.scss CHANGED
@@ -1,170 +1,171 @@
1
1
  /* Generated by 'generate-colors-scss.js', do not touch */
2
- @import "../variables/base_colors";
2
+ @forward "../variables/base_colors";
3
+ @use "../variables/base_colors" as base;
3
4
 
4
5
  .sd-red {
5
- color: $sd-red !important;
6
+ color: base.$sd-red !important;
6
7
  }
7
8
 
8
9
  .sd-red-background {
9
- background-color: $sd-red !important;
10
+ background-color: base.$sd-red !important;
10
11
  }
11
12
 
12
13
  .sd-orange {
13
- color: $sd-orange !important;
14
+ color: base.$sd-orange !important;
14
15
  }
15
16
 
16
17
  .sd-orange-background {
17
- background-color: $sd-orange !important;
18
+ background-color: base.$sd-orange !important;
18
19
  }
19
20
 
20
21
  .sd-yellow {
21
- color: $sd-yellow !important;
22
+ color: base.$sd-yellow !important;
22
23
  }
23
24
 
24
25
  .sd-yellow-background {
25
- background-color: $sd-yellow !important;
26
+ background-color: base.$sd-yellow !important;
26
27
  }
27
28
 
28
29
  .sd-lightgreen {
29
- color: $sd-lightgreen !important;
30
+ color: base.$sd-lightgreen !important;
30
31
  }
31
32
 
32
33
  .sd-lightgreen-background {
33
- background-color: $sd-lightgreen !important;
34
+ background-color: base.$sd-lightgreen !important;
34
35
  }
35
36
 
36
37
  .sd-green {
37
- color: $sd-green !important;
38
+ color: base.$sd-green !important;
38
39
  }
39
40
 
40
41
  .sd-green-background {
41
- background-color: $sd-green !important;
42
+ background-color: base.$sd-green !important;
42
43
  }
43
44
 
44
45
  .sd-teal {
45
- color: $sd-teal !important;
46
+ color: base.$sd-teal !important;
46
47
  }
47
48
 
48
49
  .sd-teal-background {
49
- background-color: $sd-teal !important;
50
+ background-color: base.$sd-teal !important;
50
51
  }
51
52
 
52
53
  .sd-lightblue {
53
- color: $sd-lightblue !important;
54
+ color: base.$sd-lightblue !important;
54
55
  }
55
56
 
56
57
  .sd-lightblue-background {
57
- background-color: $sd-lightblue !important;
58
+ background-color: base.$sd-lightblue !important;
58
59
  }
59
60
 
60
61
  .sd-blue {
61
- color: $sd-blue !important;
62
+ color: base.$sd-blue !important;
62
63
  }
63
64
 
64
65
  .sd-blue-background {
65
- background-color: $sd-blue !important;
66
+ background-color: base.$sd-blue !important;
66
67
  }
67
68
 
68
69
  .sd-pink {
69
- color: $sd-pink !important;
70
+ color: base.$sd-pink !important;
70
71
  }
71
72
 
72
73
  .sd-pink-background {
73
- background-color: $sd-pink !important;
74
+ background-color: base.$sd-pink !important;
74
75
  }
75
76
 
76
77
  .sd-purple {
77
- color: $sd-purple !important;
78
+ color: base.$sd-purple !important;
78
79
  }
79
80
 
80
81
  .sd-purple-background {
81
- background-color: $sd-purple !important;
82
+ background-color: base.$sd-purple !important;
82
83
  }
83
84
 
84
85
  .sd-brown {
85
- color: $sd-brown !important;
86
+ color: base.$sd-brown !important;
86
87
  }
87
88
 
88
89
  .sd-brown-background {
89
- background-color: $sd-brown !important;
90
+ background-color: base.$sd-brown !important;
90
91
  }
91
92
 
92
93
  .sd-white {
93
- color: $sd-white !important;
94
+ color: base.$sd-white !important;
94
95
  }
95
96
 
96
97
  .sd-white-background {
97
- background-color: $sd-white !important;
98
+ background-color: base.$sd-white !important;
98
99
  }
99
100
 
100
101
  .sd-palegrey {
101
- color: $sd-palegrey !important;
102
+ color: base.$sd-palegrey !important;
102
103
  }
103
104
 
104
105
  .sd-palegrey-background {
105
- background-color: $sd-palegrey !important;
106
+ background-color: base.$sd-palegrey !important;
106
107
  }
107
108
 
108
109
  .sd-lightgrey {
109
- color: $sd-lightgrey !important;
110
+ color: base.$sd-lightgrey !important;
110
111
  }
111
112
 
112
113
  .sd-lightgrey-background {
113
- background-color: $sd-lightgrey !important;
114
+ background-color: base.$sd-lightgrey !important;
114
115
  }
115
116
 
116
117
  .sd-silver {
117
- color: $sd-silver !important;
118
+ color: base.$sd-silver !important;
118
119
  }
119
120
 
120
121
  .sd-silver-background {
121
- background-color: $sd-silver !important;
122
+ background-color: base.$sd-silver !important;
122
123
  }
123
124
 
124
125
  .sd-grey {
125
- color: $sd-grey !important;
126
+ color: base.$sd-grey !important;
126
127
  }
127
128
 
128
129
  .sd-grey-background {
129
- background-color: $sd-grey !important;
130
+ background-color: base.$sd-grey !important;
130
131
  }
131
132
 
132
133
  .sd-darkgrey {
133
- color: $sd-darkgrey !important;
134
+ color: base.$sd-darkgrey !important;
134
135
  }
135
136
 
136
137
  .sd-darkgrey-background {
137
- background-color: $sd-darkgrey !important;
138
+ background-color: base.$sd-darkgrey !important;
138
139
  }
139
140
 
140
141
  .sd-black {
141
- color: $sd-black !important;
142
+ color: base.$sd-black !important;
142
143
  }
143
144
 
144
145
  .sd-black-background {
145
- background-color: $sd-black !important;
146
+ background-color: base.$sd-black !important;
146
147
  }
147
148
 
148
149
  .field-validation-warn-color {
149
- color: $field-validation-warn-color !important;
150
+ color: base.$field-validation-warn-color !important;
150
151
  }
151
152
 
152
153
  .field-validation-warn-color-background {
153
- background-color: $field-validation-warn-color !important;
154
+ background-color: base.$field-validation-warn-color !important;
154
155
  }
155
156
 
156
157
  .field-validation-suggest-color {
157
- color: $field-validation-suggest-color !important;
158
+ color: base.$field-validation-suggest-color !important;
158
159
  }
159
160
 
160
161
  .field-validation-suggest-color-background {
161
- background-color: $field-validation-suggest-color !important;
162
+ background-color: base.$field-validation-suggest-color !important;
162
163
  }
163
164
 
164
165
  .field-validation-error-color {
165
- color: $field-validation-error-color !important;
166
+ color: base.$field-validation-error-color !important;
166
167
  }
167
168
 
168
169
  .field-validation-error-color-background {
169
- background-color: $field-validation-error-color !important;
170
+ background-color: base.$field-validation-error-color !important;
170
171
  }
package/scss/modules/_button.scss CHANGED
@@ -1,37 +1,40 @@
1
- @import "../variables/button";
2
- @import "../variables/spacing";
1
+ @forward "../variables/button";
2
+ @forward "../variables/spacing";
3
+
4
+ @use "../variables/button";
5
+ @use "../variables/spacing";
3
6
 
4
7
  .sd-button {
5
- background: $sd-button-background;
6
- color: $sd-button-color;
8
+ background: button.$sd-button-background;
9
+ color: button.$sd-button-color;
7
10
  border: none;
8
11
  outline: none;
9
- padding: 0 $sd-normal-spacing;
12
+ padding: 0 spacing.$sd-normal-spacing;
10
13
  height: 32px;
11
14
  cursor: pointer;
12
15
 
13
16
  &:hover {
14
- background: $sd-button-hover-background;
17
+ background: button.$sd-button-hover-background;
15
18
  }
16
19
  &:focus {
17
- background: $sd-button-focus-background;
20
+ background: button.$sd-button-focus-background;
18
21
  }
19
22
  &:active {
20
- background: $sd-button-active-background;
23
+ background: button.$sd-button-active-background;
21
24
  }
22
25
 
23
26
  &.primary {
24
- background: $sd-primary-button-background;
25
- color: $sd-primary-button-color;
27
+ background: button.$sd-primary-button-background;
28
+ color: button.$sd-primary-button-color;
26
29
 
27
30
  &:hover {
28
- background: $sd-primary-button-hover-background;
31
+ background: button.$sd-primary-button-hover-background;
29
32
  }
30
33
  &:focus {
31
- background: $sd-primary-button-focus-background;
34
+ background: button.$sd-primary-button-focus-background;
32
35
  }
33
36
  &:active {
34
- background: $sd-primary-button-active-background;
37
+ background: button.$sd-primary-button-active-background;
35
38
  }
36
39
  }
37
40
  }
package/scss/modules/_colors.scss CHANGED
@@ -1,9 +1,10 @@
1
- @import "../variables/colors";
1
+ @forward "../variables/colors";
2
+ @use "../variables/colors";
2
3
 
3
4
  .sd-app-background {
4
- background: $sd-app-background;
5
+ background: colors.$sd-app-background;
5
6
  }
6
7
 
7
8
  .sd-content-background {
8
- background: $sd-content-background;
9
+ background: colors.$sd-content-background;
9
10
  }
package/scss/modules/_index.scss CHANGED
@@ -1,9 +1,9 @@
1
- @import "./_app.scss";
2
- @import "./_base_colors.scss";
3
- @import "./_button.scss";
4
- @import "./_colors.scss";
5
- @import "./_link.scss";
6
- @import "./_misc.scss";
7
- @import "./_spacing.scss";
8
- @import "./_token.scss";
9
- @import "./_typography.scss";
1
+ @forward "_app";
2
+ @forward "_base_colors";
3
+ @forward "_button";
4
+ @forward "_colors";
5
+ @forward "_link";
6
+ @forward "_misc";
7
+ @forward "_spacing";
8
+ @forward "_token";
9
+ @forward "_typography";
package/scss/modules/_link.scss CHANGED
@@ -1,4 +1,5 @@
1
- @import "./typography";
1
+ @forward "typography";
2
+ @use "typography";
2
3
 
3
4
  .sd-hyperlink {
4
5
  @extend .sd-primary-text;
package/scss/modules/_misc.scss CHANGED
@@ -1,6 +1,7 @@
1
- @import "colors";
1
+ @forward "../variables/colors";
2
+ @use "../variables/colors" as colors;
2
3
 
3
4
  .sd-separator-line {
4
- background: $sd-separator-color;
5
+ background: colors.$sd-separator-color;
5
6
  height: 1px;
6
7
  }
package/scss/modules/_spacing.scss CHANGED
@@ -1,29 +1,30 @@
1
- @import "../variables/spacing";
1
+ @forward "../variables/spacing";
2
+ @use "../variables/spacing";
2
3
 
3
4
  .sd-tiny-padding {
4
- padding: $sd-tiny-spacing;
5
+ padding: spacing.$sd-tiny-spacing;
5
6
  }
6
7
  .sd-tiny-margin {
7
- margin: $sd-tiny-spacing;
8
+ margin: spacing.$sd-tiny-spacing;
8
9
  }
9
10
 
10
11
  .sd-small-padding {
11
- padding: $sd-small-spacing;
12
+ padding: spacing.$sd-small-spacing;
12
13
  }
13
14
  .sd-small-margin {
14
- margin: $sd-small-spacing;
15
+ margin: spacing.$sd-small-spacing;
15
16
  }
16
17
 
17
18
  .sd-normal-padding {
18
- padding: $sd-normal-spacing;
19
+ padding: spacing.$sd-normal-spacing;
19
20
  }
20
21
  .sd-normal-margin {
21
- margin: $sd-normal-spacing;
22
+ margin: spacing.$sd-normal-spacing;
22
23
  }
23
24
 
24
25
  .sd-large-padding {
25
- padding: $sd-large-spacing;
26
+ padding: spacing.$sd-large-spacing;
26
27
  }
27
28
  .sd-large-margin {
28
- margin: $sd-large-spacing;
29
+ margin: spacing.$sd-large-spacing;
29
30
  }
package/scss/modules/_token.scss CHANGED
@@ -1,5 +1,8 @@
1
- @import "../variables/base_colors";
2
- @import "../variables/spacing";
1
+ @forward "../variables/base_colors";
2
+ @forward "../variables/spacing";
3
+
4
+ @use "../variables/base_colors";
5
+ @use "../variables/spacing";
3
6
 
4
7
  .sd-token-container {
5
8
  display: flex;
@@ -8,9 +11,9 @@
8
11
 
9
12
  .sd-token {
10
13
  height: 28px;
11
- margin: $sd-tiny-spacing $sd-small-spacing $sd-tiny-spacing 0px;
12
- padding: 0 $sd-small-spacing;
13
- background: $sd-palegrey;
14
+ margin: spacing.$sd-tiny-spacing spacing.$sd-small-spacing spacing.$sd-tiny-spacing 0px;
15
+ padding: 0 spacing.$sd-small-spacing;
16
+ background: base_colors.$sd-palegrey;
14
17
  display: flex;
15
18
  align-items: center;
16
19
  }
package/scss/modules/_typography.scss CHANGED
@@ -1,28 +1,31 @@
1
- @import "../variables/typography";
2
- @import "../variables/spacing";
1
+ @forward "../variables/typography";
2
+ @forward "../variables/spacing";
3
+
4
+ @use "../variables/typography";
5
+ @use "../variables/spacing";
3
6
 
4
7
  .sd-primary-text {
5
- font-family: $sd-font-family;
6
- font-size: $sd-primary-font-size;
7
- color: $sd-primary-text-color;
8
+ font-family: typography.$sd-font-family;
9
+ font-size: typography.$sd-primary-font-size;
10
+ color: typography.$sd-primary-text-color;
8
11
  }
9
12
 
10
13
  .sd-secondary-text,
11
14
  .sd-field-caption {
12
- font-family: $sd-font-family;
13
- font-size: $sd-secondary-font-size;
14
- color: $sd-secondary-text-color;
15
+ font-family: typography.$sd-font-family;
16
+ font-size: typography.$sd-secondary-font-size;
17
+ color: typography.$sd-secondary-text-color;
15
18
  }
16
19
 
17
20
  .sd-heading-text {
18
- font-family: $sd-font-family-light;
19
- font-size: $sd-heading-font-size;
20
- font-weight: $sd-heading-font-weight;
21
- color: $sd-heading-text-color;
21
+ font-family: typography.$sd-font-family-light;
22
+ font-size: typography.$sd-heading-font-size;
23
+ font-weight: typography.$sd-heading-font-weight;
24
+ color: typography.$sd-heading-text-color;
22
25
  }
23
26
 
24
27
  .sd-content-heading {
25
28
  @extend .sd-heading-text;
26
29
 
27
- padding-bottom: $sd-normal-spacing;
30
+ padding-bottom: spacing.$sd-normal-spacing;
28
31
  }
package/scss/styles.scss CHANGED
@@ -1,2 +1,2 @@
1
- @import "./variables/index";
2
- @import "./modules/index";
1
+ @forward "./variables/index";
2
+ @forward "./modules/index";
package/scss/theme.scss CHANGED
@@ -1,5 +1,8 @@
1
- @import "./variables/index";
2
- @import "./modules/index";
1
+ @use "variables/index" as variables;
2
+ @use "modules/index" as modules;
3
+ @use "variables/colors";
4
+ @use "variables/field";
5
+ @use "variables/spacing";
3
6
 
4
7
  body {
5
8
  @extend .sd-web-app;
@@ -46,7 +49,7 @@ input[type="button"] {
46
49
  hr {
47
50
  @extend .sd-separator-line;
48
51
 
49
- margin: $sd-tiny-spacing 0;
52
+ margin: spacing.$sd-tiny-spacing 0;
50
53
  border: none;
51
54
  }
52
55
 
@@ -61,30 +64,30 @@ input[type="text"],
61
64
  input[type="password"],
62
65
  textarea {
63
66
  @extend .sd-primary-text;
64
- background: $sd-content-background;
67
+ background: colors.$sd-content-background;
65
68
  width: 100%;
66
69
  border: none;
67
- border-bottom: 1px solid $sd-field-underline-color;
68
- margin-bottom: $sd-small-spacing; // Give space for the underline
70
+ border-bottom: 1px solid field.$sd-field-underline-color;
71
+ margin-bottom: spacing.$sd-small-spacing; // Give space for the underline
69
72
  padding-top: 2px;
70
73
  padding-bottom: 2px + 1px; // Give space for the focus underline
71
74
 
72
75
  &:focus {
73
- border-bottom: 2px solid $sd-interaction-color;
76
+ border-bottom: 2px solid colors.$sd-interaction-color;
74
77
  outline: none;
75
78
  padding-bottom: 2px;
76
79
  }
77
80
  &:-moz-read-only {
78
- border-bottom: 1px dashed $sd-field-underline-color;
81
+ border-bottom: 1px dashed field.$sd-field-underline-color;
79
82
  padding-bottom: 2px + 1px; // Give space for the focus underline
80
83
  }
81
84
  &:read-only {
82
- border-bottom: 1px dashed $sd-field-underline-color;
85
+ border-bottom: 1px dashed field.$sd-field-underline-color;
83
86
  padding-bottom: 2px + 1px; // Give space for the focus underline
84
87
  }
85
88
  &:disabled {
86
- border-bottom: 1px dashed $sd-field-underline-color;
87
- background: $sd-content-background;
89
+ border-bottom: 1px dashed field.$sd-field-underline-color;
90
+ background: colors.$sd-content-background;
88
91
  }
89
92
  }
90
93
 
package/scss/variables/_button.scss CHANGED
@@ -1,13 +1,18 @@
1
- @import "colors";
1
+ @forward "colors";
2
+ @forward "base_colors";
2
3
 
3
- $sd-button-color: $sd-interaction-color !default;
4
+ @use "sass:color";
5
+ @use "colors";
6
+ @use "base_colors";
7
+
8
+ $sd-button-color: colors.$sd-interaction-color !default;
4
9
  $sd-button-background: rgba($sd-button-color, 0) !default; /* Transparent */
5
- $sd-button-hover-background: mix($sd-button-color, $sd-button-background, 10%);
6
- $sd-button-focus-background: mix($sd-button-color, $sd-button-background, 10%);
7
- $sd-button-active-background: mix($sd-button-color, $sd-button-background, 20%);
10
+ $sd-button-hover-background: color.mix($sd-button-color, $sd-button-background, 10%);
11
+ $sd-button-focus-background: color.mix($sd-button-color, $sd-button-background, 10%);
12
+ $sd-button-active-background: color.mix($sd-button-color, $sd-button-background, 20%);
8
13
 
9
- $sd-primary-button-color: $sd-white !default;
14
+ $sd-primary-button-color: base_colors.$sd-white !default;
10
15
  $sd-primary-button-background: $sd-button-color !default;
11
- $sd-primary-button-hover-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);
12
- $sd-primary-button-focus-background: mix($sd-primary-button-color, $sd-primary-button-background, 10%);
13
- $sd-primary-button-active-background: mix($sd-primary-button-color, $sd-primary-button-background, 20%);
16
+ $sd-primary-button-hover-background: color.mix($sd-primary-button-color, $sd-primary-button-background, 10%);
17
+ $sd-primary-button-focus-background: color.mix($sd-primary-button-color, $sd-primary-button-background, 10%);
18
+ $sd-primary-button-active-background: color.mix($sd-primary-button-color, $sd-primary-button-background, 20%);
package/scss/variables/_colors.scss CHANGED
@@ -1,6 +1,7 @@
1
- @import "./base_colors";
1
+ @forward "base_colors";
2
+ @use "base_colors";
2
3
 
3
- $sd-app-background: $sd-palegrey !default;
4
- $sd-content-background: $sd-white !default;
5
- $sd-interaction-color: $sd-blue !default;
6
- $sd-separator-color: $sd-lightgrey !default;
4
+ $sd-app-background: base_colors.$sd-palegrey !default;
5
+ $sd-content-background: base_colors.$sd-white !default;
6
+ $sd-interaction-color: base_colors.$sd-blue !default;
7
+ $sd-separator-color: base_colors.$sd-lightgrey !default;
package/scss/variables/_index.scss CHANGED
@@ -1,6 +1,5 @@
1
- @import "./_base_colors.scss";
2
- @import "./_button.scss";
3
- @import "./_colors.scss";
4
- @import "./_field.scss";
5
- @import "./_spacing.scss";
6
- @import "./_typography.scss";
1
+ @forward "_button";
2
+ @forward "_colors";
3
+ @forward "_field";
4
+ @forward "_spacing";
5
+ @forward "_typography";
package/scss/variables/_typography.scss CHANGED
@@ -1,11 +1,15 @@
1
- @import "./colors";
1
+ @forward "colors";
2
+ @forward "base_colors";
3
+
4
+ @use "colors";
5
+ @use "base_colors";
2
6
 
3
7
  $sd-font-family: "Segoe UI", "Lucida Sans", Arial, sans-serif !default;
4
8
  $sd-font-family-light: "Segoe UI Light", "Segoe UI", "Lucida Sans", Arial, sans-serif !default;
5
9
  $sd-primary-font-size: 16px !default;
6
- $sd-primary-text-color: $sd-black !default;
10
+ $sd-primary-text-color: base_colors.$sd-black !default;
7
11
  $sd-secondary-font-size: 13px !default;
8
- $sd-secondary-text-color: $sd-grey !default;
12
+ $sd-secondary-text-color: base_colors.$sd-grey !default;
9
13
  $sd-heading-font-size: 24px !default;
10
14
  $sd-heading-font-weight: lighter !default;
11
- $sd-heading-text-color: $sd-darkgrey !default;
15
+ $sd-heading-text-color: base_colors.$sd-darkgrey !default;