@daikin-oss/dds-tokens 0.2.0 → 0.3.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.
- package/CHANGELOG.md +16 -0
- package/build/css/aaf/Dark/variables.css +29 -88
- package/build/css/aaf/Light/variables.css +29 -88
- package/build/css/daikin/Dark/variables.css +71 -103
- package/build/css/daikin/Light/variables.css +35 -108
- package/build/js/aaf/Dark/variables.cjs +28 -87
- package/build/js/aaf/Dark/variables.d.cts +28 -107
- package/build/js/aaf/Dark/variables.d.ts +28 -107
- package/build/js/aaf/Dark/variables.js +29 -88
- package/build/js/aaf/Light/variables.cjs +28 -87
- package/build/js/aaf/Light/variables.d.cts +28 -107
- package/build/js/aaf/Light/variables.d.ts +28 -107
- package/build/js/aaf/Light/variables.js +29 -88
- package/build/js/daikin/Dark/variables.cjs +70 -102
- package/build/js/daikin/Dark/variables.d.cts +70 -123
- package/build/js/daikin/Dark/variables.d.ts +70 -123
- package/build/js/daikin/Dark/variables.js +71 -103
- package/build/js/daikin/Light/variables.cjs +34 -107
- package/build/js/daikin/Light/variables.d.cts +33 -127
- package/build/js/daikin/Light/variables.d.ts +33 -127
- package/build/js/daikin/Light/variables.js +35 -108
- package/build/json/aaf/Dark/tokens.json +60 -296
- package/build/json/aaf/Light/tokens.json +60 -296
- package/build/json/daikin/Dark/tokens.json +220 -348
- package/build/json/daikin/Light/tokens.json +81 -373
- package/build/scss/aaf/Dark/_mixins.scss +29 -88
- package/build/scss/aaf/Light/_mixins.scss +29 -88
- package/build/scss/daikin/Dark/_mixins.scss +71 -103
- package/build/scss/daikin/Light/_mixins.scss +35 -108
- package/package.json +1 -1
- package/themes/aaf/dark/component.json +1 -113
- package/themes/aaf/dark/system.json +1 -49
- package/themes/aaf/light/component.json +1 -113
- package/themes/aaf/light/system.json +1 -49
- package/themes/component.json +1 -184
- package/themes/dkn/dark/component.json +17 -178
- package/themes/dkn/dark/system.json +142 -55
- package/themes/dkn/light/component.json +17 -228
- package/themes/dkn/light/system.json +0 -73
- package/themes/reference.json +181 -200
- package/themes/system.json +1 -31
- package/build/css/aaf/Dark/buttons.css +0 -22
- package/build/css/aaf/Light/buttons.css +0 -22
- package/build/css/daikin/Dark/buttons.css +0 -22
- package/build/css/daikin/Light/buttons.css +0 -22
|
@@ -62,12 +62,6 @@ export const colorRed90 = "#9a0911";
|
|
|
62
62
|
export const colorRed100 = "#7b070e";
|
|
63
63
|
export const colorRed110 = "#5d050a";
|
|
64
64
|
export const colorRed120 = "#3e0307";
|
|
65
|
-
export const colorRedAaf100 = "#fcecea";
|
|
66
|
-
export const colorRedAaf200 = "#f5c0b8";
|
|
67
|
-
export const colorRedAaf300 = "#f8aeba";
|
|
68
|
-
export const colorRedAaf400 = "#db4f66";
|
|
69
|
-
export const colorRedAaf500 = "#d2324c";
|
|
70
|
-
export const colorRedAaf600 = "#c8102e";
|
|
71
65
|
export const colorGray10 = "#f2f2f2";
|
|
72
66
|
export const colorGray20 = "#ebebeb";
|
|
73
67
|
export const colorGray30 = "#dcdcdc";
|
|
@@ -82,8 +76,6 @@ export const colorGray110 = "#313131";
|
|
|
82
76
|
export const colorGray120 = "#212121";
|
|
83
77
|
export const colorBlack = "#000000";
|
|
84
78
|
export const colorWhite = "#ffffff";
|
|
85
|
-
export const colorBlackShadow = "rgba(0, 0, 0, 0.1)";
|
|
86
|
-
export const colorWhiteShadow = "rgba(255, 255, 255, 0.1)";
|
|
87
79
|
export const colorBlueGray10 = "#eef0f2";
|
|
88
80
|
export const colorBlueGray20 = "#d8dde0";
|
|
89
81
|
export const colorBlueGray30 = "#bbc1c7";
|
|
@@ -99,20 +91,18 @@ export const colorBlueGray120 = "#1b1e21";
|
|
|
99
91
|
export const colorDarkGray105 = "#383838";
|
|
100
92
|
export const colorDarkGray115 = "#282828";
|
|
101
93
|
export const colorDarkGray125 = "#1a1a1a";
|
|
102
|
-
export const
|
|
103
|
-
export const
|
|
104
|
-
export const
|
|
105
|
-
export const
|
|
106
|
-
export const
|
|
107
|
-
export const
|
|
108
|
-
export const
|
|
109
|
-
export const
|
|
110
|
-
export const
|
|
111
|
-
export const
|
|
112
|
-
export const
|
|
113
|
-
export const
|
|
114
|
-
export const colorBackgroundComponent = "#ffffff";
|
|
115
|
-
export const colorBackgroundObject = "#515151";
|
|
94
|
+
export const colorPurple10 = "#f0ddf3";
|
|
95
|
+
export const colorPurple20 = "#e1bbe8";
|
|
96
|
+
export const colorPurple30 = "#d399dc";
|
|
97
|
+
export const colorPurple40 = "#c477d0";
|
|
98
|
+
export const colorPurple50 = "#b556c5";
|
|
99
|
+
export const colorPurple60 = "#a03db0";
|
|
100
|
+
export const colorPurple70 = "#81318e";
|
|
101
|
+
export const colorPurple80 = "#6f2a7a";
|
|
102
|
+
export const colorPurple90 = "#5c2365";
|
|
103
|
+
export const colorPurple100 = "#4a1c51";
|
|
104
|
+
export const colorPurple110 = "#37153d";
|
|
105
|
+
export const colorPurple120 = "#250e29";
|
|
116
106
|
export const borderRadius100 = "4px";
|
|
117
107
|
export const borderRadius150 = "6px";
|
|
118
108
|
export const borderRadius200 = "8px";
|
|
@@ -129,72 +119,23 @@ export const space300 = "12px";
|
|
|
129
119
|
export const space400 = "16px";
|
|
130
120
|
export const space800 = "32px";
|
|
131
121
|
export const space050 = "2px";
|
|
132
|
-
export const
|
|
133
|
-
export const
|
|
122
|
+
export const fontRegularNormal300 = "400 12px/1.5 Roboto";
|
|
123
|
+
export const fontRegularNormal350 = "400 14px/1.5 Roboto";
|
|
124
|
+
export const fontRegularNormal400 = "400 16px/1.5 Roboto";
|
|
125
|
+
export const fontRegularTight300 = "400 12px/1.3 Roboto";
|
|
126
|
+
export const fontRegularTight350 = "400 14px/1.3 Roboto";
|
|
127
|
+
export const fontRegularTight400 = "400 16px/1.3 Roboto";
|
|
128
|
+
export const fontRegularBoldNormal300 = "700 12px/1.5 Roboto";
|
|
129
|
+
export const fontRegularBoldNormal350 = "700 14px/1.5 Roboto";
|
|
130
|
+
export const fontRegularBoldNormal400 = "700 16px/1.5 Roboto";
|
|
131
|
+
export const fontRegularBoldTight300 = "700 12px/1.3 Roboto";
|
|
132
|
+
export const fontRegularBoldTight350 = "700 14px/1.3 Roboto";
|
|
133
|
+
export const fontRegularBoldTight400 = "700 16px/1.3 Roboto";
|
|
134
134
|
export const fontSize300 = "12px";
|
|
135
135
|
export const fontSize350 = "14px";
|
|
136
136
|
export const fontSize400 = "16px";
|
|
137
|
-
export const
|
|
138
|
-
export const
|
|
139
|
-
export const fontWeightBold =
|
|
140
|
-
export const fontWeightRegular =
|
|
141
|
-
export const fontFamilyBase = "Roboto";
|
|
142
|
-
export const regularNormal300 = "400 12px/1.5 Roboto"; // Body is primarily used for components and for blocks of text.
|
|
143
|
-
export const regularNormal350 = "400 14px/1.5 Roboto"; // Body is primarily used for components and for blocks of text.
|
|
144
|
-
export const regularNormal400 = "400 16px/1.5 Roboto"; // Body is primarily used for components and for blocks of text.
|
|
145
|
-
export const regularTight300 = "400 12px/1.3 Roboto"; // Body is primarily used for components and for blocks of text.
|
|
146
|
-
export const regularTight350 = "400 14px/1.3 Roboto"; // Body is primarily used for components and for blocks of text.
|
|
147
|
-
export const regularTight400 = "400 16px/1.3 Roboto"; // Body is primarily used for components and for blocks of text.
|
|
148
|
-
export const regularBoldNormal300 = "700 12px/1.5 Roboto"; // Header is used to create various levels of typographic hierarchies.
|
|
149
|
-
export const regularBoldNormal350 = "700 14px/1.5 Roboto"; // Header is used to create various levels of typographic hierarchies.
|
|
150
|
-
export const regularBoldNormal400 = "700 16px/1.5 Roboto"; // Header is used to create various levels of typographic hierarchies.
|
|
151
|
-
export const regularBoldTight300 = "700 12px/1.3 Roboto"; // Header is used to create various levels of typographic hierarchies.
|
|
152
|
-
export const regularBoldTight350 = "700 14px/1.3 Roboto"; // Header is used to create various levels of typographic hierarchies.
|
|
153
|
-
export const regularBoldTight400 = "700 16px/1.3 Roboto"; // Header is used to create various levels of typographic hierarchies.
|
|
154
|
-
export const checkboxBorderUnselected = "2px solid #bfbfbf";
|
|
155
|
-
export const checkboxColorBackground = "#30ade9";
|
|
156
|
-
export const checkboxColorIcon = "#ffffff";
|
|
157
|
-
export const dropdownColorBackground = "#ffffff";
|
|
158
|
-
export const dropdownColorText = "#515151";
|
|
159
|
-
export const dropdownTrayColorBackgroundSelected = "#ebebeb";
|
|
160
|
-
export const tableColorBackground = "#ffffff";
|
|
161
|
-
export const tableColorText = "#515151";
|
|
162
|
-
export const tableHeaderBorder = "1px none #000000";
|
|
163
|
-
export const tableCellBorder = "1px none #ebebeb";
|
|
164
|
-
export const tablePageNumberColorBackgroundSelected = "#828282";
|
|
165
|
-
export const tablePageNumberColorTextDefault = "#515151";
|
|
166
|
-
export const tablePageNumberColorTextSelected = "#ffffff";
|
|
167
|
-
export const tablePageNumberBorderHover = "1px none #828282";
|
|
168
|
-
export const loginSsoButtonBorder = "1px none #616161";
|
|
169
|
-
export const loginSsoButtonColorText = "#616161";
|
|
170
|
-
export const formColorBackground = "#ffffff";
|
|
171
|
-
export const formColorTextDefault = "#414141";
|
|
172
|
-
export const formColorTextPlaceholder = "#828282";
|
|
173
|
-
export const formColorTextPositive = "#00c3ac";
|
|
174
|
-
export const formColorTextNegative = "#f21a27";
|
|
175
|
-
export const notificationColorBackgroundSuccess = "#00c3ac";
|
|
176
|
-
export const notificationColorBackgroundError = "#f21a27";
|
|
177
|
-
export const notificationColorBackgroundWarning = "#ffbf0e";
|
|
178
|
-
export const notificationColorBackgroundAlarm = "#fa7a12";
|
|
179
|
-
export const notificationColorBackgroundInformation = "#30ade9";
|
|
180
|
-
export const iconColorBackground = "#515151";
|
|
181
|
-
export const containerColorBackground = "#ffffff";
|
|
182
|
-
export const containerColorTextHeader = "#515151";
|
|
183
|
-
export const containerColorTextBody = "#828282";
|
|
184
|
-
export const containerShadow = "0 -2px 19px 0 rgba(0, 0, 0, 0.1)";
|
|
185
|
-
export const buttonColorBackgroundPrimaryActive = "#c8102e"; // Color used for the default state of a secondary button
|
|
186
|
-
export const buttonColorBackgroundPrimaryHover = "#db4f66";
|
|
187
|
-
export const buttonColorBackgroundPrimaryPress = "#d2324c";
|
|
188
|
-
export const buttonColorBackgroundPrimaryFocus = "#f8aeba";
|
|
189
|
-
export const buttonColorBackgroundPrimaryDisabled = "#dcdcdc";
|
|
190
|
-
export const buttonColorBorderSecondaryActive = "#c8102e";
|
|
191
|
-
export const buttonColorBorderSecondaryHover = "#db4f66";
|
|
192
|
-
export const buttonColorBorderSecondaryPress = "#d2324c";
|
|
193
|
-
export const buttonColorBorderSecondaryFocus = "#f8aeba";
|
|
194
|
-
export const buttonColorBorderSecondaryDisabled = "#dcdcdc";
|
|
195
|
-
export const buttonColorTextSecondaryActive = "#c8102e";
|
|
196
|
-
export const buttonColorTextSecondaryHover = "#db4f66";
|
|
197
|
-
export const buttonColorTextSecondaryPress = "#d2324c";
|
|
198
|
-
export const buttonColorTextSecondaryFocus = "#f8aeba";
|
|
199
|
-
export const buttonColorTextSecondaryDisabled = "#dcdcdc";
|
|
200
|
-
export const buttonColorTextPrimary = "#ffffff";
|
|
137
|
+
export const fontLineHeightTight = 1.3;
|
|
138
|
+
export const fontLineHeightNormal = 1.5;
|
|
139
|
+
export const fontWeightBold = 700;
|
|
140
|
+
export const fontWeightRegular = 400;
|
|
141
|
+
export const fontFamilyBase = "Roboto";
|
|
@@ -63,12 +63,6 @@ module.exports = {
|
|
|
63
63
|
colorRed100: "#7b070e",
|
|
64
64
|
colorRed110: "#5d050a",
|
|
65
65
|
colorRed120: "#3e0307",
|
|
66
|
-
colorRedAaf100: "#fcecea",
|
|
67
|
-
colorRedAaf200: "#f5c0b8",
|
|
68
|
-
colorRedAaf300: "#f8aeba",
|
|
69
|
-
colorRedAaf400: "#db4f66",
|
|
70
|
-
colorRedAaf500: "#d2324c",
|
|
71
|
-
colorRedAaf600: "#c8102e",
|
|
72
66
|
colorGray10: "#f2f2f2",
|
|
73
67
|
colorGray20: "#ebebeb",
|
|
74
68
|
colorGray30: "#dcdcdc",
|
|
@@ -83,8 +77,6 @@ module.exports = {
|
|
|
83
77
|
colorGray120: "#212121",
|
|
84
78
|
colorBlack: "#000000",
|
|
85
79
|
colorWhite: "#ffffff",
|
|
86
|
-
colorBlackShadow: "rgba(0, 0, 0, 0.1)",
|
|
87
|
-
colorWhiteShadow: "rgba(255, 255, 255, 0.1)",
|
|
88
80
|
colorBlueGray10: "#eef0f2",
|
|
89
81
|
colorBlueGray20: "#d8dde0",
|
|
90
82
|
colorBlueGray30: "#bbc1c7",
|
|
@@ -100,20 +92,60 @@ module.exports = {
|
|
|
100
92
|
colorDarkGray105: "#383838",
|
|
101
93
|
colorDarkGray115: "#282828",
|
|
102
94
|
colorDarkGray125: "#1a1a1a",
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
95
|
+
colorPurple10: "#f0ddf3",
|
|
96
|
+
colorPurple20: "#e1bbe8",
|
|
97
|
+
colorPurple30: "#d399dc",
|
|
98
|
+
colorPurple40: "#c477d0",
|
|
99
|
+
colorPurple50: "#b556c5",
|
|
100
|
+
colorPurple60: "#a03db0",
|
|
101
|
+
colorPurple70: "#81318e",
|
|
102
|
+
colorPurple80: "#6f2a7a",
|
|
103
|
+
colorPurple90: "#5c2365",
|
|
104
|
+
colorPurple100: "#4a1c51",
|
|
105
|
+
colorPurple110: "#37153d",
|
|
106
|
+
colorPurple120: "#250e29",
|
|
107
|
+
colorCommonBrandDefault: "#30ade9",
|
|
108
|
+
colorCommonBrandHover: "#54c3f1",
|
|
109
|
+
colorCommonBrandPress: "#76cff4",
|
|
110
|
+
colorCommonSurfaceBrandHover: "#002b40",
|
|
111
|
+
colorCommonSurfaceBrandPress: "#004160",
|
|
112
|
+
colorCommonSurfaceNeutralHover: "#282828",
|
|
113
|
+
colorCommonSurfaceNeutralPress: "#313131",
|
|
114
|
+
colorCommonSurfaceDangerHover: "#3e0307",
|
|
115
|
+
colorCommonSurfaceDangerPress: "#5d050a",
|
|
116
|
+
colorCommonSurfaceDefault: "#212121",
|
|
117
|
+
colorCommonSurfaceHover: "#282828",
|
|
118
|
+
colorCommonSurfacePress: "#313131",
|
|
119
|
+
colorCommonSurfaceSelectedDefault: "#002b40",
|
|
120
|
+
colorCommonSurfaceSelectedHover: "#004160",
|
|
121
|
+
colorCommonSurfaceSelectedPress: "#005077",
|
|
122
|
+
colorCommonNeutralDefault: "#bfbfbf",
|
|
123
|
+
colorCommonNeutralHover: "#cecece",
|
|
124
|
+
colorCommonNeutralPress: "#dcdcdc",
|
|
125
|
+
colorCommonDangerDefault: "#f21a27",
|
|
126
|
+
colorCommonDangerHover: "#f4404b",
|
|
127
|
+
colorCommonDangerPress: "#f7666f",
|
|
128
|
+
colorCommonSuccess: "#00c3ac",
|
|
129
|
+
colorCommonWarning: "#efb000",
|
|
130
|
+
colorCommonAlarm: "#fa7a12",
|
|
131
|
+
colorCommonInformation: "#30ade9",
|
|
132
|
+
colorCommonDisabled: "#616161",
|
|
133
|
+
colorCommonTextPrimary: "#dcdcdc",
|
|
134
|
+
colorCommonTextSecondary: "#bfbfbf",
|
|
135
|
+
colorCommonTextInverse: "#212121",
|
|
136
|
+
colorCommonBorderFocus: "#54c3f1",
|
|
137
|
+
colorCommonBorderEmpty: "#515151",
|
|
138
|
+
colorCommonBackgroundDefault: "#212121",
|
|
139
|
+
colorCommonBackgroundOverlay: "#000000",
|
|
140
|
+
colorDivider: "#515151",
|
|
141
|
+
colorLinkTextDefault: "#76cff4",
|
|
142
|
+
colorLinkTextHover: "#98dbf7",
|
|
143
|
+
colorLinkTextPress: "#bbe7f9",
|
|
144
|
+
colorLinkTextVisitedDefault: "#c477d0",
|
|
145
|
+
colorLinkTextVisitedHover: "#d399dc",
|
|
146
|
+
colorLinkTextVisitedPress: "#e1bbe8",
|
|
147
|
+
colorLinkSurfaceVisitedHover: "#250e29",
|
|
148
|
+
colorLinkSurfaceVisitedPress: "#37153d",
|
|
117
149
|
borderRadius100: "4px",
|
|
118
150
|
borderRadius150: "6px",
|
|
119
151
|
borderRadius200: "8px",
|
|
@@ -130,88 +162,24 @@ module.exports = {
|
|
|
130
162
|
space400: "16px",
|
|
131
163
|
space800: "32px",
|
|
132
164
|
space050: "2px",
|
|
133
|
-
|
|
134
|
-
|
|
165
|
+
fontRegularNormal300: "400 12px/1.5 Roboto",
|
|
166
|
+
fontRegularNormal350: "400 14px/1.5 Roboto",
|
|
167
|
+
fontRegularNormal400: "400 16px/1.5 Roboto",
|
|
168
|
+
fontRegularTight300: "400 12px/1.3 Roboto",
|
|
169
|
+
fontRegularTight350: "400 14px/1.3 Roboto",
|
|
170
|
+
fontRegularTight400: "400 16px/1.3 Roboto",
|
|
171
|
+
fontRegularBoldNormal300: "700 12px/1.5 Roboto",
|
|
172
|
+
fontRegularBoldNormal350: "700 14px/1.5 Roboto",
|
|
173
|
+
fontRegularBoldNormal400: "700 16px/1.5 Roboto",
|
|
174
|
+
fontRegularBoldTight300: "700 12px/1.3 Roboto",
|
|
175
|
+
fontRegularBoldTight350: "700 14px/1.3 Roboto",
|
|
176
|
+
fontRegularBoldTight400: "700 16px/1.3 Roboto",
|
|
135
177
|
fontSize300: "12px",
|
|
136
178
|
fontSize350: "14px",
|
|
137
179
|
fontSize400: "16px",
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
fontWeightBold:
|
|
141
|
-
fontWeightRegular:
|
|
180
|
+
fontLineHeightTight: 1.3,
|
|
181
|
+
fontLineHeightNormal: 1.5,
|
|
182
|
+
fontWeightBold: 700,
|
|
183
|
+
fontWeightRegular: 400,
|
|
142
184
|
fontFamilyBase: "Roboto",
|
|
143
|
-
regularNormal300: "400 12px/1.5 Roboto",
|
|
144
|
-
regularNormal350: "400 14px/1.5 Roboto",
|
|
145
|
-
regularNormal400: "400 16px/1.5 Roboto",
|
|
146
|
-
regularTight300: "400 12px/1.3 Roboto",
|
|
147
|
-
regularTight350: "400 14px/1.3 Roboto",
|
|
148
|
-
regularTight400: "400 16px/1.3 Roboto",
|
|
149
|
-
regularBoldNormal300: "700 12px/1.5 Roboto",
|
|
150
|
-
regularBoldNormal350: "700 14px/1.5 Roboto",
|
|
151
|
-
regularBoldNormal400: "700 16px/1.5 Roboto",
|
|
152
|
-
regularBoldTight300: "700 12px/1.3 Roboto",
|
|
153
|
-
regularBoldTight350: "700 14px/1.3 Roboto",
|
|
154
|
-
regularBoldTight400: "700 16px/1.3 Roboto",
|
|
155
|
-
checkboxBorderUnselected: "2px solid #bfbfbf",
|
|
156
|
-
checkboxColorBackground: "#30ade9",
|
|
157
|
-
checkboxColorIcon: "#ffffff",
|
|
158
|
-
dropdownColorBackground: "#ffffff",
|
|
159
|
-
dropdownColorText: "#515151",
|
|
160
|
-
dropdownTrayColorBackgroundSelected: "#ebebeb",
|
|
161
|
-
tableColorBackground: "#ffffff",
|
|
162
|
-
tableColorText: "#515151",
|
|
163
|
-
tableHeaderBorder: "1px none #000000",
|
|
164
|
-
tableCellBorder: "1px none #ebebeb",
|
|
165
|
-
tablePageNumberColorBackgroundSelected: "#828282",
|
|
166
|
-
tablePageNumberColorTextDefault: "#515151",
|
|
167
|
-
tablePageNumberColorTextSelected: "#ffffff",
|
|
168
|
-
tablePageNumberBorderHover: "1px none #828282",
|
|
169
|
-
loginSsoButtonBorder: "1px none #616161",
|
|
170
|
-
loginSsoButtonColorText: "#616161",
|
|
171
|
-
formColorBackground: "#ffffff",
|
|
172
|
-
formColorTextDefault: "#414141",
|
|
173
|
-
formColorTextPlaceholder: "#828282",
|
|
174
|
-
formColorTextPositive: "#00c3ac",
|
|
175
|
-
formColorTextNegative: "#f21a27",
|
|
176
|
-
notificationColorBackgroundSuccess: "#00c3ac",
|
|
177
|
-
notificationColorBackgroundError: "#f21a27",
|
|
178
|
-
notificationColorBackgroundWarning: "#ffbf0e",
|
|
179
|
-
notificationColorBackgroundAlarm: "#fa7a12",
|
|
180
|
-
notificationColorBackgroundInformation: "#30ade9",
|
|
181
|
-
notificationColorBackgroundTheme: "#414141",
|
|
182
|
-
notificationColorText: "#f2f2f2",
|
|
183
|
-
notificationShadow: "0 -2px 19px 0 rgba(0, 0, 0, 0.1)",
|
|
184
|
-
iconColorBackgroundNeutral: "#a0a0a0",
|
|
185
|
-
iconColorBackgroundDefault: "#f2f2f2",
|
|
186
|
-
iconColorBackgroundTheme: "#000000",
|
|
187
|
-
containerColorBackground: "#414141",
|
|
188
|
-
containerColorTextHeader: "#f2f2f2",
|
|
189
|
-
containerColorTextBody: "#ebebeb",
|
|
190
|
-
cardShadow: "0 -2px 19px 0 rgba(255, 255, 255, 0.1)",
|
|
191
|
-
buttonColorBackgroundPrimaryActive: "#76cff4",
|
|
192
|
-
buttonColorBackgroundPrimaryHover: "#30ade9",
|
|
193
|
-
buttonColorBackgroundPrimaryPress: "#98dbf7",
|
|
194
|
-
buttonColorBackgroundPrimaryFocus: "#bbe7f9",
|
|
195
|
-
buttonColorBackgroundPrimaryDisabled: "#616161",
|
|
196
|
-
buttonColorBorderSecondaryActive: "#76cff4",
|
|
197
|
-
buttonColorBorderSecondaryHover: "#30ade9",
|
|
198
|
-
buttonColorBorderSecondaryPress: "#98dbf7",
|
|
199
|
-
buttonColorBorderSecondaryFocus: "#bbe7f9",
|
|
200
|
-
buttonColorBorderSecondaryDisabled: "#616161",
|
|
201
|
-
buttonColorTextSecondaryActive: "#76cff4",
|
|
202
|
-
buttonColorTextSecondaryHover: "#30ade9",
|
|
203
|
-
buttonColorTextSecondaryPress: "#98dbf7",
|
|
204
|
-
buttonColorTextSecondaryFocus: "#bbe7f9",
|
|
205
|
-
buttonColorTextSecondaryDisabled: "#616161",
|
|
206
|
-
buttonColorTextPrimary: "#414141",
|
|
207
|
-
tabColorLineActive: "#76cff4",
|
|
208
|
-
tabColorLineHover: "#30ade9",
|
|
209
|
-
tabColorLinePress: "#98dbf7",
|
|
210
|
-
tabColorLineFocus: "#bbe7f9",
|
|
211
|
-
tabColorLineDisabled: "#616161",
|
|
212
|
-
tabColorTextActive: "#76cff4",
|
|
213
|
-
tabColorTextHover: "#30ade9",
|
|
214
|
-
tabColorTextPress: "#98dbf7",
|
|
215
|
-
tabColorTextFocus: "#bbe7f9",
|
|
216
|
-
tabColorTextDisabled: "#616161",
|
|
217
185
|
};
|
|
@@ -62,12 +62,6 @@ export const colorRed90: string;
|
|
|
62
62
|
export const colorRed100: string;
|
|
63
63
|
export const colorRed110: string;
|
|
64
64
|
export const colorRed120: string;
|
|
65
|
-
export const colorRedAaf100: string;
|
|
66
|
-
export const colorRedAaf200: string;
|
|
67
|
-
export const colorRedAaf300: string;
|
|
68
|
-
export const colorRedAaf400: string;
|
|
69
|
-
export const colorRedAaf500: string;
|
|
70
|
-
export const colorRedAaf600: string;
|
|
71
65
|
export const colorGray10: string;
|
|
72
66
|
export const colorGray20: string;
|
|
73
67
|
export const colorGray30: string;
|
|
@@ -82,8 +76,6 @@ export const colorGray110: string;
|
|
|
82
76
|
export const colorGray120: string;
|
|
83
77
|
export const colorBlack: string;
|
|
84
78
|
export const colorWhite: string;
|
|
85
|
-
export const colorBlackShadow: string;
|
|
86
|
-
export const colorWhiteShadow: string;
|
|
87
79
|
export const colorBlueGray10: string;
|
|
88
80
|
export const colorBlueGray20: string;
|
|
89
81
|
export const colorBlueGray30: string;
|
|
@@ -99,27 +91,60 @@ export const colorBlueGray120: string;
|
|
|
99
91
|
export const colorDarkGray105: string;
|
|
100
92
|
export const colorDarkGray115: string;
|
|
101
93
|
export const colorDarkGray125: string;
|
|
102
|
-
|
|
103
|
-
export const
|
|
104
|
-
|
|
105
|
-
export const
|
|
106
|
-
|
|
107
|
-
export const
|
|
108
|
-
|
|
109
|
-
export const
|
|
110
|
-
|
|
111
|
-
export const
|
|
112
|
-
|
|
113
|
-
export const
|
|
114
|
-
|
|
115
|
-
export const
|
|
116
|
-
export const
|
|
117
|
-
export const
|
|
118
|
-
export const
|
|
119
|
-
export const
|
|
120
|
-
export const
|
|
121
|
-
export const
|
|
122
|
-
export const
|
|
94
|
+
export const colorPurple10: string;
|
|
95
|
+
export const colorPurple20: string;
|
|
96
|
+
export const colorPurple30: string;
|
|
97
|
+
export const colorPurple40: string;
|
|
98
|
+
export const colorPurple50: string;
|
|
99
|
+
export const colorPurple60: string;
|
|
100
|
+
export const colorPurple70: string;
|
|
101
|
+
export const colorPurple80: string;
|
|
102
|
+
export const colorPurple90: string;
|
|
103
|
+
export const colorPurple100: string;
|
|
104
|
+
export const colorPurple110: string;
|
|
105
|
+
export const colorPurple120: string;
|
|
106
|
+
export const colorCommonBrandDefault: string;
|
|
107
|
+
export const colorCommonBrandHover: string;
|
|
108
|
+
export const colorCommonBrandPress: string;
|
|
109
|
+
export const colorCommonSurfaceBrandHover: string;
|
|
110
|
+
export const colorCommonSurfaceBrandPress: string;
|
|
111
|
+
export const colorCommonSurfaceNeutralHover: string;
|
|
112
|
+
export const colorCommonSurfaceNeutralPress: string;
|
|
113
|
+
export const colorCommonSurfaceDangerHover: string;
|
|
114
|
+
export const colorCommonSurfaceDangerPress: string;
|
|
115
|
+
export const colorCommonSurfaceDefault: string;
|
|
116
|
+
export const colorCommonSurfaceHover: string;
|
|
117
|
+
export const colorCommonSurfacePress: string;
|
|
118
|
+
export const colorCommonSurfaceSelectedDefault: string;
|
|
119
|
+
export const colorCommonSurfaceSelectedHover: string;
|
|
120
|
+
export const colorCommonSurfaceSelectedPress: string;
|
|
121
|
+
export const colorCommonNeutralDefault: string;
|
|
122
|
+
export const colorCommonNeutralHover: string;
|
|
123
|
+
export const colorCommonNeutralPress: string;
|
|
124
|
+
export const colorCommonDangerDefault: string;
|
|
125
|
+
export const colorCommonDangerHover: string;
|
|
126
|
+
export const colorCommonDangerPress: string;
|
|
127
|
+
export const colorCommonSuccess: string;
|
|
128
|
+
export const colorCommonWarning: string;
|
|
129
|
+
export const colorCommonAlarm: string;
|
|
130
|
+
export const colorCommonInformation: string;
|
|
131
|
+
export const colorCommonDisabled: string;
|
|
132
|
+
export const colorCommonTextPrimary: string;
|
|
133
|
+
export const colorCommonTextSecondary: string;
|
|
134
|
+
export const colorCommonTextInverse: string;
|
|
135
|
+
export const colorCommonBorderFocus: string;
|
|
136
|
+
export const colorCommonBorderEmpty: string;
|
|
137
|
+
export const colorCommonBackgroundDefault: string;
|
|
138
|
+
export const colorCommonBackgroundOverlay: string;
|
|
139
|
+
export const colorDivider: string;
|
|
140
|
+
export const colorLinkTextDefault: string;
|
|
141
|
+
export const colorLinkTextHover: string;
|
|
142
|
+
export const colorLinkTextPress: string;
|
|
143
|
+
export const colorLinkTextVisitedDefault: string;
|
|
144
|
+
export const colorLinkTextVisitedHover: string;
|
|
145
|
+
export const colorLinkTextVisitedPress: string;
|
|
146
|
+
export const colorLinkSurfaceVisitedHover: string;
|
|
147
|
+
export const colorLinkSurfaceVisitedPress: string;
|
|
123
148
|
export const borderRadius100: string;
|
|
124
149
|
export const borderRadius150: string;
|
|
125
150
|
export const borderRadius200: string;
|
|
@@ -136,101 +161,23 @@ export const space300: string;
|
|
|
136
161
|
export const space400: string;
|
|
137
162
|
export const space800: string;
|
|
138
163
|
export const space050: string;
|
|
139
|
-
export const
|
|
140
|
-
export const
|
|
164
|
+
export const fontRegularNormal300: string;
|
|
165
|
+
export const fontRegularNormal350: string;
|
|
166
|
+
export const fontRegularNormal400: string;
|
|
167
|
+
export const fontRegularTight300: string;
|
|
168
|
+
export const fontRegularTight350: string;
|
|
169
|
+
export const fontRegularTight400: string;
|
|
170
|
+
export const fontRegularBoldNormal300: string;
|
|
171
|
+
export const fontRegularBoldNormal350: string;
|
|
172
|
+
export const fontRegularBoldNormal400: string;
|
|
173
|
+
export const fontRegularBoldTight300: string;
|
|
174
|
+
export const fontRegularBoldTight350: string;
|
|
175
|
+
export const fontRegularBoldTight400: string;
|
|
141
176
|
export const fontSize300: string;
|
|
142
177
|
export const fontSize350: string;
|
|
143
178
|
export const fontSize400: string;
|
|
144
|
-
export const
|
|
145
|
-
export const
|
|
146
|
-
export const fontWeightBold:
|
|
147
|
-
export const fontWeightRegular:
|
|
148
|
-
/** The primary font used in the DDS Design Kit is Roboto */
|
|
179
|
+
export const fontLineHeightTight: number;
|
|
180
|
+
export const fontLineHeightNormal: number;
|
|
181
|
+
export const fontWeightBold: number;
|
|
182
|
+
export const fontWeightRegular: number;
|
|
149
183
|
export const fontFamilyBase: string;
|
|
150
|
-
/** Body is primarily used for components and for blocks of text. */
|
|
151
|
-
export const regularNormal300: string;
|
|
152
|
-
/** Body is primarily used for components and for blocks of text. */
|
|
153
|
-
export const regularNormal350: string;
|
|
154
|
-
/** Body is primarily used for components and for blocks of text. */
|
|
155
|
-
export const regularNormal400: string;
|
|
156
|
-
/** Body is primarily used for components and for blocks of text. */
|
|
157
|
-
export const regularTight300: string;
|
|
158
|
-
/** Body is primarily used for components and for blocks of text. */
|
|
159
|
-
export const regularTight350: string;
|
|
160
|
-
/** Body is primarily used for components and for blocks of text. */
|
|
161
|
-
export const regularTight400: string;
|
|
162
|
-
/** Header is used to create various levels of typographic hierarchies. */
|
|
163
|
-
export const regularBoldNormal300: string;
|
|
164
|
-
/** Header is used to create various levels of typographic hierarchies. */
|
|
165
|
-
export const regularBoldNormal350: string;
|
|
166
|
-
/** Header is used to create various levels of typographic hierarchies. */
|
|
167
|
-
export const regularBoldNormal400: string;
|
|
168
|
-
/** Header is used to create various levels of typographic hierarchies. */
|
|
169
|
-
export const regularBoldTight300: string;
|
|
170
|
-
/** Header is used to create various levels of typographic hierarchies. */
|
|
171
|
-
export const regularBoldTight350: string;
|
|
172
|
-
/** Header is used to create various levels of typographic hierarchies. */
|
|
173
|
-
export const regularBoldTight400: string;
|
|
174
|
-
export const checkboxBorderUnselected: string;
|
|
175
|
-
export const checkboxColorBackground: string;
|
|
176
|
-
export const checkboxColorIcon: string;
|
|
177
|
-
export const dropdownColorBackground: string;
|
|
178
|
-
export const dropdownColorText: string;
|
|
179
|
-
export const dropdownTrayColorBackgroundSelected: string;
|
|
180
|
-
export const tableColorBackground: string;
|
|
181
|
-
export const tableColorText: string;
|
|
182
|
-
export const tableHeaderBorder: string;
|
|
183
|
-
export const tableCellBorder: string;
|
|
184
|
-
export const tablePageNumberColorBackgroundSelected: string;
|
|
185
|
-
export const tablePageNumberColorTextDefault: string;
|
|
186
|
-
export const tablePageNumberColorTextSelected: string;
|
|
187
|
-
export const tablePageNumberBorderHover: string;
|
|
188
|
-
export const loginSsoButtonBorder: string;
|
|
189
|
-
export const loginSsoButtonColorText: string;
|
|
190
|
-
export const formColorBackground: string;
|
|
191
|
-
export const formColorTextDefault: string;
|
|
192
|
-
export const formColorTextPlaceholder: string;
|
|
193
|
-
export const formColorTextPositive: string;
|
|
194
|
-
export const formColorTextNegative: string;
|
|
195
|
-
export const notificationColorBackgroundSuccess: string;
|
|
196
|
-
export const notificationColorBackgroundError: string;
|
|
197
|
-
export const notificationColorBackgroundWarning: string;
|
|
198
|
-
export const notificationColorBackgroundAlarm: string;
|
|
199
|
-
export const notificationColorBackgroundInformation: string;
|
|
200
|
-
export const notificationColorBackgroundTheme: string;
|
|
201
|
-
export const notificationColorText: string;
|
|
202
|
-
export const notificationShadow: string;
|
|
203
|
-
export const iconColorBackgroundNeutral: string;
|
|
204
|
-
export const iconColorBackgroundDefault: string;
|
|
205
|
-
export const iconColorBackgroundTheme: string;
|
|
206
|
-
export const containerColorBackground: string;
|
|
207
|
-
export const containerColorTextHeader: string;
|
|
208
|
-
export const containerColorTextBody: string;
|
|
209
|
-
export const cardShadow: string;
|
|
210
|
-
/** Color used for the default state of a secondary button */
|
|
211
|
-
export const buttonColorBackgroundPrimaryActive: string;
|
|
212
|
-
export const buttonColorBackgroundPrimaryHover: string;
|
|
213
|
-
export const buttonColorBackgroundPrimaryPress: string;
|
|
214
|
-
export const buttonColorBackgroundPrimaryFocus: string;
|
|
215
|
-
export const buttonColorBackgroundPrimaryDisabled: string;
|
|
216
|
-
export const buttonColorBorderSecondaryActive: string;
|
|
217
|
-
export const buttonColorBorderSecondaryHover: string;
|
|
218
|
-
export const buttonColorBorderSecondaryPress: string;
|
|
219
|
-
export const buttonColorBorderSecondaryFocus: string;
|
|
220
|
-
export const buttonColorBorderSecondaryDisabled: string;
|
|
221
|
-
export const buttonColorTextSecondaryActive: string;
|
|
222
|
-
export const buttonColorTextSecondaryHover: string;
|
|
223
|
-
export const buttonColorTextSecondaryPress: string;
|
|
224
|
-
export const buttonColorTextSecondaryFocus: string;
|
|
225
|
-
export const buttonColorTextSecondaryDisabled: string;
|
|
226
|
-
export const buttonColorTextPrimary: string;
|
|
227
|
-
export const tabColorLineActive: string;
|
|
228
|
-
export const tabColorLineHover: string;
|
|
229
|
-
export const tabColorLinePress: string;
|
|
230
|
-
export const tabColorLineFocus: string;
|
|
231
|
-
export const tabColorLineDisabled: string;
|
|
232
|
-
export const tabColorTextActive: string;
|
|
233
|
-
export const tabColorTextHover: string;
|
|
234
|
-
export const tabColorTextPress: string;
|
|
235
|
-
export const tabColorTextFocus: string;
|
|
236
|
-
export const tabColorTextDisabled: string;
|