@3dsource/source-ui-native 1.0.19 → 1.0.20
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/fesm2022/3dsource-source-ui-native.mjs +132 -63
- package/fesm2022/3dsource-source-ui-native.mjs.map +1 -1
- package/index.d.ts +80 -13
- package/package.json +1 -1
- package/styles/base.scss +3 -4
- package/styles/elements/_src-button.scss +391 -124
- package/styles/elements/_src-checkbox.scss +21 -7
- package/styles/elements/_src-form.scss +4 -0
- package/styles/elements/_src-icon-button.scss +317 -38
- package/styles/elements/_src-input.scss +144 -32
- package/styles/elements/_src-label.scss +16 -12
- package/styles/elements/_src-list.scss +4 -4
- package/styles/elements/_src-modal.scss +4 -4
- package/styles/elements/_src-popover.scss +5 -4
- package/styles/elements/_src-radio.scss +38 -21
- package/styles/elements/_src-select.scss +151 -26
- package/styles/elements/_src-textarea.scss +140 -25
- package/styles/elements/_src-toggle.scss +36 -10
- package/styles/mixins/button.scss +93 -0
- package/styles/source.ui.native.scss +2 -4
- package/styles/typography.scss +17 -12
- package/styles/variables/_form-aliases.scss +19 -13
- package/styles/variables/color/dark.scss +143 -0
- package/styles/variables/color/light.scss +143 -0
- package/styles/variables/index.scss +29 -6
- package/styles/variables/layout/_lg.scss +85 -0
- package/styles/variables/layout/_md.scss +85 -0
- package/styles/variables/layout/_sm.scss +85 -0
- package/styles/variables/layout/_xl.scss +85 -0
- package/styles/variables/primitives/primitives.scss +147 -0
- package/styles/variables/typeface/web.scss +35 -0
- package/styles/variables/ui/_lg.scss +35 -0
- package/styles/variables/ui/_md.scss +35 -0
- package/styles/variables/ui/_sm.scss +35 -0
- package/styles/variables/ui/_xl.scss +35 -0
- package/styles/variables-legacy/index.scss +6 -0
- /package/styles/{variables → variables-legacy}/_borders.scss +0 -0
- /package/styles/{variables → variables-legacy}/_colors-aliases.scss +0 -0
- /package/styles/{variables → variables-legacy}/_colors.scss +0 -0
- /package/styles/{variables → variables-legacy}/_shadows.scss +0 -0
- /package/styles/{variables → variables-legacy}/_typography.scss +0 -0
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
$focus-ring-colors: (
|
|
3
|
+
default: var(--src-shadow-light, rgba(148, 163, 184, 0.16)),
|
|
4
|
+
info: var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16)),
|
|
5
|
+
error: var(--src-shadow-error, rgba(239, 68, 68, 0.16)),
|
|
6
|
+
success: var(--src-shadow-success, rgba(22, 163, 74, 0.12)),
|
|
7
|
+
);
|
|
8
|
+
|
|
9
|
+
@mixin focusRing($type) {
|
|
10
|
+
$color: map.get($focus-ring-colors, $type);
|
|
11
|
+
|
|
12
|
+
@if $color {
|
|
13
|
+
--srcButtonFocusRing: 0 0 0 var(--src-shadow-focused, 4px) #{$color};
|
|
14
|
+
} @else {
|
|
15
|
+
@warn "srcFocusRing: type `#{$type}` is not defined!";
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
$font-colors: (
|
|
19
|
+
white: var(--src-text-ui-primary-main, #fff),
|
|
20
|
+
white-hover: var(--src-text-ui-primary-main, #fff),
|
|
21
|
+
inverted: var(--src-text-ui-secondary-secondary-invert, #d1d5db),
|
|
22
|
+
inverted-hover: var(--src-text-ui-secondary-main-invert, #f9fafb),
|
|
23
|
+
disabled: var(--src-text-ui-secondary-disabled, #9ca3af),
|
|
24
|
+
info: var(--src-text-ui-accent-main, #016fe6),
|
|
25
|
+
error: var(--src-text-ui-distruct-main, #c5280c),
|
|
26
|
+
success: var(--src-text-ui-success-main, #16a34a),
|
|
27
|
+
info-hover: var(--src-text-ui-accent-hover, #0162cc),
|
|
28
|
+
error-hover: var(--src-text-ui-distruct-hover, #9f200a),
|
|
29
|
+
success-hover: var(--src-text-ui-success-hover, #15803d),
|
|
30
|
+
);
|
|
31
|
+
|
|
32
|
+
@mixin buttonText($type) {
|
|
33
|
+
$base-color: map.get($font-colors, $type);
|
|
34
|
+
$hover-color: map.get($font-colors, #{$type}-hover);
|
|
35
|
+
|
|
36
|
+
@if $base-color {
|
|
37
|
+
--srcButtonFontColor: #{$base-color};
|
|
38
|
+
|
|
39
|
+
@if $hover-color {
|
|
40
|
+
&:hover {
|
|
41
|
+
--srcButtonFontColor: #{$hover-color};
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
} @else {
|
|
45
|
+
@warn "srcButtonText: type `#{$type}` is not defined!";
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
@mixin cleanShadows() {
|
|
49
|
+
--srcButtonBoxShadow: none;
|
|
50
|
+
--srcButtonBorder: none;
|
|
51
|
+
--srcButtonBorderColor: transparent;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@mixin setShadow() {
|
|
55
|
+
--srcButtonBoxShadow:
|
|
56
|
+
0 -1px 0 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24)) inset,
|
|
57
|
+
0 var(--src-shadow-ambient-outer, 1px) 0 0
|
|
58
|
+
var(--src-shadow-light, rgba(148, 163, 184, 0.16));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
@mixin pressedButton($light: false) {
|
|
62
|
+
@include cleanShadows();
|
|
63
|
+
|
|
64
|
+
@if ($light) {
|
|
65
|
+
--srcButtonFontColor: var(--src-text-ui-accent-main, #016fe6);
|
|
66
|
+
--srcButtonIconColor: var(--src-icon-info, #017bff);
|
|
67
|
+
--srcButtonBgColor: var(
|
|
68
|
+
--src-ui-secondary-default,
|
|
69
|
+
rgba(148, 163, 184, 0.16)
|
|
70
|
+
);
|
|
71
|
+
} @else {
|
|
72
|
+
--srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
|
|
73
|
+
--srcButtonBgColor: var(--src-ui-accent-active, #374151);
|
|
74
|
+
--srcButtonIconColor: var(--src-icon-main-invert, #fff);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@media (pointer: fine) {
|
|
78
|
+
&:hover {
|
|
79
|
+
@if ($light) {
|
|
80
|
+
--srcButtonBgColor: var(
|
|
81
|
+
--src-ui-secondary-default-hover,
|
|
82
|
+
rgba(148, 163, 184, 0.08)
|
|
83
|
+
);
|
|
84
|
+
--srcButtonFontColor: var(--src-text-ui-accent-hover, #0162cc);
|
|
85
|
+
--srcButtonIconColor: var(--src-icon-info-hover, #016fe6);
|
|
86
|
+
} @else {
|
|
87
|
+
--srcButtonBgColor: var(--src-ui-accent-active-hover, #111827);
|
|
88
|
+
--srcButtonFontColor: var(--src-text-ui-primary-main, #fff);
|
|
89
|
+
--srcButtonIconColor: var(--src-icon-main-invert, #fff);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
// @use '@angular/material' as mat;
|
|
2
2
|
@use './fonts';
|
|
3
|
-
@use './variables/index';
|
|
3
|
+
@use './variables/index' as variables;
|
|
4
|
+
@use './variables-legacy/index' as variables-legacy;
|
|
4
5
|
@use './base';
|
|
5
6
|
@use './typography';
|
|
6
7
|
@use './utils';
|
|
7
8
|
// Elements: styles for blocks which aren't used as components: src-list/src-list__item
|
|
8
9
|
@use './elements/elements';
|
|
9
10
|
|
|
10
|
-
// TODO: remove ALL connections to Angular Material
|
|
11
|
-
// @include mat.elevation-classes();
|
|
12
|
-
// @include mat.app-background();
|
|
13
11
|
html,
|
|
14
12
|
body {
|
|
15
13
|
width: 100%;
|
package/styles/typography.scss
CHANGED
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
.src-heading-h6 {
|
|
17
17
|
margin: 0;
|
|
18
18
|
font-style: normal;
|
|
19
|
-
font-family: var(--src-font-family-
|
|
20
|
-
font-weight: var(--src-
|
|
21
|
-
|
|
19
|
+
font-family: var(--src-font-family-header);
|
|
20
|
+
font-weight: var(--src-font-weight-semiBold, 600);
|
|
21
|
+
|
|
22
22
|
text-wrap: balance;
|
|
23
23
|
}
|
|
24
24
|
|
|
@@ -67,24 +67,29 @@
|
|
|
67
67
|
|
|
68
68
|
h6,
|
|
69
69
|
.src-heading-h6 {
|
|
70
|
-
font-size: var(--src-
|
|
71
|
-
line-height: var(--src-
|
|
70
|
+
font-size: var(--src-font-size-base);
|
|
71
|
+
line-height: var(--src-font-line-base);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
body {
|
|
75
|
-
font-size: var(--src-
|
|
76
|
-
font-weight: var(--src-
|
|
77
|
-
line-height: var(--src-
|
|
75
|
+
// font-size: var(--src-font-size-sm, 14px);
|
|
76
|
+
// font-weight: var(--src-font-weight-regular, 400);
|
|
77
|
+
// line-height: var(--src-font-line-sm, 20px);
|
|
78
|
+
|
|
79
|
+
font-size: var(--src-font-size-sm, 14px);
|
|
80
|
+
font-style: normal;
|
|
81
|
+
font-weight: 400;
|
|
82
|
+
line-height: var(--font-line-sm, 20px); /* 142.857% */
|
|
78
83
|
}
|
|
79
84
|
|
|
80
85
|
body p {
|
|
81
86
|
color: var(--src-color-text-default);
|
|
82
|
-
font-size: var(--src-
|
|
83
|
-
font-weight: var(--src-
|
|
84
|
-
line-height: var(--src-
|
|
87
|
+
font-size: var(--src-font-size-sm, 14px);
|
|
88
|
+
font-weight: var(--src-font-weight-regular, 400);
|
|
89
|
+
line-height: var(--src-font-line-sm, 20px);
|
|
85
90
|
}
|
|
86
91
|
|
|
87
92
|
strong {
|
|
88
|
-
font-weight: var(--src-
|
|
93
|
+
font-weight: var(--src-font-weight-medium, 500);
|
|
89
94
|
}
|
|
90
95
|
}
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--
|
|
3
|
-
--
|
|
4
|
-
--
|
|
2
|
+
// --srcFormElementFontColor: var(--src-text-ui-secondary-main, #111827);
|
|
3
|
+
// --srcFormElementDisabledFontColor: var(
|
|
4
|
+
// --src-text-ui-secondary-secondary,
|
|
5
|
+
// #4b5563
|
|
6
|
+
// );
|
|
7
|
+
// --srcFormElementBg: var(--src-surface-container-main, #fff);
|
|
8
|
+
// --srcFormElementDisabledBg: var(
|
|
9
|
+
// --src-ui-input-disabled,
|
|
10
|
+
// rgba(148, 163, 184, 0.16)
|
|
11
|
+
// );
|
|
12
|
+
// --srcFormElementBorderColor: var(--src-border-input-basic, #d1d5db);
|
|
13
|
+
// --srcFormElementDisabledBorderColor: transparent;
|
|
14
|
+
// --srcFormElementFocusRing: 0px 0px 0px var(--src-shadow-focused, 4px)
|
|
15
|
+
// var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
|
|
5
16
|
|
|
6
|
-
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--srcFormElementBorderRadius: var(--src-br-small);
|
|
12
|
-
--srcFormElementBoxShadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
|
|
13
|
-
// Focus ring it's a multiple box-shadow
|
|
14
|
-
--srcFormElementFocusRing:
|
|
15
|
-
0 0 0 1px #fff, 0 0 0 3px var(--src-color-border-primary);
|
|
17
|
+
// // Sizing: sm, md, lg, xl
|
|
18
|
+
// --srcFormElementFontSize: var(--src-text-fontSize, 12px);
|
|
19
|
+
// --srcFormElementLineHeight: var(--src-text-lineHeight, 16px);
|
|
20
|
+
// --srcFormElementHeight: 36px;
|
|
21
|
+
// --srcFormElementBorderRadius: var(--src-border-rounded, 4px);
|
|
16
22
|
}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/* color - dark */
|
|
2
|
+
:root {
|
|
3
|
+
--src-surface-background: var(--src-color-grey-900);
|
|
4
|
+
--src-ui-accent-default: var(--src-color-accent-400);
|
|
5
|
+
--src-ui-accent-default-hover: var(--src-color-accent-500);
|
|
6
|
+
--src-ui-accent-disabled: var(--src-color-alpha-white-50);
|
|
7
|
+
--src-ui-accent-success: var(--src-color-green-600);
|
|
8
|
+
--src-ui-accent-success-hover: var(--src-color-green-500);
|
|
9
|
+
--src-ui-accent-error: var(--src-color-red-600);
|
|
10
|
+
--src-ui-accent-error-hover: var(--src-color-red-500);
|
|
11
|
+
--src-ui-accent-active: var(--src-color-grey-200);
|
|
12
|
+
--src-ui-accent-active-hover: var(--src-color-grey-50);
|
|
13
|
+
--src-ui-secondary-default: var(--src-color-alpha-white-50);
|
|
14
|
+
--src-ui-secondary-default-hover: var(--src-color-alpha-default-100);
|
|
15
|
+
--src-ui-secondary-disabled: var(--src-color-alpha-default-100);
|
|
16
|
+
--src-ui-secondary-active: var(--src-color-alpha-accent-100);
|
|
17
|
+
--src-ui-secondary-info: var(--src-color-alpha-accent-200);
|
|
18
|
+
--src-ui-secondary-info-hover: var(--src-color-alpha-accent-100);
|
|
19
|
+
--src-ui-secondary-success: var(--src-color-alpha-success-200);
|
|
20
|
+
--src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
|
|
21
|
+
--src-ui-secondary-error: var(--src-color-alpha-destruct-200);
|
|
22
|
+
--src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
|
|
23
|
+
--src-ui-secondary-progress: var(--color-alpha-progress-10);
|
|
24
|
+
--src-ui-input-default: var(--src-color-alpha-white-10);
|
|
25
|
+
--src-ui-input-secondary: var(--src-color-alpha-default-200);
|
|
26
|
+
--src-ui-input-hover: var(--src-color-alpha-default-200);
|
|
27
|
+
--src-ui-input-disabled: var(--src-color-alpha-default-200);
|
|
28
|
+
--src-ui-input-success: var(--src-color-alpha-white-10);
|
|
29
|
+
--src-ui-input-success-hover: var(--src-color-alpha-success-50);
|
|
30
|
+
--src-ui-input-error: var(--src-color-alpha-white-10);
|
|
31
|
+
--src-ui-input-error-hover: var(--src-color-alpha-destruct-50);
|
|
32
|
+
--src-surface-curtain: var(--src-color-alpha-default-600);
|
|
33
|
+
--src-surface-bg: var(--src-color-alpha-white-50);
|
|
34
|
+
--src-border-button-basic: var(--src-color-grey-600);
|
|
35
|
+
--src-border-button-basic-hover: var(--src-color-grey-500);
|
|
36
|
+
--src-border-button-info: var(--src-color-accent-500);
|
|
37
|
+
--src-border-button-info-hover: var(--src-color-accent-400);
|
|
38
|
+
--src-border-button-success: var(--src-color-green-700);
|
|
39
|
+
--src-border-button-success-hover: var(--src-color-green-600);
|
|
40
|
+
--src-border-button-error: var(--src-color-red-500);
|
|
41
|
+
--src-border-button-error-hover: var(--src-color-red-600);
|
|
42
|
+
--src-border-button-disabled: var(--src-color-grey-800);
|
|
43
|
+
--src-border-input-basic: var(--src-color-grey-700);
|
|
44
|
+
--src-border-input-hover: var(--src-color-grey-500);
|
|
45
|
+
--src-border-input-filled: var(--src-color-grey-700);
|
|
46
|
+
--src-border-input-active: var(--src-color-accent-500);
|
|
47
|
+
--src-border-input-success: var(--src-color-green-600);
|
|
48
|
+
--src-border-input-success-hover: var(--src-color-green-400);
|
|
49
|
+
--src-border-input-error: var(--src-color-red-700);
|
|
50
|
+
--src-border-input-error-hover: var(--src-color-red-700);
|
|
51
|
+
--src-border-container-basic: var(--src-color-grey-800);
|
|
52
|
+
--src-border-container-hover: var(--src-color-grey-600);
|
|
53
|
+
--src-border-container-light: var(--src-color-alpha-white-50);
|
|
54
|
+
--src-border-container-active: var(--src-color-accent-500);
|
|
55
|
+
--src-border-container-success: var(--src-color-green-800);
|
|
56
|
+
--src-border-container-error: var(--src-color-red-800);
|
|
57
|
+
--src-text-body-main: var(--src-color-grey-50);
|
|
58
|
+
--src-text-body-secondary: var(--src-color-grey-300);
|
|
59
|
+
--src-text-body-grey: var(--src-color-grey-400);
|
|
60
|
+
--src-text-body-lable: var(--src-color-grey-300);
|
|
61
|
+
--src-text-body-disabled: var(--src-color-grey-500);
|
|
62
|
+
--src-text-body-main-invert: var(--src-color-grey-900);
|
|
63
|
+
--src-text-body-secondary-invert: var(--src-color-grey-600);
|
|
64
|
+
--src-icon-default: var(--src-color-grey-200);
|
|
65
|
+
--src-icon-label: var(--src-color-grey-400);
|
|
66
|
+
--src-icon-hover: var(--src-color-grey-50);
|
|
67
|
+
--src-icon-grey: var(--src-color-grey-400);
|
|
68
|
+
--src-icon-disabled: var(--src-color-grey-600);
|
|
69
|
+
--src-icon-main-invert: var(--src-light);
|
|
70
|
+
--src-icon-secondary-invert: var(--src-color-grey-200);
|
|
71
|
+
--src-icon-info: var(--src-color-accent-500);
|
|
72
|
+
--src-icon-info-hover: var(--src-color-accent-400);
|
|
73
|
+
--src-icon-success: var(--src-color-green-500);
|
|
74
|
+
--src-icon-success-hover: var(--src-color-green-400);
|
|
75
|
+
--src-icon-error: var(--src-color-red-400);
|
|
76
|
+
--src-icon-error-hover: var(--src-color-red-300);
|
|
77
|
+
--src-icon-progress: var(--src-color-orange-400);
|
|
78
|
+
--src-graphics-positive: var(--color-green-400);
|
|
79
|
+
--src-graphics-negative: var(--src-color-red-400);
|
|
80
|
+
--src-graphics-accent: var(--src-color-accent-500);
|
|
81
|
+
--src-graphics-dark-grey: var(--src-color-grey-400);
|
|
82
|
+
--src-graphics-orange: rgba(255, 185, 45, 1);
|
|
83
|
+
--src-graphics-yellow: rgba(240, 228, 66, 1);
|
|
84
|
+
--src-graphics-turquoise: rgba(0, 206, 209, 1);
|
|
85
|
+
--src-graphics-brown: rgba(139, 69, 19, 1);
|
|
86
|
+
--src-graphics-black: var(--src-color-grey-200);
|
|
87
|
+
--src-text-body-accent: var(--src-color-accent-400);
|
|
88
|
+
--src-text-body-success: var(--src-color-green-400);
|
|
89
|
+
--src-text-body-destruct: var(--src-color-red-400);
|
|
90
|
+
--src-text-body-progress: var(--src-color-orange-400);
|
|
91
|
+
--src-text-ui-primary-main: var(--src-light);
|
|
92
|
+
--src-text-ui-primary-secondary: var(--src-color-grey-200);
|
|
93
|
+
--src-text-ui-primary-disabled: var(--src-color-grey-400);
|
|
94
|
+
--src-text-ui-primary-main-invert: var(--src-color-grey-900);
|
|
95
|
+
--src-text-ui-primary-secondary-invert: var(--src-color-grey-700);
|
|
96
|
+
--src-text-ui-secondary-main: var(--src-color-grey-50);
|
|
97
|
+
--src-text-ui-secondary-secondary: var(--src-color-grey-200);
|
|
98
|
+
--src-text-ui-secondary-grey: var(--src-color-grey-400);
|
|
99
|
+
--src-text-ui-secondary-disabled: var(--src-color-grey-500);
|
|
100
|
+
--src-text-ui-secondary-main-invert: var(--src-color-grey-900);
|
|
101
|
+
--src-text-ui-secondary-secondary-invert: var(--src-color-grey-600);
|
|
102
|
+
--src-shadow-hard: var(--src-color-alpha-dark-100);
|
|
103
|
+
--src-shadow-light: var(--src-color-alpha-dark-50);
|
|
104
|
+
--src-shadow-accent-light: var(--src-color-alpha-accent-300);
|
|
105
|
+
--src-shadow-accent-hard: var(--src-color-alpha-accent-400);
|
|
106
|
+
--src-shadow-success: var(--src-color-alpha-success-200);
|
|
107
|
+
--src-shadow-success-hover: var(--src-color-alpha-success-50);
|
|
108
|
+
--src-shadow-error: var(--src-color-alpha-destruct-200);
|
|
109
|
+
--src-shadow-error-hover: var(--src-color-alpha-destruct-100);
|
|
110
|
+
--src-text-ui-accent-main: var(--src-color-accent-400);
|
|
111
|
+
--src-text-ui-accent-hover: var(--src-color-accent-300);
|
|
112
|
+
--src-text-ui-success-main: var(--src-color-green-400);
|
|
113
|
+
--src-text-ui-success-hover: var(--src-color-green-300);
|
|
114
|
+
--src-text-ui-distruct-main: var(--src-color-red-400);
|
|
115
|
+
--src-text-ui-distruct-hover: var(--src-color-red-300);
|
|
116
|
+
--src-surface-container-main: var(--src-color-grey-800);
|
|
117
|
+
--src-surface-container-on-top: var(--src-color-alpha-white-10);
|
|
118
|
+
--src-surface-container-secondary: var(--color-basic-black);
|
|
119
|
+
--src-surface-container-info: var(--color-blue-950);
|
|
120
|
+
--src-surface-container-success: var(--src-color-green-950);
|
|
121
|
+
--src-surface-container-error: var(--src-color-red-950);
|
|
122
|
+
--src-surface-toast-basic: var(--src-color-alpha-default-200);
|
|
123
|
+
--src-surface-toast-info: var(--src-color-accent-400);
|
|
124
|
+
--src-surface-toast-success: var(--src-color-green-400);
|
|
125
|
+
--src-surface-toast-error: var(--src-color-red-400);
|
|
126
|
+
--src-border-infoPrompt-basic: var(--src-color-grey-800);
|
|
127
|
+
--src-border-infoPrompt-light: var(--src-color-alpha-white-50);
|
|
128
|
+
--src-border-infoPrompt-info: var(--src-color-accent-800);
|
|
129
|
+
--src-border-infoPrompt-success: var(--src-color-green-800);
|
|
130
|
+
--src-border-infoPrompt-error: var(--src-color-red-800);
|
|
131
|
+
--src-gradient-light-start: var(--src-color-alpha-dark-200);
|
|
132
|
+
--src-gradient-light-end: var(--src-color-alpha-dark-100);
|
|
133
|
+
--src-gradient-accent-light: var(--src-color-alpha-accent-300);
|
|
134
|
+
--src-gradient-accent-hard: var(--src-color-alpha-accent-400);
|
|
135
|
+
--src-gradient-success: var(--color-alpha-success-200);
|
|
136
|
+
--src-gradient-success-hover: var(--color-alpha-success-50);
|
|
137
|
+
--src-gradient-error: var(--color-alpha-destruct-200);
|
|
138
|
+
--src-gradient-error-hover: var(--color-alpha-destruct-100);
|
|
139
|
+
--src-tech-sticker: var(--src-color-orange-800);
|
|
140
|
+
--src-tech-description: var(--src-color-orange-50);
|
|
141
|
+
--src-light: rgba(255, 255, 255, 1);
|
|
142
|
+
--src-dark: rgba(255, 255, 255, 1);
|
|
143
|
+
}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/* color - light */
|
|
2
|
+
:root {
|
|
3
|
+
--src-surface-background: var(--src-color-grey-50);
|
|
4
|
+
--src-ui-accent-default: var(--src-color-accent-500);
|
|
5
|
+
--src-ui-accent-default-hover: var(--src-color-accent-600);
|
|
6
|
+
--src-ui-accent-disabled: var(--src-color-alpha-test-100);
|
|
7
|
+
--src-ui-accent-success: var(--src-color-green-500);
|
|
8
|
+
--src-ui-accent-success-hover: var(--src-color-green-600);
|
|
9
|
+
--src-ui-accent-error: var(--src-color-red-500);
|
|
10
|
+
--src-ui-accent-error-hover: var(--src-color-red-600);
|
|
11
|
+
--src-ui-accent-active: var(--src-color-grey-700);
|
|
12
|
+
--src-ui-accent-active-hover: var(--src-color-grey-900);
|
|
13
|
+
--src-ui-secondary-default: var(--src-color-alpha-default-50);
|
|
14
|
+
--src-ui-secondary-default-hover: var(--src-color-alpha-default-10);
|
|
15
|
+
--src-ui-secondary-disabled: var(--src-color-alpha-white-10);
|
|
16
|
+
--src-ui-secondary-active: var(--src-color-alpha-accent-50);
|
|
17
|
+
--src-ui-secondary-info: var(--src-color-alpha-accent-10);
|
|
18
|
+
--src-ui-secondary-info-hover: var(--src-color-alpha-accent-50);
|
|
19
|
+
--src-ui-secondary-success: var(--src-color-alpha-success-10);
|
|
20
|
+
--src-ui-secondary-success-hover: var(--src-color-alpha-success-50);
|
|
21
|
+
--src-ui-secondary-error: var(--src-color-alpha-destruct-10);
|
|
22
|
+
--src-ui-secondary-error-hover: var(--src-color-alpha-destruct-100);
|
|
23
|
+
--src-ui-secondary-progress: var(--color-alpha-progress-10);
|
|
24
|
+
--src-ui-input-default: var(--src-color-alpha-white-10);
|
|
25
|
+
--src-ui-input-secondary: var(--src-color-alpha-default-10);
|
|
26
|
+
--src-ui-input-hover: var(--src-color-alpha-accent-10);
|
|
27
|
+
--src-ui-input-disabled: var(--src-color-alpha-default-50);
|
|
28
|
+
--src-ui-input-success: var(--src-color-alpha-white-10);
|
|
29
|
+
--src-ui-input-success-hover: var(--src-color-alpha-success-10);
|
|
30
|
+
--src-ui-input-error: var(--src-color-alpha-white-10);
|
|
31
|
+
--src-ui-input-error-hover: var(--src-color-alpha-destruct-10);
|
|
32
|
+
--src-surface-curtain: var(--src-color-alpha-default-600);
|
|
33
|
+
--src-surface-bg: var(--src-color-alpha-default-200);
|
|
34
|
+
--src-border-button-basic: var(--src-color-grey-200);
|
|
35
|
+
--src-border-button-basic-hover: var(--src-color-grey-400);
|
|
36
|
+
--src-border-button-info: var(--src-color-accent-300);
|
|
37
|
+
--src-border-button-info-hover: var(--src-color-accent-500);
|
|
38
|
+
--src-border-button-success: var(--src-color-green-400);
|
|
39
|
+
--src-border-button-success-hover: var(--src-color-green-500);
|
|
40
|
+
--src-border-button-error: var(--src-color-red-300);
|
|
41
|
+
--src-border-button-error-hover: var(--src-color-red-500);
|
|
42
|
+
--src-border-button-disabled: var(--src-color-grey-200);
|
|
43
|
+
--src-border-input-basic: var(--src-color-grey-300);
|
|
44
|
+
--src-border-input-hover: var(--src-color-grey-400);
|
|
45
|
+
--src-border-input-filled: var(--src-color-grey-300);
|
|
46
|
+
--src-border-input-active: var(--src-color-accent-500);
|
|
47
|
+
--src-border-input-success: var(--src-color-green-500);
|
|
48
|
+
--src-border-input-success-hover: var(--src-color-green-600);
|
|
49
|
+
--src-border-input-error: var(--src-color-red-500);
|
|
50
|
+
--src-border-input-error-hover: var(--src-color-red-500);
|
|
51
|
+
--src-border-container-basic: var(--src-color-grey-300);
|
|
52
|
+
--src-border-container-hover: var(--src-color-grey-400);
|
|
53
|
+
--src-border-container-light: var(--src-color-alpha-default-50);
|
|
54
|
+
--src-border-container-active: var(--src-color-accent-400);
|
|
55
|
+
--src-border-container-success: var(--src-color-green-200);
|
|
56
|
+
--src-border-container-error: var(--src-color-red-200);
|
|
57
|
+
--src-text-body-main: var(--src-color-grey-900);
|
|
58
|
+
--src-text-body-secondary: var(--src-color-grey-600);
|
|
59
|
+
--src-text-body-grey: var(--src-color-grey-400);
|
|
60
|
+
--src-text-body-lable: var(--src-color-grey-500);
|
|
61
|
+
--src-text-body-disabled: var(--src-color-grey-400);
|
|
62
|
+
--src-text-body-main-invert: var(--src-color-grey-50);
|
|
63
|
+
--src-text-body-secondary-invert: var(--src-color-grey-300);
|
|
64
|
+
--src-icon-default: var(--src-color-grey-700);
|
|
65
|
+
--src-icon-label: var(--src-color-grey-500);
|
|
66
|
+
--src-icon-hover: var(--src-color-grey-900);
|
|
67
|
+
--src-icon-grey: var(--src-color-grey-400);
|
|
68
|
+
--src-icon-disabled: var(--src-color-grey-400);
|
|
69
|
+
--src-icon-main-invert: var(--src-light);
|
|
70
|
+
--src-icon-secondary-invert: var(--src-color-grey-200);
|
|
71
|
+
--src-icon-info: var(--src-color-accent-500);
|
|
72
|
+
--src-icon-info-hover: var(--src-color-accent-600);
|
|
73
|
+
--src-icon-success: var(--src-color-green-600);
|
|
74
|
+
--src-icon-success-hover: var(--src-color-green-700);
|
|
75
|
+
--src-icon-error: var(--src-color-red-500);
|
|
76
|
+
--src-icon-error-hover: var(--src-color-red-600);
|
|
77
|
+
--src-icon-progress: var(--src-color-orange-700);
|
|
78
|
+
--src-graphics-positive: var(--src-color-green-500);
|
|
79
|
+
--src-graphics-negative: var(--src-color-red-500);
|
|
80
|
+
--src-graphics-accent: var(--src-color-accent-500);
|
|
81
|
+
--src-graphics-dark-grey: var(--src-color-grey-500);
|
|
82
|
+
--src-graphics-orange: rgba(245, 168, 15, 1);
|
|
83
|
+
--src-graphics-yellow: rgba(240, 228, 66, 1);
|
|
84
|
+
--src-graphics-turquoise: rgba(0, 206, 209, 1);
|
|
85
|
+
--src-graphics-brown: rgba(139, 69, 19, 1);
|
|
86
|
+
--src-graphics-black: var(--src-color-grey-700);
|
|
87
|
+
--src-text-body-accent: var(--src-color-accent-600);
|
|
88
|
+
--src-text-body-success: var(--src-color-green-600);
|
|
89
|
+
--src-text-body-destruct: var(--src-color-red-600);
|
|
90
|
+
--src-text-body-progress: var(--src-color-orange-700);
|
|
91
|
+
--src-text-ui-primary-main: var(--src-light);
|
|
92
|
+
--src-text-ui-primary-secondary: var(--src-color-grey-200);
|
|
93
|
+
--src-text-ui-primary-disabled: var(--src-color-grey-400);
|
|
94
|
+
--src-text-ui-primary-main-invert: var(--src-color-grey-50);
|
|
95
|
+
--src-text-ui-primary-secondary-invert: var(--src-color-grey-200);
|
|
96
|
+
--src-text-ui-secondary-main: var(--src-color-grey-900);
|
|
97
|
+
--src-text-ui-secondary-secondary: var(--src-color-grey-600);
|
|
98
|
+
--src-text-ui-secondary-grey: var(--src-color-grey-400);
|
|
99
|
+
--src-text-ui-secondary-disabled: var(--src-color-grey-400);
|
|
100
|
+
--src-text-ui-secondary-main-invert: var(--src-color-grey-50);
|
|
101
|
+
--src-text-ui-secondary-secondary-invert: var(--src-color-grey-300);
|
|
102
|
+
--src-shadow-hard: var(--src-color-alpha-test-200);
|
|
103
|
+
--src-shadow-light: var(--src-color-alpha-default-50);
|
|
104
|
+
--src-shadow-accent-light: var(--src-color-alpha-accent-100);
|
|
105
|
+
--src-shadow-accent-hard: var(--src-color-alpha-accent-200);
|
|
106
|
+
--src-shadow-success: var(--src-color-alpha-success-50);
|
|
107
|
+
--src-shadow-success-hover: var(--src-color-alpha-success-200);
|
|
108
|
+
--src-shadow-error: var(--src-color-alpha-destruct-100);
|
|
109
|
+
--src-shadow-error-hover: var(--src-color-alpha-destruct-200);
|
|
110
|
+
--src-text-ui-accent-main: var(--src-color-accent-600);
|
|
111
|
+
--src-text-ui-accent-hover: var(--src-color-accent-700);
|
|
112
|
+
--src-text-ui-success-main: var(--src-color-green-600);
|
|
113
|
+
--src-text-ui-success-hover: var(--src-color-green-700);
|
|
114
|
+
--src-text-ui-distruct-main: var(--src-color-red-600);
|
|
115
|
+
--src-text-ui-distruct-hover: var(--src-color-red-700);
|
|
116
|
+
--src-surface-container-main: var(--src-light);
|
|
117
|
+
--src-surface-container-on-top: var(--src-color-alpha-default-10);
|
|
118
|
+
--src-surface-container-secondary: var(--src-color-grey-50);
|
|
119
|
+
--src-surface-container-info: var(--src-color-accent-50);
|
|
120
|
+
--src-surface-container-success: var(--src-color-green-50);
|
|
121
|
+
--src-surface-container-error: var(--src-color-red-50);
|
|
122
|
+
--src-surface-toast-basic: var(--src-color-alpha-default-50);
|
|
123
|
+
--src-surface-toast-info: var(--src-color-accent-600);
|
|
124
|
+
--src-surface-toast-success: var(--src-color-green-600);
|
|
125
|
+
--src-surface-toast-error: var(--src-color-red-500);
|
|
126
|
+
--src-border-infoPrompt-basic: var(--src-color-grey-300);
|
|
127
|
+
--src-border-infoPrompt-light: var(--src-color-alpha-default-50);
|
|
128
|
+
--src-border-infoPrompt-info: var(--src-color-accent-200);
|
|
129
|
+
--src-border-infoPrompt-success: var(--src-color-green-200);
|
|
130
|
+
--src-border-infoPrompt-error: var(--src-color-red-200);
|
|
131
|
+
--src-gradient-light-start: var(--src-color-alpha-test-100);
|
|
132
|
+
--src-gradient-light-end: var(--src-color-alpha-default-10);
|
|
133
|
+
--src-gradient-accent-light: var(--src-color-alpha-accent-10);
|
|
134
|
+
--src-gradient-accent-hard: var(--src-color-alpha-accent-50);
|
|
135
|
+
--src-gradient-success: var(--color-alpha-success-50);
|
|
136
|
+
--src-gradient-success-hover: var(--color-alpha-success-200);
|
|
137
|
+
--src-gradient-error: var(--color-alpha-destruct-100);
|
|
138
|
+
--src-gradient-error-hover: var(--color-alpha-destruct-200);
|
|
139
|
+
--src-tech-sticker: var(--src-color-orange-100);
|
|
140
|
+
--src-tech-description: var(--src-color-orange-900);
|
|
141
|
+
--src-light: rgba(255, 255, 255, 1);
|
|
142
|
+
--src-dark: rgba(0, 0, 0, 1);
|
|
143
|
+
}
|
|
@@ -1,6 +1,29 @@
|
|
|
1
|
-
@use '
|
|
2
|
-
@use '
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
@use '
|
|
6
|
-
@use '
|
|
1
|
+
@use 'primitives/primitives';
|
|
2
|
+
@use 'color/light.scss';
|
|
3
|
+
|
|
4
|
+
//@use 'color/dark.scss'; - TODO - figure out
|
|
5
|
+
@use 'typeface/web.scss';
|
|
6
|
+
@use 'ui/sm.scss' as ui-sm;
|
|
7
|
+
@use 'ui/md.scss' as ui-md;
|
|
8
|
+
@use 'ui/lg.scss' as ui-lg;
|
|
9
|
+
@use 'ui/xl.scss' as ui-xl;
|
|
10
|
+
@use 'layout/sm.scss' as layout-sm;
|
|
11
|
+
@use 'layout/md.scss' as layout-md;
|
|
12
|
+
@use 'layout/lg.scss' as layout-lg;
|
|
13
|
+
@use 'layout/xl.scss' as layout-xl;
|
|
14
|
+
@use 'form-aliases.scss' as form-aliases;
|
|
15
|
+
:root {
|
|
16
|
+
--src-icon-size: var(--src-space-5);
|
|
17
|
+
}
|
|
18
|
+
// "primitives/primitives",
|
|
19
|
+
// "color/light",
|
|
20
|
+
// "color/dark",
|
|
21
|
+
// "typeface/web",
|
|
22
|
+
// "ui/sm",
|
|
23
|
+
// "ui/md",
|
|
24
|
+
// "ui/lg",
|
|
25
|
+
// "ui/xl",
|
|
26
|
+
// "layout/sm",
|
|
27
|
+
// "layout/md",
|
|
28
|
+
// "layout/lg",
|
|
29
|
+
// "layout/xl"
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/* layout - lg */
|
|
2
|
+
:root {
|
|
3
|
+
@media (min-width: 1024px) {
|
|
4
|
+
--src-layout-padding-const-xs: var(--src-space-1);
|
|
5
|
+
--src-layout-padding-const-sm: var(--src-space-2);
|
|
6
|
+
--src-layout-padding-const-md: var(--src-space-3);
|
|
7
|
+
--src-layout-padding-const-lg: var(--src-space-4);
|
|
8
|
+
--src-layout-padding-const-xl: var(--src-space-6);
|
|
9
|
+
--src-layout-padding-const-2xl: var(--src-space-8);
|
|
10
|
+
--src-layout-padding-var-xs: var(--src-space-3);
|
|
11
|
+
--src-layout-padding-table-sm: var(--src-space-3-5);
|
|
12
|
+
--src-layout-padding-var-sm: var(--src-space-4);
|
|
13
|
+
--src-layout-padding-var-md: var(--src-space-5);
|
|
14
|
+
--src-layout-padding-var-lg: var(--src-space-6);
|
|
15
|
+
--src-layout-padding-var-xl: var(--src-space-10);
|
|
16
|
+
--src-layout-padding-var-2xl: var(--src-space-12);
|
|
17
|
+
--src-layout-gap-const-none: 0px;
|
|
18
|
+
--src-layout-gap-const-xs: var(--src-space-1);
|
|
19
|
+
--src-layout-gap-const-sm: var(--src-space-2);
|
|
20
|
+
--src-layout-gap-const-md: var(--src-space-3);
|
|
21
|
+
--src-layout-gap-const-lg: var(--src-space-4);
|
|
22
|
+
--src-layout-gap-const-xl: var(--src-space-6);
|
|
23
|
+
--src-layout-gap-const-2xl: var(--src-space-8);
|
|
24
|
+
--src-layout-gap-var-none: 0px;
|
|
25
|
+
--src-layout-gap-var-sm: var(--src-space-3);
|
|
26
|
+
--src-layout-gap-var-md: var(--src-space-4);
|
|
27
|
+
--src-layout-gap-var-lg: var(--src-space-5);
|
|
28
|
+
--src-layout-gap-var-xl: var(--src-space-11);
|
|
29
|
+
--src-layout-height-const-sm: var(--src-space-7);
|
|
30
|
+
--src-layout-height-const-md: var(--src-space-8);
|
|
31
|
+
--src-layout-height-const-lg: var(--src-space-9);
|
|
32
|
+
--src-layout-height-const-h-xl: var(--src-space-10);
|
|
33
|
+
--src-layout-height-const-h-2xl: var(--src-space-16);
|
|
34
|
+
--src-layout-height-var-xs: var(--src-space-10);
|
|
35
|
+
--src-layout-height-var-sm: var(--src-space-12);
|
|
36
|
+
--src-layout-height-var-base: var(--src-space-24);
|
|
37
|
+
--src-layout-height-var-md: var(--src-space-36);
|
|
38
|
+
--src-layout-height-var-lg: var(--src-space-28);
|
|
39
|
+
--src-layout-height-var-xl: var(--src-space-44);
|
|
40
|
+
--src-layout-radius-var-rounded-kid: var(--src-space-3);
|
|
41
|
+
--src-layout-radius-var-rounded-parent: var(--src-space-5);
|
|
42
|
+
--src-layout-radius-rounded-none: 0px;
|
|
43
|
+
--src-layout-border-border: 2px;
|
|
44
|
+
--src-layout-table-height: var(--src-space-20);
|
|
45
|
+
--src-layout-radius-const-rounded-sm: var(--src-space-1-5);
|
|
46
|
+
--src-layout-radius-const-rounded: var(--src-space-2);
|
|
47
|
+
--src-layout-radius-const-rounded-md: var(--src-space-3);
|
|
48
|
+
--src-layout-radius-const-rounded-lg: var(--src-space-4);
|
|
49
|
+
--src-layout-radius-const-rounded-xl: var(--src-space-6);
|
|
50
|
+
--src-layout-radius-const-rounded-2xl: var(--src-space-8);
|
|
51
|
+
--src-layout-radius-rounded-ui-full: 9999px;
|
|
52
|
+
--src-shadow-basic: var(--src-space-2);
|
|
53
|
+
--src-graphs-label: var(--src-space-2);
|
|
54
|
+
--src-graphs-label-var: var(--src-space-3);
|
|
55
|
+
--src-graphs-height-label-var: var(--src-space-8);
|
|
56
|
+
--src-graphs-height-label-const: var(--src-space-5);
|
|
57
|
+
--src-graphs-height-s: var(--src-space-9);
|
|
58
|
+
--screen-width: 1024px;
|
|
59
|
+
--card-width: 420px;
|
|
60
|
+
--src-typography-var-p-sm-lineHeight: var(--src-font-line-base);
|
|
61
|
+
--src-typography-var-p-sm-fontSize: var(--src-font-size-base);
|
|
62
|
+
--src-typography-var-p-sm-weight: var(--src-font-weight-medium);
|
|
63
|
+
--src-typography-var-p-md-fontSize: var(--src-font-size-lg);
|
|
64
|
+
--src-typography-var-p-md-weight: var(--src-font-weight-medium);
|
|
65
|
+
--src-typography-var-p-md-lineHeight: var(--src-font-line-lg);
|
|
66
|
+
--src-typography-var-h-sm-fontSize: var(--src-font-size-xl);
|
|
67
|
+
--src-typography-var-h-sm-weight: var(--src-font-weight-semiBold);
|
|
68
|
+
--src-typography-var-h-sm-lineHeight: var(--src-font-line-xl);
|
|
69
|
+
--src-typography-var-h-md-fontSize: var(--src-font-size-2xl);
|
|
70
|
+
--src-typography-var-h-md-weight: var(--src-font-weight-semiBold);
|
|
71
|
+
--src-typography-var-h-md-lineHeight: var(--src-font-line-2xl);
|
|
72
|
+
--src-typography-var-h-lg-fontSize: var(--src-font-size-3xl);
|
|
73
|
+
--src-typography-var-h-lg-weight: var(--src-font-weight-semiBold);
|
|
74
|
+
--src-typography-var-h-lg-lineHeight: var(--src-font-line-3xl);
|
|
75
|
+
--src-typography-var-h-xl-fontSize: 56px;
|
|
76
|
+
--src-typography-var-h-xl-weight: var(--src-font-weight-semiBold);
|
|
77
|
+
--src-typography-var-h-xl-lineHeight: 56px;
|
|
78
|
+
--src-typography-var-p-lg-fontSize: var(--src-font-size-2xl);
|
|
79
|
+
--src-typography-var-p-lg-weight: var(--src-font-weight-medium);
|
|
80
|
+
--src-typography-var-p-lg-lineHeight: var(--src-font-line-2xl);
|
|
81
|
+
// --price: String value;
|
|
82
|
+
// --price-data: String value;
|
|
83
|
+
--src-layout-table-height-2: var(--src-space-20);
|
|
84
|
+
}
|
|
85
|
+
}
|