@dialpad/dialtone-tokens 1.23.1 → 1.23.2
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/dist/android/java/tokens-dark.kt +11 -4
- package/dist/android/java/tokens-light.kt +13 -6
- package/dist/android/res/values/colors-dark.xml +11 -1
- package/dist/android/res/values/colors-light.xml +13 -3
- package/dist/android/res/values/dimens.xml +1 -4
- package/dist/css/variables-dark.css +194 -184
- package/dist/css/variables-light.css +196 -186
- package/dist/doc.json +10802 -10168
- package/dist/ios/tokens-dark.swift +11 -4
- package/dist/ios/tokens-light.swift +13 -6
- package/dist/less/variables-dark.less +194 -184
- package/dist/less/variables-light.less +196 -186
- package/dist/tokens-dark.json +11 -4
- package/dist/tokens-light.json +12 -5
- package/package.json +10 -11
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
// Do not edit directly
|
|
7
|
-
// Generated on
|
|
7
|
+
// Generated on Thu, 02 Nov 2023 22:15:52 GMT
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
import UIKit
|
|
@@ -32,6 +32,12 @@ public enum DialtoneTokensDark {
|
|
|
32
32
|
public static let dtActionColorBackgroundMutedActive = UIColor(red: 0.831, green: 0.831, blue: 0.831, alpha: 0.1607843137254902)
|
|
33
33
|
public static let dtActionColorBackgroundMutedDefault = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0)
|
|
34
34
|
public static let dtActionColorBackgroundMutedHover = UIColor(red: 0.831, green: 0.831, blue: 0.831, alpha: 0.10196078431372549)
|
|
35
|
+
public static let dtActionColorBackgroundPositiveActive = UIColor(red: 0.686, green: 1.000, blue: 0.639, alpha: 0.0784313725490196)
|
|
36
|
+
public static let dtActionColorBackgroundPositiveDefault = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0)
|
|
37
|
+
public static let dtActionColorBackgroundPositiveHover = UIColor(red: 0.475, green: 0.863, blue: 0.576, alpha: 1)
|
|
38
|
+
public static let dtActionColorBackgroundPositivePrimaryActive = UIColor(red: 0.459, green: 1.000, blue: 0.376, alpha: 1)
|
|
39
|
+
public static let dtActionColorBackgroundPositivePrimaryDefault = UIColor(red: 0.690, green: 1.000, blue: 0.639, alpha: 1)
|
|
40
|
+
public static let dtActionColorBackgroundPositivePrimaryHover = UIColor(red: 0.545, green: 1.000, blue: 0.475, alpha: 1)
|
|
35
41
|
public static let dtActionColorBorderBaseOutlinedDefault = UIColor(red: 0.671, green: 0.494, blue: 1.000, alpha: 1)
|
|
36
42
|
public static let dtActionColorBorderCriticalOutlinedDefault = UIColor(red: 1.000, green: 0.522, blue: 0.522, alpha: 1)
|
|
37
43
|
public static let dtActionColorBorderInvertedOutlinedDefault = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
|
|
@@ -54,6 +60,10 @@ public enum DialtoneTokensDark {
|
|
|
54
60
|
public static let dtActionColorForegroundMutedActive = UIColor(red: 0.761, green: 0.761, blue: 0.761, alpha: 1)
|
|
55
61
|
public static let dtActionColorForegroundMutedDefault = UIColor(red: 0.761, green: 0.761, blue: 0.761, alpha: 1)
|
|
56
62
|
public static let dtActionColorForegroundMutedHover = UIColor(red: 0.761, green: 0.761, blue: 0.761, alpha: 1)
|
|
63
|
+
public static let dtActionColorForegroundPositiveActive = UIColor(red: 0.431, green: 1.000, blue: 0.345, alpha: 1)
|
|
64
|
+
public static let dtActionColorForegroundPositiveDefault = UIColor(red: 0.690, green: 1.000, blue: 0.639, alpha: 1)
|
|
65
|
+
public static let dtActionColorForegroundPositiveHover = UIColor(red: 0.431, green: 1.000, blue: 0.345, alpha: 1)
|
|
66
|
+
public static let dtActionColorForegroundPositivePrimaryDefault = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
|
|
57
67
|
public static let dtAvatarColorBackground000 = UIColor(red: 0.878, green: 0.878, blue: 0.878, alpha: 1)
|
|
58
68
|
public static let dtAvatarColorBackground100 = UIColor(red: 0.102, green: 0.639, blue: 0.251, alpha: 1)
|
|
59
69
|
public static let dtAvatarColorBackground1000 = UIColor(red: 0.714, green: 0.812, blue: 1.000, alpha: 1)
|
|
@@ -267,7 +277,6 @@ public enum DialtoneTokensDark {
|
|
|
267
277
|
public static let dtFontSize300 = CGFloat(19.00)
|
|
268
278
|
public static let dtFontSize400 = CGFloat(27.00)
|
|
269
279
|
public static let dtFontSize500 = CGFloat(38.00)
|
|
270
|
-
public static let dtFontSizeRoot = CGFloat(10.00)
|
|
271
280
|
public static let dtFontTextCaseCapitalize = "capitalize"
|
|
272
281
|
public static let dtFontTextCaseLowercase = "lowercase"
|
|
273
282
|
public static let dtFontTextCaseNone = "none"
|
|
@@ -617,7 +626,6 @@ public enum DialtoneTokensDark {
|
|
|
617
626
|
public static let dtSize95Percent = CGFloat(95.00)
|
|
618
627
|
public static let dtSize975 = CGFloat(464.00)
|
|
619
628
|
public static let dtSize975Negative = CGFloat(-464.00)
|
|
620
|
-
public static let dtSizeBase = CGFloat(8.00)
|
|
621
629
|
public static let dtSizeBorder0 = CGFloat(0.00)
|
|
622
630
|
public static let dtSizeBorder100 = CGFloat(1.00)
|
|
623
631
|
public static let dtSizeBorder150 = CGFloat(1.50)
|
|
@@ -735,7 +743,6 @@ public enum DialtoneTokensDark {
|
|
|
735
743
|
public static let dtSpace95Percent = CGFloat(95.00)
|
|
736
744
|
public static let dtSpace975 = CGFloat(464.00)
|
|
737
745
|
public static let dtSpace975Negative = CGFloat(-464.00)
|
|
738
|
-
public static let dtSpaceBase = CGFloat(8.00)
|
|
739
746
|
public static let dtThemeColorBase = UIColor(red: 0.902, green: 0.902, blue: 0.902, alpha: 1)
|
|
740
747
|
public static let dtThemeMentionColorBackground = UIColor(red: 0.486, green: 0.322, blue: 1.000, alpha: 1)
|
|
741
748
|
public static let dtThemeMentionColorForeground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
// Do not edit directly
|
|
7
|
-
// Generated on
|
|
7
|
+
// Generated on Thu, 02 Nov 2023 22:15:52 GMT
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
import UIKit
|
|
@@ -16,9 +16,9 @@ public enum DialtoneTokensLight {
|
|
|
16
16
|
public static let dtActionColorBackgroundBasePrimaryActive = UIColor(red: 0.412, green: 0.216, blue: 1.000, alpha: 1)
|
|
17
17
|
public static let dtActionColorBackgroundBasePrimaryDefault = UIColor(red: 0.486, green: 0.322, blue: 1.000, alpha: 1)
|
|
18
18
|
public static let dtActionColorBackgroundBasePrimaryHover = UIColor(red: 0.451, green: 0.267, blue: 1.000, alpha: 1)
|
|
19
|
-
public static let dtActionColorBackgroundCriticalActive = UIColor(red: 0.925, green: 0.055, blue: 0.055, alpha: 0.
|
|
19
|
+
public static let dtActionColorBackgroundCriticalActive = UIColor(red: 0.925, green: 0.055, blue: 0.055, alpha: 0.12156862745098039)
|
|
20
20
|
public static let dtActionColorBackgroundCriticalDefault = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0)
|
|
21
|
-
public static let dtActionColorBackgroundCriticalHover = UIColor(red: 0.925, green: 0.055, blue: 0.055, alpha: 0.
|
|
21
|
+
public static let dtActionColorBackgroundCriticalHover = UIColor(red: 0.925, green: 0.055, blue: 0.055, alpha: 0.07058823529411765)
|
|
22
22
|
public static let dtActionColorBackgroundCriticalPrimaryActive = UIColor(red: 0.816, green: 0.047, blue: 0.047, alpha: 1)
|
|
23
23
|
public static let dtActionColorBackgroundCriticalPrimaryDefault = UIColor(red: 0.925, green: 0.055, blue: 0.055, alpha: 1)
|
|
24
24
|
public static let dtActionColorBackgroundCriticalPrimaryHover = UIColor(red: 0.851, green: 0.051, blue: 0.051, alpha: 1)
|
|
@@ -32,6 +32,12 @@ public enum DialtoneTokensLight {
|
|
|
32
32
|
public static let dtActionColorBackgroundMutedActive = UIColor(red: 0.133, green: 0.133, blue: 0.133, alpha: 0.1607843137254902)
|
|
33
33
|
public static let dtActionColorBackgroundMutedDefault = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0)
|
|
34
34
|
public static let dtActionColorBackgroundMutedHover = UIColor(red: 0.133, green: 0.133, blue: 0.133, alpha: 0.10196078431372549)
|
|
35
|
+
public static let dtActionColorBackgroundPositiveActive = UIColor(red: 0.102, green: 0.639, blue: 0.255, alpha: 0.0784313725490196)
|
|
36
|
+
public static let dtActionColorBackgroundPositiveDefault = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 0)
|
|
37
|
+
public static let dtActionColorBackgroundPositiveHover = UIColor(red: 0.973, green: 0.992, blue: 0.969, alpha: 1)
|
|
38
|
+
public static let dtActionColorBackgroundPositivePrimaryActive = UIColor(red: 0.086, green: 0.537, blue: 0.212, alpha: 1)
|
|
39
|
+
public static let dtActionColorBackgroundPositivePrimaryDefault = UIColor(red: 0.102, green: 0.639, blue: 0.251, alpha: 1)
|
|
40
|
+
public static let dtActionColorBackgroundPositivePrimaryHover = UIColor(red: 0.090, green: 0.576, blue: 0.227, alpha: 1)
|
|
35
41
|
public static let dtActionColorBorderBaseOutlinedDefault = UIColor(red: 0.486, green: 0.322, blue: 1.000, alpha: 1)
|
|
36
42
|
public static let dtActionColorBorderCriticalOutlinedDefault = UIColor(red: 0.925, green: 0.055, blue: 0.055, alpha: 1)
|
|
37
43
|
public static let dtActionColorBorderInvertedOutlinedDefault = UIColor(red: 0.976, green: 0.976, blue: 0.976, alpha: 1)
|
|
@@ -54,6 +60,10 @@ public enum DialtoneTokensLight {
|
|
|
54
60
|
public static let dtActionColorForegroundMutedActive = UIColor(red: 0.227, green: 0.227, blue: 0.227, alpha: 1)
|
|
55
61
|
public static let dtActionColorForegroundMutedDefault = UIColor(red: 0.227, green: 0.227, blue: 0.227, alpha: 1)
|
|
56
62
|
public static let dtActionColorForegroundMutedHover = UIColor(red: 0.227, green: 0.227, blue: 0.227, alpha: 1)
|
|
63
|
+
public static let dtActionColorForegroundPositiveActive = UIColor(red: 0.082, green: 0.525, blue: 0.208, alpha: 1)
|
|
64
|
+
public static let dtActionColorForegroundPositiveDefault = UIColor(red: 0.102, green: 0.639, blue: 0.251, alpha: 1)
|
|
65
|
+
public static let dtActionColorForegroundPositiveHover = UIColor(red: 0.082, green: 0.525, blue: 0.208, alpha: 1)
|
|
66
|
+
public static let dtActionColorForegroundPositivePrimaryDefault = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
|
|
57
67
|
public static let dtAvatarColorBackground000 = UIColor(red: 0.878, green: 0.878, blue: 0.878, alpha: 1)
|
|
58
68
|
public static let dtAvatarColorBackground100 = UIColor(red: 0.102, green: 0.639, blue: 0.251, alpha: 1)
|
|
59
69
|
public static let dtAvatarColorBackground1000 = UIColor(red: 0.714, green: 0.812, blue: 1.000, alpha: 1)
|
|
@@ -267,7 +277,6 @@ public enum DialtoneTokensLight {
|
|
|
267
277
|
public static let dtFontSize300 = CGFloat(19.00)
|
|
268
278
|
public static let dtFontSize400 = CGFloat(27.00)
|
|
269
279
|
public static let dtFontSize500 = CGFloat(38.00)
|
|
270
|
-
public static let dtFontSizeRoot = CGFloat(10.00)
|
|
271
280
|
public static let dtFontTextCaseCapitalize = "capitalize"
|
|
272
281
|
public static let dtFontTextCaseLowercase = "lowercase"
|
|
273
282
|
public static let dtFontTextCaseNone = "none"
|
|
@@ -497,7 +506,6 @@ public enum DialtoneTokensLight {
|
|
|
497
506
|
public static let dtSize95Percent = CGFloat(95.00)
|
|
498
507
|
public static let dtSize975 = CGFloat(464.00)
|
|
499
508
|
public static let dtSize975Negative = CGFloat(-464.00)
|
|
500
|
-
public static let dtSizeBase = CGFloat(8.00)
|
|
501
509
|
public static let dtSizeBorder0 = CGFloat(0.00)
|
|
502
510
|
public static let dtSizeBorder100 = CGFloat(1.00)
|
|
503
511
|
public static let dtSizeBorder150 = CGFloat(1.50)
|
|
@@ -615,7 +623,6 @@ public enum DialtoneTokensLight {
|
|
|
615
623
|
public static let dtSpace95Percent = CGFloat(95.00)
|
|
616
624
|
public static let dtSpace975 = CGFloat(464.00)
|
|
617
625
|
public static let dtSpace975Negative = CGFloat(-464.00)
|
|
618
|
-
public static let dtSpaceBase = CGFloat(8.00)
|
|
619
626
|
public static let dtThemeColorBase = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
|
|
620
627
|
public static let dtThemeMentionColorBackground = UIColor(red: 0.486, green: 0.322, blue: 1.000, alpha: 1)
|
|
621
628
|
public static let dtThemeMentionColorForeground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
|
|
@@ -1,194 +1,16 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Thu, 02 Nov 2023 22:15:52 GMT
|
|
4
4
|
|
|
5
|
-
@dt-color-neutral-white: #ffffff;
|
|
6
|
-
@dt-color-neutral-black: #000000;
|
|
7
|
-
@dt-color-neutral-transparent: transparent;
|
|
8
|
-
@dt-color-black-100: #000000;
|
|
9
|
-
@dt-color-black-200: #262626;
|
|
10
|
-
@dt-color-black-300: #3A3A3A;
|
|
11
|
-
@dt-color-black-400: #555555;
|
|
12
|
-
@dt-color-black-500: #808080;
|
|
13
|
-
@dt-color-black-600: #AAAAAA;
|
|
14
|
-
@dt-color-black-700: #C2C2C2;
|
|
15
|
-
@dt-color-black-800: #D4D4D4;
|
|
16
|
-
@dt-color-black-900: #E6E6E6;
|
|
17
|
-
@dt-color-purple-100: #10022C;
|
|
18
|
-
@dt-color-purple-200: #3A1D95;
|
|
19
|
-
@dt-color-purple-300: #7C52FF;
|
|
20
|
-
@dt-color-purple-400: #AB7EFF;
|
|
21
|
-
@dt-color-purple-500: #DAC7FF;
|
|
22
|
-
@dt-color-purple-600: #F5F0FF;
|
|
23
|
-
@dt-color-blue-100: #01326D;
|
|
24
|
-
@dt-color-blue-200: #1768C6;
|
|
25
|
-
@dt-color-blue-300: #51A0FE;
|
|
26
|
-
@dt-color-blue-400: #99C8FF;
|
|
27
|
-
@dt-color-blue-500: #EAF2FA;
|
|
28
|
-
@dt-color-magenta-100: #541A3B; // aka pink
|
|
29
|
-
@dt-color-magenta-200: #8C0E56; // aka pink
|
|
30
|
-
@dt-color-magenta-300: #F9008E; // aka pink
|
|
31
|
-
@dt-color-magenta-400: #F985C7; // aka pink
|
|
32
|
-
@dt-color-magenta-500: #FFE0F2; // aka pink
|
|
33
|
-
@dt-color-gold-100: #815008; // aka yellow
|
|
34
|
-
@dt-color-gold-200: #D28F2B; // aka yellow
|
|
35
|
-
@dt-color-gold-300: #F6AB3C; // aka yellow
|
|
36
|
-
@dt-color-gold-400: #FFDB80; // aka yellow
|
|
37
|
-
@dt-color-gold-500: #FFF4CC; // aka yellow
|
|
38
|
-
@dt-color-green-100: #124620;
|
|
39
|
-
@dt-color-green-200: #1AA340;
|
|
40
|
-
@dt-color-green-300: #45F777;
|
|
41
|
-
@dt-color-green-400: #B0FFA3;
|
|
42
|
-
@dt-color-green-500: #EDF9EB;
|
|
43
|
-
@dt-color-red-100: #5B0505;
|
|
44
|
-
@dt-color-red-200: #B70B0B;
|
|
45
|
-
@dt-color-red-300: #EC0E0E;
|
|
46
|
-
@dt-color-red-400: #FF8585;
|
|
47
|
-
@dt-color-red-500: #FFE5E6;
|
|
48
|
-
@dt-color-tan-100: #121212;
|
|
49
|
-
@dt-color-tan-200: #3F3D3C;
|
|
50
|
-
@dt-color-tan-300: #87807B;
|
|
51
|
-
@dt-color-tan-400: #CEC8C4;
|
|
52
|
-
@dt-color-tan-500: #F2F0EE;
|
|
53
|
-
@dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
|
|
54
|
-
@dt-color-brand-purple: #7C52FF;
|
|
55
|
-
@dt-color-brand-magenta: #F9008E;
|
|
56
|
-
@dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
|
|
57
|
-
@dt-color-foreground-secondary: #C2C2C2; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
|
|
58
|
-
@dt-color-foreground-tertiary: #AAAAAA; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
|
|
59
|
-
@dt-color-foreground-muted: hsl(0 0% 83.1% / 0.6);
|
|
60
|
-
@dt-color-foreground-placeholder: #AAAAAA; // Text color for placeholder text within form elements.
|
|
61
|
-
@dt-color-foreground-disabled: #AAAAAA; // Used for text paired with disabled content or components, like the form elements.
|
|
62
|
-
@dt-color-foreground-critical: #FF8585; // Expresses an error, danger, or otherwise critical state.
|
|
63
|
-
@dt-color-foreground-critical-strong: hsl(0 100% 82.1%); // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
|
|
64
|
-
@dt-color-foreground-success: #B0FFA3; // Indicates a positive state.
|
|
65
|
-
@dt-color-foreground-success-strong: hsl(112 100% 88.3%); // Indicates a strong positive state on surfaces that require a stronger contrast.
|
|
66
|
-
@dt-color-foreground-warning: #FFDB80; // Indicates information that requires user’s attention and further action may be necessary.
|
|
67
|
-
@dt-color-foreground-primary-inverted: #000000; // Primary text that sits on high-contrast surfaces or backgrounds.
|
|
68
|
-
@dt-color-foreground-secondary-inverted: #3A3A3A; // Secondary text color that sits on high-contrast surfaces or backgrounds.
|
|
69
|
-
@dt-color-foreground-tertiary-inverted: #555555; // Tertiary text color that sits on high-contrast surfaces or backgrounds.
|
|
70
|
-
@dt-color-foreground-muted-inverted: hsl(0 0% 14.9% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
|
|
71
|
-
@dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
|
|
72
|
-
@dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
|
|
73
|
-
@dt-color-foreground-critical-inverted: #EC0E0E; // Critical text that sits on high-contrast surfaces or backgrounds
|
|
74
|
-
@dt-color-foreground-critical-strong-inverted: hsl(0 88.7% 53.5%); // Critical strong text that sits on high-contrast surfaces or backgrounds
|
|
75
|
-
@dt-color-foreground-success-inverted: #1AA340; // Success text that sits on high-contrast surfaces or backgrounds
|
|
76
|
-
@dt-color-foreground-success-strong-inverted: hsl(136 59.1% 54.5%); // Success strong text that sits on high-contrast surfaces or backgrounds
|
|
77
|
-
@dt-color-foreground-warning-inverted: #815008; // Warning text that sits on high-contrast surfaces or backgrounds
|
|
78
|
-
@dt-color-link-primary: hsl(261 100% 78.2%);
|
|
79
|
-
@dt-color-link-critical: #FF8585;
|
|
80
|
-
@dt-color-link-success: #B0FFA3; // positive
|
|
81
|
-
@dt-color-link-warning: #FFDB80;
|
|
82
|
-
@dt-color-link-muted: #C2C2C2;
|
|
83
|
-
@dt-color-link-disabled: #AAAAAA;
|
|
84
|
-
@dt-color-link-primary-inverted: #7C52FF;
|
|
85
|
-
@dt-color-link-critical-inverted: #EC0E0E;
|
|
86
|
-
@dt-color-link-success-inverted: #1AA340;
|
|
87
|
-
@dt-color-link-warning-inverted: #815008;
|
|
88
|
-
@dt-color-link-muted-inverted: #3A3A3A;
|
|
89
|
-
@dt-color-link-disabled-inverted: #808080;
|
|
90
|
-
@dt-color-link-primary-hover: #DAC7FF;
|
|
91
|
-
@dt-color-link-critical-hover: #FFE5E6;
|
|
92
|
-
@dt-color-link-success-hover: #EDF9EB;
|
|
93
|
-
@dt-color-link-warning-hover: #FFF4CC;
|
|
94
|
-
@dt-color-link-muted-hover: #E6E6E6;
|
|
95
|
-
@dt-color-link-disabled-hover: #AAAAAA;
|
|
96
|
-
@dt-color-link-primary-inverted-hover: #3A1D95;
|
|
97
|
-
@dt-color-link-critical-inverted-hover: #B70B0B;
|
|
98
|
-
@dt-color-link-success-inverted-hover: hsl(136 59.1% 54.5%);
|
|
99
|
-
@dt-color-link-warning-inverted-hover: #262626;
|
|
100
|
-
@dt-color-link-muted-inverted-hover: #000000;
|
|
101
|
-
@dt-color-link-disabled-inverted-hover: #808080;
|
|
102
|
-
@dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.06); // Secondary surface as opaque background color.
|
|
103
|
-
@dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.15); // Moderate surface as opaque background color.
|
|
104
|
-
@dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.27); // Bold surface as opaque background color.
|
|
105
|
-
@dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.65); // Strong surface as opaque background color.
|
|
106
|
-
@dt-color-surface-contrast-opaque: hsl(0 0% 90.2% / 0.96); // Contrast surface as opaque background color.
|
|
107
|
-
@dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
|
|
108
|
-
@dt-color-surface-critical-opaque: hsl(0 88.7% 38% / 0.32); // Critical surface as opaque background color.
|
|
109
|
-
@dt-color-surface-critical-subtle-opaque: hsl(0 89.6% 9.41% / 0.5); // Critical subtle surface as opaque background color.
|
|
110
|
-
@dt-color-surface-warning-opaque: hsl(35.9 66% 49.6% / 0.48); // Warning surface as opaque background color
|
|
111
|
-
@dt-color-surface-warning-subtle-opaque: hsl(35.7 88.3% 13.4% / 0.5); // Warning subtle surface as opaque background color
|
|
112
|
-
@dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.26); // Success surface as opaque background color.
|
|
113
|
-
@dt-color-surface-success-subtle-opaque: hsl(136 59.1% 8.63% / 0.5); // Success subtle surface as opaque background color.
|
|
114
|
-
@dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.29); // Info surface as opaque background color.
|
|
115
|
-
@dt-color-surface-info-subtle-opaque: hsl(213 98.2% 12.9% / 0.5); // Info surface as opaque background color.
|
|
116
|
-
@dt-color-surface-primary: hsl(0 0% 12%); // Default surface color for the majority of surfaces.
|
|
117
|
-
@dt-color-surface-secondary: #262626; // For adjacent or complementary regions.
|
|
118
|
-
@dt-color-surface-moderate: #3A3A3A; // A tertiary surface level, prominent without being too overpowering.
|
|
119
|
-
@dt-color-surface-bold: #555555; // Highlight or call attention to specific areas of the interface.
|
|
120
|
-
@dt-color-surface-strong: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
|
|
121
|
-
@dt-color-surface-contrast: #E6E6E6; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
|
|
122
|
-
@dt-color-surface-critical: #5B0505; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
123
|
-
@dt-color-surface-critical-subtle: hsl(0 89.6% 9.41%); // A softer version of the Critical surface.
|
|
124
|
-
@dt-color-surface-critical-strong: #FF8585; // A contrasting critical surface, most likely paired with inverted foreground colors.
|
|
125
|
-
@dt-color-surface-warning: #815008; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
126
|
-
@dt-color-surface-warning-subtle: hsl(35.7 88.3% 13.4%); // A softer version of the default warning surface.
|
|
127
|
-
@dt-color-surface-warning-strong: #D28F2B; // A contrasting warning surface, most likely paired with inverted foreground colors.
|
|
128
|
-
@dt-color-surface-success: #124620; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
129
|
-
@dt-color-surface-success-subtle: hsl(136 59.1% 8.63%); // A softer version of the default success surface.
|
|
130
|
-
@dt-color-surface-success-strong: #B0FFA3; // A contrasting positive state surface, most likely paired with inverted foreground colors.
|
|
131
|
-
@dt-color-surface-info: #01326D; // Background surface color containing messaging or elements communicated as generally informational.
|
|
132
|
-
@dt-color-surface-info-subtle: hsl(213 98.2% 12.9%); // A softer version of the default informational surface.
|
|
133
|
-
@dt-color-surface-info-strong: #99C8FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
|
|
134
|
-
@dt-color-border-subtle: hsl(0 0% 100% / 0.14);
|
|
135
|
-
@dt-color-border-default: hsl(0 0% 100% / 0.22);
|
|
136
|
-
@dt-color-border-moderate: hsl(0 0% 100% / 0.36);
|
|
137
|
-
@dt-color-border-bold: hsl(0 0% 100% / 0.5);
|
|
138
|
-
@dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
|
|
139
|
-
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
140
|
-
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
141
|
-
@dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
|
|
142
|
-
@dt-color-border-focus: #51A0FE;
|
|
143
|
-
@dt-color-border-critical: #FF8585;
|
|
144
|
-
@dt-color-border-success: #B0FFA3;
|
|
145
|
-
@dt-color-border-warning: #FFDB80;
|
|
146
|
-
@dt-color-border-brand: #7C52FF;
|
|
147
|
-
@dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
|
|
148
|
-
@dt-color-border-accent: #F9008E;
|
|
149
|
-
@dt-color-border-critical-subtle: #B70B0B;
|
|
150
|
-
@dt-color-border-critical-strong: #FFE5E6;
|
|
151
|
-
@dt-color-border-success-subtle: #1AA340;
|
|
152
|
-
@dt-color-border-success-strong: #EDF9EB;
|
|
153
|
-
@dt-color-border-warning-subtle: #D28F2B;
|
|
154
|
-
@dt-color-border-warning-strong: hsl(47.1 100% 72%);
|
|
155
|
-
@dt-color-border-brand-subtle: #3A1D95;
|
|
156
|
-
@dt-color-border-brand-strong: #DAC7FF;
|
|
157
|
-
@dt-color-border-critical-inverted: #EC0E0E;
|
|
158
|
-
@dt-color-border-success-inverted: #1AA340;
|
|
159
|
-
@dt-color-border-warning-inverted: #D28F2B;
|
|
160
|
-
@dt-color-border-brand-inverted: #7C52FF;
|
|
161
|
-
@dt-color-border-critical-subtle-inverted: #FF8585;
|
|
162
|
-
@dt-color-border-critical-strong-inverted: #B70B0B;
|
|
163
|
-
@dt-color-border-success-subtle-inverted: #B0FFA3;
|
|
164
|
-
@dt-color-border-success-strong-inverted: #124620;
|
|
165
|
-
@dt-color-border-warning-subtle-inverted: #FFDB80;
|
|
166
|
-
@dt-color-border-warning-strong-inverted: #815008;
|
|
167
|
-
@dt-color-border-brand-subtle-inverted: #DAC7FF;
|
|
168
|
-
@dt-color-border-brand-strong-inverted: #3A1D95;
|
|
169
|
-
@dt-opacity-0: 0;
|
|
170
|
-
@dt-opacity-100: 0.05;
|
|
171
|
-
@dt-opacity-200: 0.1;
|
|
172
|
-
@dt-opacity-300: 0.2;
|
|
173
|
-
@dt-opacity-400: 0.25;
|
|
174
|
-
@dt-opacity-500: 0.3;
|
|
175
|
-
@dt-opacity-600: 0.4;
|
|
176
|
-
@dt-opacity-700: 0.5;
|
|
177
|
-
@dt-opacity-800: 0.6;
|
|
178
|
-
@dt-opacity-900: 0.7;
|
|
179
|
-
@dt-opacity-1000: 0.75;
|
|
180
|
-
@dt-opacity-1100: 0.8;
|
|
181
|
-
@dt-opacity-1200: 0.9;
|
|
182
|
-
@dt-opacity-1300: 1;
|
|
183
|
-
@dt-font-family-body: -apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
|
|
184
|
-
@dt-font-family-expressive: Archivo,-apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
|
|
185
|
-
@dt-font-family-mono: SFMono-Regular, '"SF Mono"', Consolas, '"Liberation Mono"', Menlo, Courier, monospace;
|
|
186
5
|
@dt-font-size-100: 1.2rem; // small
|
|
187
6
|
@dt-font-size-200: 1.5rem; // medium / base
|
|
188
7
|
@dt-font-size-300: 1.9rem; // large
|
|
189
8
|
@dt-font-size-400: 2.7rem; // extra large / xl
|
|
190
9
|
@dt-font-size-500: 3.8rem; // extra large / xxl
|
|
191
10
|
@dt-font-size-root: 1rem;
|
|
11
|
+
@dt-font-family-body: -apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
|
|
12
|
+
@dt-font-family-expressive: Archivo,-apple-system, BlinkMacSystemFont, '"SF Pro"', '"Segoe UI Adjusted"', '"Segoe UI"', SFMono, '"Helvetica Neue"', Cantarell, Ubuntu, Roboto, Arial, '"Noto Sans"', sans-serif, '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"';
|
|
13
|
+
@dt-font-family-mono: SFMono-Regular, '"SF Mono"', Consolas, '"Liberation Mono"', Menlo, Courier, monospace;
|
|
192
14
|
@dt-font-line-height-100: 1;
|
|
193
15
|
@dt-font-line-height-200: 1.2;
|
|
194
16
|
@dt-font-line-height-300: 1.4;
|
|
@@ -245,6 +67,7 @@
|
|
|
245
67
|
@dt-size-1130: 134rem;
|
|
246
68
|
@dt-size-1150: 153.6rem;
|
|
247
69
|
@dt-size-1200: 204.8rem;
|
|
70
|
+
@dt-size-base: 0.8rem;
|
|
248
71
|
@dt-size-50-negative: -0.05rem;
|
|
249
72
|
@dt-size-100-negative: -0.1rem;
|
|
250
73
|
@dt-size-200-negative: -0.2rem;
|
|
@@ -303,7 +126,6 @@
|
|
|
303
126
|
@dt-size-90-percent: 90%;
|
|
304
127
|
@dt-size-95-percent: 95%;
|
|
305
128
|
@dt-size-100-percent: 100%;
|
|
306
|
-
@dt-size-base: 0.8rem;
|
|
307
129
|
@dt-size-border-0: 0rem;
|
|
308
130
|
@dt-size-border-50: 0.05rem;
|
|
309
131
|
@dt-size-border-100: 0.1rem;
|
|
@@ -363,6 +185,7 @@
|
|
|
363
185
|
@dt-space-1130: 134rem;
|
|
364
186
|
@dt-space-1150: 153.6rem;
|
|
365
187
|
@dt-space-1200: 204.8rem;
|
|
188
|
+
@dt-space-base: 0.8rem;
|
|
366
189
|
@dt-space-50-negative: -0.05rem;
|
|
367
190
|
@dt-space-100-negative: -0.1rem;
|
|
368
191
|
@dt-space-200-negative: -0.2rem;
|
|
@@ -421,7 +244,184 @@
|
|
|
421
244
|
@dt-space-90-percent: 90%;
|
|
422
245
|
@dt-space-95-percent: 95%;
|
|
423
246
|
@dt-space-100-percent: 100%;
|
|
424
|
-
@dt-
|
|
247
|
+
@dt-color-neutral-white: #ffffff;
|
|
248
|
+
@dt-color-neutral-black: #000000;
|
|
249
|
+
@dt-color-neutral-transparent: transparent;
|
|
250
|
+
@dt-color-black-100: #000000;
|
|
251
|
+
@dt-color-black-200: #262626;
|
|
252
|
+
@dt-color-black-300: #3A3A3A;
|
|
253
|
+
@dt-color-black-400: #555555;
|
|
254
|
+
@dt-color-black-500: #808080;
|
|
255
|
+
@dt-color-black-600: #AAAAAA;
|
|
256
|
+
@dt-color-black-700: #C2C2C2;
|
|
257
|
+
@dt-color-black-800: #D4D4D4;
|
|
258
|
+
@dt-color-black-900: #E6E6E6;
|
|
259
|
+
@dt-color-purple-100: #10022C;
|
|
260
|
+
@dt-color-purple-200: #3A1D95;
|
|
261
|
+
@dt-color-purple-300: #7C52FF;
|
|
262
|
+
@dt-color-purple-400: #AB7EFF;
|
|
263
|
+
@dt-color-purple-500: #DAC7FF;
|
|
264
|
+
@dt-color-purple-600: #F5F0FF;
|
|
265
|
+
@dt-color-blue-100: #01326D;
|
|
266
|
+
@dt-color-blue-200: #1768C6;
|
|
267
|
+
@dt-color-blue-300: #51A0FE;
|
|
268
|
+
@dt-color-blue-400: #99C8FF;
|
|
269
|
+
@dt-color-blue-500: #EAF2FA;
|
|
270
|
+
@dt-color-magenta-100: #541A3B; // aka pink
|
|
271
|
+
@dt-color-magenta-200: #8C0E56; // aka pink
|
|
272
|
+
@dt-color-magenta-300: #F9008E; // aka pink
|
|
273
|
+
@dt-color-magenta-400: #F985C7; // aka pink
|
|
274
|
+
@dt-color-magenta-500: #FFE0F2; // aka pink
|
|
275
|
+
@dt-color-gold-100: #815008; // aka yellow
|
|
276
|
+
@dt-color-gold-200: #D28F2B; // aka yellow
|
|
277
|
+
@dt-color-gold-300: #F6AB3C; // aka yellow
|
|
278
|
+
@dt-color-gold-400: #FFDB80; // aka yellow
|
|
279
|
+
@dt-color-gold-500: #FFF4CC; // aka yellow
|
|
280
|
+
@dt-color-green-100: #124620;
|
|
281
|
+
@dt-color-green-200: #1AA340;
|
|
282
|
+
@dt-color-green-300: #45F777;
|
|
283
|
+
@dt-color-green-400: #B0FFA3;
|
|
284
|
+
@dt-color-green-500: #EDF9EB;
|
|
285
|
+
@dt-color-red-100: #5B0505;
|
|
286
|
+
@dt-color-red-200: #B70B0B;
|
|
287
|
+
@dt-color-red-300: #EC0E0E;
|
|
288
|
+
@dt-color-red-400: #FF8585;
|
|
289
|
+
@dt-color-red-500: #FFE5E6;
|
|
290
|
+
@dt-color-tan-100: #121212;
|
|
291
|
+
@dt-color-tan-200: #3F3D3C;
|
|
292
|
+
@dt-color-tan-300: #87807B;
|
|
293
|
+
@dt-color-tan-400: #CEC8C4;
|
|
294
|
+
@dt-color-tan-500: #F2F0EE;
|
|
295
|
+
@dt-color-gradient-magenta-purple: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
|
|
296
|
+
@dt-color-brand-purple: #7C52FF;
|
|
297
|
+
@dt-color-brand-magenta: #F9008E;
|
|
298
|
+
@dt-color-foreground-primary: #E6E6E6; // Default text color throughout the UI.
|
|
299
|
+
@dt-color-foreground-secondary: #C2C2C2; // Example uses include introduction paragraphs, labels, and descriptions paired with form elements.
|
|
300
|
+
@dt-color-foreground-tertiary: #AAAAAA; // Used to imply visual hierarchy relative to primary and secondary text colors, e.g. headlines and labels.
|
|
301
|
+
@dt-color-foreground-muted: hsl(0 0% 83.1% / 0.6);
|
|
302
|
+
@dt-color-foreground-placeholder: #AAAAAA; // Text color for placeholder text within form elements.
|
|
303
|
+
@dt-color-foreground-disabled: #AAAAAA; // Used for text paired with disabled content or components, like the form elements.
|
|
304
|
+
@dt-color-foreground-critical: #FF8585; // Expresses an error, danger, or otherwise critical state.
|
|
305
|
+
@dt-color-foreground-critical-strong: hsl(0 100% 82.1%); // Expresses an error, danger, or otherwise critical state on surfaces that require a stronger contrast.
|
|
306
|
+
@dt-color-foreground-success: #B0FFA3; // Indicates a positive state.
|
|
307
|
+
@dt-color-foreground-success-strong: hsl(112 100% 88.3%); // Indicates a strong positive state on surfaces that require a stronger contrast.
|
|
308
|
+
@dt-color-foreground-warning: #FFDB80; // Indicates information that requires user’s attention and further action may be necessary.
|
|
309
|
+
@dt-color-foreground-primary-inverted: #000000; // Primary text that sits on high-contrast surfaces or backgrounds.
|
|
310
|
+
@dt-color-foreground-secondary-inverted: #3A3A3A; // Secondary text color that sits on high-contrast surfaces or backgrounds.
|
|
311
|
+
@dt-color-foreground-tertiary-inverted: #555555; // Tertiary text color that sits on high-contrast surfaces or backgrounds.
|
|
312
|
+
@dt-color-foreground-muted-inverted: hsl(0 0% 14.9% / 0.6); // Muted text color that sits on high-contrast surfaces or backgrounds.
|
|
313
|
+
@dt-color-foreground-placeholder-inverted: #808080; // Placeholder text color that sits on high-contrast surfaces or backgrounds.
|
|
314
|
+
@dt-color-foreground-disabled-inverted: #808080; // Disabled text color that sits on high-contrast surfaces or backgrounds.
|
|
315
|
+
@dt-color-foreground-critical-inverted: #EC0E0E; // Critical text that sits on high-contrast surfaces or backgrounds
|
|
316
|
+
@dt-color-foreground-critical-strong-inverted: hsl(0 88.7% 53.5%); // Critical strong text that sits on high-contrast surfaces or backgrounds
|
|
317
|
+
@dt-color-foreground-success-inverted: #1AA340; // Success text that sits on high-contrast surfaces or backgrounds
|
|
318
|
+
@dt-color-foreground-success-strong-inverted: hsl(136 59.1% 54.5%); // Success strong text that sits on high-contrast surfaces or backgrounds
|
|
319
|
+
@dt-color-foreground-warning-inverted: #815008; // Warning text that sits on high-contrast surfaces or backgrounds
|
|
320
|
+
@dt-color-link-primary: hsl(261 100% 78.2%);
|
|
321
|
+
@dt-color-link-critical: #FF8585;
|
|
322
|
+
@dt-color-link-success: #B0FFA3; // positive
|
|
323
|
+
@dt-color-link-warning: #FFDB80;
|
|
324
|
+
@dt-color-link-muted: #C2C2C2;
|
|
325
|
+
@dt-color-link-disabled: #AAAAAA;
|
|
326
|
+
@dt-color-link-primary-inverted: #7C52FF;
|
|
327
|
+
@dt-color-link-critical-inverted: #EC0E0E;
|
|
328
|
+
@dt-color-link-success-inverted: #1AA340;
|
|
329
|
+
@dt-color-link-warning-inverted: #815008;
|
|
330
|
+
@dt-color-link-muted-inverted: #3A3A3A;
|
|
331
|
+
@dt-color-link-disabled-inverted: #808080;
|
|
332
|
+
@dt-color-link-primary-hover: #DAC7FF;
|
|
333
|
+
@dt-color-link-critical-hover: #FFE5E6;
|
|
334
|
+
@dt-color-link-success-hover: #EDF9EB;
|
|
335
|
+
@dt-color-link-warning-hover: #FFF4CC;
|
|
336
|
+
@dt-color-link-muted-hover: #E6E6E6;
|
|
337
|
+
@dt-color-link-disabled-hover: #AAAAAA;
|
|
338
|
+
@dt-color-link-primary-inverted-hover: #3A1D95;
|
|
339
|
+
@dt-color-link-critical-inverted-hover: #B70B0B;
|
|
340
|
+
@dt-color-link-success-inverted-hover: hsl(136 59.1% 54.5%);
|
|
341
|
+
@dt-color-link-warning-inverted-hover: #262626;
|
|
342
|
+
@dt-color-link-muted-inverted-hover: #000000;
|
|
343
|
+
@dt-color-link-disabled-inverted-hover: #808080;
|
|
344
|
+
@dt-color-surface-secondary-opaque: hsl(0 0% 90.2% / 0.06); // Secondary surface as opaque background color.
|
|
345
|
+
@dt-color-surface-moderate-opaque: hsl(0 0% 90.2% / 0.15); // Moderate surface as opaque background color.
|
|
346
|
+
@dt-color-surface-bold-opaque: hsl(0 0% 90.2% / 0.27); // Bold surface as opaque background color.
|
|
347
|
+
@dt-color-surface-strong-opaque: hsl(0 0% 90.2% / 0.65); // Strong surface as opaque background color.
|
|
348
|
+
@dt-color-surface-contrast-opaque: hsl(0 0% 90.2% / 0.96); // Contrast surface as opaque background color.
|
|
349
|
+
@dt-color-surface-backdrop: hsl(0 0% 0% / 0.7); // Background color for a modal-like backdrop.
|
|
350
|
+
@dt-color-surface-critical-opaque: hsl(0 88.7% 38% / 0.32); // Critical surface as opaque background color.
|
|
351
|
+
@dt-color-surface-critical-subtle-opaque: hsl(0 89.6% 9.41% / 0.5); // Critical subtle surface as opaque background color.
|
|
352
|
+
@dt-color-surface-warning-opaque: hsl(35.9 66% 49.6% / 0.48); // Warning surface as opaque background color
|
|
353
|
+
@dt-color-surface-warning-subtle-opaque: hsl(35.7 88.3% 13.4% / 0.5); // Warning subtle surface as opaque background color
|
|
354
|
+
@dt-color-surface-success-opaque: hsl(137 72.5% 37.1% / 0.26); // Success surface as opaque background color.
|
|
355
|
+
@dt-color-surface-success-subtle-opaque: hsl(136 59.1% 8.63% / 0.5); // Success subtle surface as opaque background color.
|
|
356
|
+
@dt-color-surface-info-opaque: hsl(212 79.2% 43.3% / 0.29); // Info surface as opaque background color.
|
|
357
|
+
@dt-color-surface-info-subtle-opaque: hsl(213 98.2% 12.9% / 0.5); // Info surface as opaque background color.
|
|
358
|
+
@dt-color-surface-primary: hsl(0 0% 12%); // Default surface color for the majority of surfaces.
|
|
359
|
+
@dt-color-surface-secondary: #262626; // For adjacent or complementary regions.
|
|
360
|
+
@dt-color-surface-moderate: #3A3A3A; // A tertiary surface level, prominent without being too overpowering.
|
|
361
|
+
@dt-color-surface-bold: #555555; // Highlight or call attention to specific areas of the interface.
|
|
362
|
+
@dt-color-surface-strong: #AAAAAA; // Use sparingly to draw the eye to a relatively important region.
|
|
363
|
+
@dt-color-surface-contrast: #E6E6E6; // An inverted surface for lightened content and elements, most likely paired with inverted foreground colors.
|
|
364
|
+
@dt-color-surface-critical: #5B0505; // Background surface color containing error, danger, or otherwise critical messaging or elements.
|
|
365
|
+
@dt-color-surface-critical-subtle: hsl(0 89.6% 9.41%); // A softer version of the Critical surface.
|
|
366
|
+
@dt-color-surface-critical-strong: #FF8585; // A contrasting critical surface, most likely paired with inverted foreground colors.
|
|
367
|
+
@dt-color-surface-warning: #815008; // Background surface color highlighting messaging or elements that may require user's attention.
|
|
368
|
+
@dt-color-surface-warning-subtle: hsl(35.7 88.3% 13.4%); // A softer version of the default warning surface.
|
|
369
|
+
@dt-color-surface-warning-strong: #D28F2B; // A contrasting warning surface, most likely paired with inverted foreground colors.
|
|
370
|
+
@dt-color-surface-success: #124620; // Background surface color containing messaging or elements expressing a positive or successful state.
|
|
371
|
+
@dt-color-surface-success-subtle: hsl(136 59.1% 8.63%); // A softer version of the default success surface.
|
|
372
|
+
@dt-color-surface-success-strong: #B0FFA3; // A contrasting positive state surface, most likely paired with inverted foreground colors.
|
|
373
|
+
@dt-color-surface-info: #01326D; // Background surface color containing messaging or elements communicated as generally informational.
|
|
374
|
+
@dt-color-surface-info-subtle: hsl(213 98.2% 12.9%); // A softer version of the default informational surface.
|
|
375
|
+
@dt-color-surface-info-strong: #99C8FF; // A contrasting informational surface, most likely paired with inverted foreground colors.
|
|
376
|
+
@dt-color-border-subtle: hsl(0 0% 100% / 0.14);
|
|
377
|
+
@dt-color-border-default: hsl(0 0% 100% / 0.22);
|
|
378
|
+
@dt-color-border-moderate: hsl(0 0% 100% / 0.36);
|
|
379
|
+
@dt-color-border-bold: hsl(0 0% 100% / 0.5);
|
|
380
|
+
@dt-color-border-subtle-inverted: hsl(0 0% 0% / 0.1);
|
|
381
|
+
@dt-color-border-default-inverted: hsl(0 0% 0% / 0.18);
|
|
382
|
+
@dt-color-border-moderate-inverted: hsl(0 0% 0% / 0.34);
|
|
383
|
+
@dt-color-border-bold-inverted: hsl(0 0% 0% / 0.5);
|
|
384
|
+
@dt-color-border-focus: #51A0FE;
|
|
385
|
+
@dt-color-border-critical: #FF8585;
|
|
386
|
+
@dt-color-border-success: #B0FFA3;
|
|
387
|
+
@dt-color-border-warning: #FFDB80;
|
|
388
|
+
@dt-color-border-brand: #7C52FF;
|
|
389
|
+
@dt-color-border-ai: linear-gradient(135deg, #F9008E 10%, #7C52FF 90%);
|
|
390
|
+
@dt-color-border-accent: #F9008E;
|
|
391
|
+
@dt-color-border-critical-subtle: #B70B0B;
|
|
392
|
+
@dt-color-border-critical-strong: #FFE5E6;
|
|
393
|
+
@dt-color-border-success-subtle: #1AA340;
|
|
394
|
+
@dt-color-border-success-strong: #EDF9EB;
|
|
395
|
+
@dt-color-border-warning-subtle: #D28F2B;
|
|
396
|
+
@dt-color-border-warning-strong: hsl(47.1 100% 72%);
|
|
397
|
+
@dt-color-border-brand-subtle: #3A1D95;
|
|
398
|
+
@dt-color-border-brand-strong: #DAC7FF;
|
|
399
|
+
@dt-color-border-critical-inverted: #EC0E0E;
|
|
400
|
+
@dt-color-border-success-inverted: #1AA340;
|
|
401
|
+
@dt-color-border-warning-inverted: #D28F2B;
|
|
402
|
+
@dt-color-border-brand-inverted: #7C52FF;
|
|
403
|
+
@dt-color-border-critical-subtle-inverted: #FF8585;
|
|
404
|
+
@dt-color-border-critical-strong-inverted: #B70B0B;
|
|
405
|
+
@dt-color-border-success-subtle-inverted: #B0FFA3;
|
|
406
|
+
@dt-color-border-success-strong-inverted: #124620;
|
|
407
|
+
@dt-color-border-warning-subtle-inverted: #FFDB80;
|
|
408
|
+
@dt-color-border-warning-strong-inverted: #815008;
|
|
409
|
+
@dt-color-border-brand-subtle-inverted: #DAC7FF;
|
|
410
|
+
@dt-color-border-brand-strong-inverted: #3A1D95;
|
|
411
|
+
@dt-opacity-0: 0;
|
|
412
|
+
@dt-opacity-100: .05;
|
|
413
|
+
@dt-opacity-200: .1;
|
|
414
|
+
@dt-opacity-300: .2;
|
|
415
|
+
@dt-opacity-400: .25;
|
|
416
|
+
@dt-opacity-500: .3;
|
|
417
|
+
@dt-opacity-600: .4;
|
|
418
|
+
@dt-opacity-700: .5;
|
|
419
|
+
@dt-opacity-800: .6;
|
|
420
|
+
@dt-opacity-900: .7;
|
|
421
|
+
@dt-opacity-1000: .75;
|
|
422
|
+
@dt-opacity-1100: .8;
|
|
423
|
+
@dt-opacity-1200: .9;
|
|
424
|
+
@dt-opacity-1300: 1;
|
|
425
425
|
@dt-shadow-small-1-x: 0rem;
|
|
426
426
|
@dt-shadow-small-1-y: 0.2rem;
|
|
427
427
|
@dt-shadow-small-1-blur: 0.4rem;
|
|
@@ -780,6 +780,10 @@
|
|
|
780
780
|
@dt-action-color-foreground-muted-hover: #C2C2C2;
|
|
781
781
|
@dt-action-color-foreground-muted-active: #C2C2C2;
|
|
782
782
|
@dt-action-color-foreground-disabled-default: #AAAAAA;
|
|
783
|
+
@dt-action-color-foreground-positive-default: #B0FFA3;
|
|
784
|
+
@dt-action-color-foreground-positive-hover: hsl(112 100% 67.2%);
|
|
785
|
+
@dt-action-color-foreground-positive-active: hsl(112 100% 67.2%);
|
|
786
|
+
@dt-action-color-foreground-positive-primary-default: #ffffff;
|
|
783
787
|
@dt-action-color-background-base-default: transparent;
|
|
784
788
|
@dt-action-color-background-base-hover: hsl(261 100% 74.7% / 0.1);
|
|
785
789
|
@dt-action-color-background-base-active: hsl(261 100% 74.7% / 0.2);
|
|
@@ -802,6 +806,12 @@
|
|
|
802
806
|
@dt-action-color-background-muted-hover: hsl(0 0% 83.1% / 0.1);
|
|
803
807
|
@dt-action-color-background-muted-active: hsl(0 0% 83.1% / 0.16);
|
|
804
808
|
@dt-action-color-background-disabled-default: #3A3A3A;
|
|
809
|
+
@dt-action-color-background-positive-default: transparent;
|
|
810
|
+
@dt-action-color-background-positive-hover: hsl(136 59.1% 66.9%);
|
|
811
|
+
@dt-action-color-background-positive-active: hsl(112 100% 82% / 0.08);
|
|
812
|
+
@dt-action-color-background-positive-primary-default: #B0FFA3;
|
|
813
|
+
@dt-action-color-background-positive-primary-hover: hsl(112 100% 73.8%);
|
|
814
|
+
@dt-action-color-background-positive-primary-active: hsl(112 100% 68.8%);
|
|
805
815
|
@dt-action-color-border-base-outlined-default: #AB7EFF;
|
|
806
816
|
@dt-action-color-border-critical-outlined-default: #FF8585;
|
|
807
817
|
@dt-action-color-border-inverted-outlined-default: #000000;
|