@k8slens/lds-tokens 0.2.0 → 0.2.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/lib/docs/token-map.dark.d.ts +1 -1
- package/lib/docs/token-map.dark.js +1 -1
- package/lib/docs/token-map.light.d.ts +1 -1
- package/lib/docs/token-map.light.js +1 -1
- package/lib/electron/font-face.css +1 -1
- package/lib/electron/icons/action.js +1 -1
- package/lib/electron/icons/base.js +1 -1
- package/lib/electron/icons/idp.js +1 -1
- package/lib/electron/icons/misc.js +1 -1
- package/lib/electron/icons/navigation.js +1 -1
- package/lib/electron/images/index.js +1 -1
- package/lib/electron/tokens.dark.css +1 -1
- package/lib/electron/tokens.dark.js +1 -1
- package/lib/electron/tokens.dark.scoped.css +1 -1
- package/lib/electron/tokens.dark.ts +233 -0
- package/lib/electron/tokens.light.css +1 -1
- package/lib/electron/tokens.light.js +1 -1
- package/lib/electron/tokens.light.scoped.css +1 -1
- package/lib/electron/tokens.light.ts +233 -0
- package/lib/web/colors/dark.js +1 -1
- package/lib/web/colors/light.js +1 -1
- package/lib/web/font-imports.css +1 -1
- package/lib/web/icons/action.js +1 -1
- package/lib/web/icons/base.js +1 -1
- package/lib/web/icons/idp.js +1 -1
- package/lib/web/icons/misc.js +1 -1
- package/lib/web/icons/navigation.js +1 -1
- package/lib/web/images/index.js +1 -1
- package/lib/web/tailwind.config.cjs +1 -1
- package/lib/web/tailwind.config.js +1 -1
- package/lib/web/tokens.dark.css +1 -1
- package/lib/web/tokens.dark.js +1 -1
- package/lib/web/tokens.dark.scoped.css +1 -1
- package/lib/web/tokens.dark.ts +237 -0
- package/lib/web/tokens.light.css +1 -1
- package/lib/web/tokens.light.js +1 -1
- package/lib/web/tokens.light.scoped.css +1 -1
- package/lib/web/tokens.light.ts +237 -0
- package/package.json +1 -1
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 22 Nov 2022 10:05:38 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export const TransitionBaseEasingInOut = "ease-in-out";
|
|
8
|
+
export const TransitionBaseEasingDefault = "ease";
|
|
9
|
+
export const TransitionBaseDurationSlow = ".75s";
|
|
10
|
+
export const TransitionBaseDurationDefault = ".25s";
|
|
11
|
+
export const ShadowSwitchThumbFocused = "0 0 0 2px var(--alias-color-brand-primary)";
|
|
12
|
+
export const OpacityBaseDisabled = 0.5;
|
|
13
|
+
export const TypographyBaseLineHeight9xl = 1;
|
|
14
|
+
export const TypographyBaseLineHeight8xl = 1;
|
|
15
|
+
export const TypographyBaseLineHeight7xl = 1;
|
|
16
|
+
export const TypographyBaseLineHeight6xl = 1;
|
|
17
|
+
export const TypographyBaseFontLegacy = "'Roboto', 'Helvetica', 'Arial', sans-serif"; // Legacy Lens font, will be replaced with Open Sans
|
|
18
|
+
export const TypographyBaseFontPrimary = "'Open Sans', sans-serif";
|
|
19
|
+
export const SpacingPMarginTop = "0rem";
|
|
20
|
+
export const SpacingH4MarginBottom = "0rem";
|
|
21
|
+
export const SpacingH3MarginBottom = "0rem";
|
|
22
|
+
export const SpacingSwitchThumbSize = "20px";
|
|
23
|
+
export const SpacingBase95 = "2.375rem"; // Spacing multiplier 9.5
|
|
24
|
+
export const SpacingBase85 = "2.125rem"; // Spacing multiplier 8.5
|
|
25
|
+
export const SpacingBase75 = "1.875rem"; // Spacing multiplier 7.5
|
|
26
|
+
export const SpacingBase65 = "1.625rem"; // Spacing multiplier 6.5
|
|
27
|
+
export const SpacingBase55 = "1.375rem"; // Spacing multiplier 5.5
|
|
28
|
+
export const SpacingBase45 = "1.125rem"; // Spacing multiplier 4.5
|
|
29
|
+
export const SpacingBase35 = "0.875rem"; // Spacing multiplier 3.5
|
|
30
|
+
export const SpacingBase275 = "0.6875rem"; // Spacing multiplier 2.75
|
|
31
|
+
export const SpacingBase25 = "0.625rem"; // Spacing multiplier 2.5
|
|
32
|
+
export const SpacingBase225 = "0.5625rem"; // Spacing multiplier 2.25
|
|
33
|
+
export const SpacingBase175 = "0.4375rem"; // Spacing multiplier 1.75
|
|
34
|
+
export const SpacingBase15 = "0.375rem"; // Spacing multiplier 1.5
|
|
35
|
+
export const SpacingBase125 = "0.3125rem"; // Spacing multiplier 1.25
|
|
36
|
+
export const SpacingBase075 = "0.1875rem"; // Spacing multiplier 0.75
|
|
37
|
+
export const SpacingBase05 = "0.125rem"; // Spacing multiplier 0.5
|
|
38
|
+
export const SpacingBase025 = "0.0625rem"; // Spacing multiplier 0.25
|
|
39
|
+
export const SpacingBase96 = "24rem"; // Spacing multiplier 96
|
|
40
|
+
export const SpacingBase80 = "20rem"; // Spacing multiplier 80
|
|
41
|
+
export const SpacingBase72 = "18rem"; // Spacing multiplier 72
|
|
42
|
+
export const SpacingBase64 = "16rem"; // Spacing multiplier 64
|
|
43
|
+
export const SpacingBase60 = "15rem"; // Spacing multiplier 60
|
|
44
|
+
export const SpacingBase56 = "14rem"; // Spacing multiplier 56
|
|
45
|
+
export const SpacingBase52 = "13rem"; // Spacing multiplier 52
|
|
46
|
+
export const SpacingBase48 = "12rem"; // Spacing multiplier 48
|
|
47
|
+
export const SpacingBase44 = "11rem"; // Spacing multiplier 44
|
|
48
|
+
export const SpacingBase40 = "10rem"; // Spacing multiplier 40
|
|
49
|
+
export const SpacingBase36 = "9rem"; // Spacing multiplier 36
|
|
50
|
+
export const SpacingBase32 = "8rem"; // Spacing multiplier 32
|
|
51
|
+
export const SpacingBase28 = "7rem"; // Spacing multiplier 28
|
|
52
|
+
export const SpacingBase24 = "6rem"; // Spacing multiplier 24
|
|
53
|
+
export const SpacingBase20 = "5rem"; // Spacing multiplier 20
|
|
54
|
+
export const SpacingBase18 = "4.5rem"; // Spacing multiplier 18
|
|
55
|
+
export const SpacingBase16 = "4rem"; // Spacing multiplier 16
|
|
56
|
+
export const SpacingBase14 = "3.5rem"; // Spacing multiplier 14
|
|
57
|
+
export const SpacingBase12 = "3rem"; // Spacing multiplier 12
|
|
58
|
+
export const SpacingBase10 = "2.5rem"; // Spacing multiplier 10
|
|
59
|
+
export const SpacingBase9 = "2.25rem"; // Spacing multiplier 9
|
|
60
|
+
export const SpacingBase8 = "2rem"; // Spacing multiplier 8
|
|
61
|
+
export const SpacingBase7 = "1.75rem"; // Spacing multiplier 7
|
|
62
|
+
export const SpacingBase6 = "1.5rem"; // Spacing multiplier 6
|
|
63
|
+
export const SpacingBase5 = "1.25rem"; // Spacing multiplier 5
|
|
64
|
+
export const SpacingBase4 = "1rem"; // Spacing multiplier 4
|
|
65
|
+
export const SpacingBase3 = "0.75rem"; // Spacing multiplier 3
|
|
66
|
+
export const SpacingBase2 = "0.5rem"; // Spacing multiplier 2
|
|
67
|
+
export const SpacingBase1 = "0.25rem"; // Spacing multiplier 1
|
|
68
|
+
export const HuesBrightGreenLightness = "60%";
|
|
69
|
+
export const HuesBrightGreenSaturation = "60%";
|
|
70
|
+
export const HuesBrightGreenHue = "110";
|
|
71
|
+
export const HuesGreenLightness = "40%";
|
|
72
|
+
export const HuesGreenSaturation = "60%";
|
|
73
|
+
export const HuesGreenHue = "138";
|
|
74
|
+
export const HuesOrangeLightness = "60%";
|
|
75
|
+
export const HuesOrangeSaturation = "100%";
|
|
76
|
+
export const HuesOrangeHue = "38";
|
|
77
|
+
export const HuesRedLightness = "60%";
|
|
78
|
+
export const HuesRedSaturation = "100%";
|
|
79
|
+
export const HuesRedHue = "359";
|
|
80
|
+
export const HuesBlueLightness = "52%";
|
|
81
|
+
export const HuesBlueSaturation = "60%";
|
|
82
|
+
export const HuesBlueHue = "206deg";
|
|
83
|
+
export const ColorBaseTranslucentLight50 = "rgba(255, 255, 255, 0.5)";
|
|
84
|
+
export const ColorBaseTranslucentLight25 = "rgba(255, 255, 255, 0.25)";
|
|
85
|
+
export const ColorBaseTranslucentDark05 = "rgba(0, 0, 0, 0.05)";
|
|
86
|
+
export const ColorBaseTranslucentDark60 = "rgba(0, 0, 0, 0.4)";
|
|
87
|
+
export const ColorBaseTranslucentDark40 = "rgba(0, 0, 0, 0.4)";
|
|
88
|
+
export const ColorBaseTranslucentDark25 = "rgba(0, 0, 0, 0.25)";
|
|
89
|
+
export const ColorBaseTranslucentDark10 = "rgba(0, 0, 0, 0.1)";
|
|
90
|
+
export const ColorBaseBlack = "rgb(0, 0, 0)";
|
|
91
|
+
export const ColorBaseWhite = "rgb(255, 255, 255)";
|
|
92
|
+
export const SizeInputHeight = SpacingBase10;
|
|
93
|
+
export const SizeButtonHeight = SpacingBase10;
|
|
94
|
+
export const ShadowSwitchThumbDisabled = `inset 0 0 0 2px ${ColorBaseTranslucentDark40}`;
|
|
95
|
+
export const ShadowBaseInner = `inset 0 2px 4px 0 ${ColorBaseTranslucentDark05}`;
|
|
96
|
+
export const ShadowBase2xl = `0 25px 50px -12px ${ColorBaseTranslucentDark25}`;
|
|
97
|
+
export const ShadowBaseXl = `0 20px 25px -5px ${ColorBaseTranslucentDark10}, 0 8px 10px -6px ${ColorBaseTranslucentDark10}`;
|
|
98
|
+
export const ShadowBaseLg = `0 10px 15px -3px ${ColorBaseTranslucentDark10}, 0 4px 6px -4px ${ColorBaseTranslucentDark10}`;
|
|
99
|
+
export const ShadowBaseMd = `0 4px 6px -1px ${ColorBaseTranslucentDark10}, 0 2px 4px -2px ${ColorBaseTranslucentDark10}`;
|
|
100
|
+
export const ShadowBaseDefault = `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px ${ColorBaseTranslucentDark10}`;
|
|
101
|
+
export const ShadowBaseSm = `0 0 0 2px ${ColorBaseTranslucentDark05}`;
|
|
102
|
+
export const AliasColorBackgroundHighlight25 = ColorBaseTranslucentLight25;
|
|
103
|
+
export const AliasColorBackgroundOverlayPopup = ColorBaseTranslucentDark60;
|
|
104
|
+
export const AliasColorBackgroundOverlayBlocked = ColorBaseTranslucentDark40;
|
|
105
|
+
export const AliasColorBackgroundElevationNegative = ColorBaseTranslucentDark40;
|
|
106
|
+
export const AliasColorBorderVivid = `${ColorBaseWhite}`;
|
|
107
|
+
export const AliasColorTextAccent = ColorBaseWhite;
|
|
108
|
+
export const TypographyBaseLineHeight5xl = SpacingBase12;
|
|
109
|
+
export const TypographyBaseLineHeight4xl = SpacingBase12;
|
|
110
|
+
export const TypographyBaseLineHeight3xl = SpacingBase12;
|
|
111
|
+
export const TypographyBaseLineHeight2xl = SpacingBase12;
|
|
112
|
+
export const TypographyBaseLineHeightXl = SpacingBase6;
|
|
113
|
+
export const TypographyBaseLineHeightLg = SpacingBase6;
|
|
114
|
+
export const TypographyBaseLineHeightBase = SpacingBase6;
|
|
115
|
+
export const TypographyBaseLineHeightSm = SpacingBase6;
|
|
116
|
+
export const TypographyBaseLineHeightXs = SpacingBase6;
|
|
117
|
+
export const TypographyBaseSize9xl = SpacingBase24;
|
|
118
|
+
export const TypographyBaseSize8xl = SpacingBase18;
|
|
119
|
+
export const TypographyBaseSize7xl = SpacingBase16;
|
|
120
|
+
export const TypographyBaseSize6xl = SpacingBase12;
|
|
121
|
+
export const TypographyBaseSize5xl = SpacingBase10;
|
|
122
|
+
export const TypographyBaseSize4xl = SpacingBase9;
|
|
123
|
+
export const TypographyBaseSize3xl = SpacingBase8;
|
|
124
|
+
export const TypographyBaseSize2xl = SpacingBase6;
|
|
125
|
+
export const TypographyBaseSizeXl = SpacingBase5;
|
|
126
|
+
export const TypographyBaseSizeLg = SpacingBase4;
|
|
127
|
+
export const TypographyBaseSizeBase = SpacingBase35;
|
|
128
|
+
export const TypographyBaseSizeSm = SpacingBase3;
|
|
129
|
+
export const TypographyBaseSizeXs = SpacingBase275;
|
|
130
|
+
export const SpacingPMarginBottom = SpacingBase6;
|
|
131
|
+
export const SpacingH4MarginTop = SpacingBase4;
|
|
132
|
+
export const SpacingH3MarginTop = SpacingBase4;
|
|
133
|
+
export const SpacingH2MarginBottom = SpacingBase6;
|
|
134
|
+
export const SpacingH2MarginTop = SpacingBase6;
|
|
135
|
+
export const SpacingH1MarginBottom = SpacingBase4;
|
|
136
|
+
export const SpacingH1MarginTop = SpacingBase8;
|
|
137
|
+
export const SpacingInputIconMarginY = SpacingBase25;
|
|
138
|
+
export const SpacingInputIconMarginX = SpacingBase25;
|
|
139
|
+
export const SpacingInputPaddingInlineEnd = SpacingBase10;
|
|
140
|
+
export const SpacingButtonIconSize = SpacingBase5;
|
|
141
|
+
export const SpacingBaseXl2 = SpacingBase8;
|
|
142
|
+
export const SpacingBaseXl = SpacingBase6;
|
|
143
|
+
export const SpacingBaseLg = SpacingBase4;
|
|
144
|
+
export const SpacingBaseMd = SpacingBase3;
|
|
145
|
+
export const SpacingBaseSm = SpacingBase2;
|
|
146
|
+
export const SpacingBaseXs = SpacingBase1;
|
|
147
|
+
export const HuesBlueGrayHue = HuesBlueHue;
|
|
148
|
+
export const ColorBackgroundSwitchThumb = ColorBaseWhite;
|
|
149
|
+
export const ColorBaseBrightGreen600 = `hsl(${HuesBrightGreenHue}, ${HuesBrightGreenSaturation}, ${HuesBrightGreenLightness})`;
|
|
150
|
+
export const ColorBaseGreen400 = `hsl(${HuesGreenHue}, ${HuesGreenSaturation}, ${HuesGreenLightness})`;
|
|
151
|
+
export const ColorBaseOrange600 = `hsl(${HuesOrangeHue}, ${HuesOrangeSaturation}, ${HuesOrangeLightness})`;
|
|
152
|
+
export const ColorBaseOrange400 = `hsl(${HuesOrangeHue}, ${HuesOrangeSaturation}, 40%)`;
|
|
153
|
+
export const ColorBaseRed600 = `hsl(${HuesRedHue}, ${HuesRedSaturation}, ${HuesRedLightness})`;
|
|
154
|
+
export const ColorBaseBlue600 = `hsl(${HuesBlueHue}, ${HuesBlueSaturation}, 60%)`;
|
|
155
|
+
export const ColorBaseBlue500 = `hsl(${HuesBlueHue}, ${HuesBlueSaturation}, ${HuesBlueLightness})`;
|
|
156
|
+
export const AliasColorInfo = ColorBaseBlue600;
|
|
157
|
+
export const AliasColorCautionDark = `${ColorBaseOrange400}`;
|
|
158
|
+
export const SpacingInputPaddingInlineStart = SpacingBaseMd;
|
|
159
|
+
export const SpacingButtonIconMarginInlineEnd = SpacingBaseMd;
|
|
160
|
+
export const SpacingButtonPaddingY = SpacingBaseSm;
|
|
161
|
+
export const SpacingButtonPaddingX = SpacingBaseLg;
|
|
162
|
+
export const SpacingButtonBarPaddingBlock = SpacingBaseLg;
|
|
163
|
+
export const SpacingButtonBarPaddingInlineLarge = SpacingBaseXl;
|
|
164
|
+
export const SpacingButtonBarPaddingInline = SpacingBaseLg;
|
|
165
|
+
export const ColorFontInputFocus = AliasColorTextAccent;
|
|
166
|
+
export const ColorBackgroundSwitchHighlight = AliasColorBackgroundHighlight25;
|
|
167
|
+
export const ColorBaseBrightGreenDefault = ColorBaseBrightGreen600;
|
|
168
|
+
export const ColorBaseGreenDefault = ColorBaseGreen400;
|
|
169
|
+
export const ColorBaseOrangeDefault = ColorBaseOrange600;
|
|
170
|
+
export const ColorBaseRedDefault = ColorBaseRed600;
|
|
171
|
+
export const ColorBaseBlueGray980 = `hsl(${HuesBlueGrayHue}, 15%, 98%)`;
|
|
172
|
+
export const ColorBaseBlueGray900 = `hsl(${HuesBlueGrayHue}, 15%, 90%)`;
|
|
173
|
+
export const ColorBaseBlueGray850 = `hsl(${HuesBlueGrayHue}, 15%, 85%)`;
|
|
174
|
+
export const ColorBaseBlueGray800 = `hsl(${HuesBlueGrayHue}, 10%, 80%)`;
|
|
175
|
+
export const ColorBaseBlueGray750 = `hsl(${HuesBlueGrayHue}, 5%, 75%)`;
|
|
176
|
+
export const ColorBaseBlueGray650 = `hsl(${HuesBlueGrayHue}, 5%, 65%)`;
|
|
177
|
+
export const ColorBaseBlueGray550 = `hsl(${HuesBlueGrayHue}, 6%, 55%)`;
|
|
178
|
+
export const ColorBaseBlueGray450 = `hsl(${HuesBlueGrayHue}, 6%, 45%)`;
|
|
179
|
+
export const ColorBaseBlueGray350 = `hsl(${HuesBlueGrayHue}, 6%, 35%)`;
|
|
180
|
+
export const ColorBaseBlueGray230 = `hsl(${HuesBlueGrayHue}, 8%, 23%)`;
|
|
181
|
+
export const ColorBaseBlueGray200 = `hsl(${HuesBlueGrayHue}, 9%, 20%)`;
|
|
182
|
+
export const ColorBaseBlueGray160 = `hsl(${HuesBlueGrayHue}, 10%, 16%)`;
|
|
183
|
+
export const ColorBaseBlueGray130 = `hsl(${HuesBlueGrayHue}, 7%, 13%)`;
|
|
184
|
+
export const ColorBaseBlueDefault = ColorBaseBlue500; // Brand primary color
|
|
185
|
+
export const AliasColorBackgroundQuinary = ColorBaseBlueGray350;
|
|
186
|
+
export const AliasColorBackgroundQuarternary = ColorBaseBlueGray230;
|
|
187
|
+
export const AliasColorBackgroundTertiary = ColorBaseBlueGray200;
|
|
188
|
+
export const AliasColorBackgroundSecondary = ColorBaseBlueGray160;
|
|
189
|
+
export const AliasColorBackgroundBase = ColorBaseBlueGray130;
|
|
190
|
+
export const AliasColorOk = `${ColorBaseGreenDefault}`;
|
|
191
|
+
export const AliasColorCaution = `${ColorBaseOrangeDefault}`;
|
|
192
|
+
export const AliasColorDanger = `${ColorBaseRedDefault}`;
|
|
193
|
+
export const AliasColorBorderFocus = `${ColorBaseBlueDefault}`;
|
|
194
|
+
export const AliasColorBorderStrong = ColorBaseBlueGray550;
|
|
195
|
+
export const AliasColorBorderDefault = ColorBaseBlueGray350;
|
|
196
|
+
export const AliasColorBorderWeak = ColorBaseBlueGray230;
|
|
197
|
+
export const AliasColorTextQuarternary = ColorBaseBlueGray850;
|
|
198
|
+
export const AliasColorTextTertiary = ColorBaseBlueGray650;
|
|
199
|
+
export const AliasColorTextSecondary = ColorBaseBlueGray350;
|
|
200
|
+
export const AliasColorTextPrimary = ColorBaseBlueGray550;
|
|
201
|
+
export const AliasColorBrandPrimary = `${ColorBaseBlueDefault}`;
|
|
202
|
+
export const SpacingButtonBarGap = SpacingButtonBarPaddingBlock;
|
|
203
|
+
export const ColorBackgroundSwitchTrackActive = `${ColorBaseBrightGreenDefault}`;
|
|
204
|
+
export const ColorBackgroundButtonCautionBase = AliasColorCautionDark;
|
|
205
|
+
export const ColorBaseBlueGrayDefault = ColorBaseBlueGray450; // Background, text, borders, etc.
|
|
206
|
+
export const ColorFontInputPlaceholder = AliasColorTextSecondary;
|
|
207
|
+
export const ColorFontInputDefault = AliasColorTextTertiary;
|
|
208
|
+
export const ColorFontButtonDangerDiscreet = AliasColorDanger;
|
|
209
|
+
export const ColorFontButtonCautionDiscreet = AliasColorCaution;
|
|
210
|
+
export const ColorFontButtonOkDiscreet = AliasColorOk;
|
|
211
|
+
export const ColorFontButtonSecondaryDiscreet = AliasColorTextTertiary;
|
|
212
|
+
export const ColorFontButtonSecondaryBase = AliasColorTextQuarternary;
|
|
213
|
+
export const ColorFontButtonPrimaryDiscreet = AliasColorBrandPrimary;
|
|
214
|
+
export const ColorFontButtonPrimaryBase = AliasColorTextQuarternary;
|
|
215
|
+
export const ColorFontLink = AliasColorBrandPrimary;
|
|
216
|
+
export const ColorBorderInputInvalid = AliasColorDanger;
|
|
217
|
+
export const ColorBorderInputFocus = AliasColorBorderFocus;
|
|
218
|
+
export const ColorBorderInputDefault = AliasColorBorderWeak;
|
|
219
|
+
export const ColorBorderButtonDangerDiscreet = AliasColorDanger;
|
|
220
|
+
export const ColorBorderButtonCautionDiscreet = AliasColorCaution;
|
|
221
|
+
export const ColorBorderButtonOkDiscreet = AliasColorOk;
|
|
222
|
+
export const ColorBorderButtonSecondaryDiscreet = AliasColorBorderStrong;
|
|
223
|
+
export const ColorBorderButtonPrimaryDiscreet = AliasColorBrandPrimary;
|
|
224
|
+
export const ColorBackgroundSwitchTrackInactive = AliasColorBackgroundQuinary;
|
|
225
|
+
export const ColorBackgroundInputFocus = AliasColorBackgroundQuarternary;
|
|
226
|
+
export const ColorBackgroundInputDefault = AliasColorBackgroundBase;
|
|
227
|
+
export const ColorBackgroundButtonDangerBase = AliasColorDanger;
|
|
228
|
+
export const ColorBackgroundButtonOkBase = AliasColorOk;
|
|
229
|
+
export const ColorBackgroundButtonSecondaryBase = AliasColorBackgroundQuarternary;
|
|
230
|
+
export const ColorBackgroundButtonPrimaryBase = AliasColorBrandPrimary;
|
|
231
|
+
export const ColorBackgroundBlockFooter = AliasColorBackgroundSecondary;
|
|
232
|
+
export const ColorBackgroundBlockContent = AliasColorBackgroundTertiary;
|
|
233
|
+
export const ColorBackgroundBlockHeader = AliasColorBackgroundQuarternary;
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Tue, 22 Nov 2022 10:05:38 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
export const TransitionBaseEasingInOut = "ease-in-out";
|
|
8
|
+
export const TransitionBaseEasingDefault = "ease";
|
|
9
|
+
export const TransitionBaseDurationSlow = ".75s";
|
|
10
|
+
export const TransitionBaseDurationDefault = ".25s";
|
|
11
|
+
export const ShadowSwitchThumbFocused = "0 0 0 2px var(--alias-color-brand-primary)";
|
|
12
|
+
export const OpacityBaseDisabled = 0.5;
|
|
13
|
+
export const TypographyBaseLineHeight9xl = 1;
|
|
14
|
+
export const TypographyBaseLineHeight8xl = 1;
|
|
15
|
+
export const TypographyBaseLineHeight7xl = 1;
|
|
16
|
+
export const TypographyBaseLineHeight6xl = 1;
|
|
17
|
+
export const TypographyBaseFontLegacy = "'Roboto', 'Helvetica', 'Arial', sans-serif"; // Legacy Lens font, will be replaced with Open Sans
|
|
18
|
+
export const TypographyBaseFontPrimary = "'Open Sans', sans-serif";
|
|
19
|
+
export const SpacingPMarginTop = "0rem";
|
|
20
|
+
export const SpacingH4MarginBottom = "0rem";
|
|
21
|
+
export const SpacingH3MarginBottom = "0rem";
|
|
22
|
+
export const SpacingSwitchThumbSize = "20px";
|
|
23
|
+
export const SpacingBase95 = "2.375rem"; // Spacing multiplier 9.5
|
|
24
|
+
export const SpacingBase85 = "2.125rem"; // Spacing multiplier 8.5
|
|
25
|
+
export const SpacingBase75 = "1.875rem"; // Spacing multiplier 7.5
|
|
26
|
+
export const SpacingBase65 = "1.625rem"; // Spacing multiplier 6.5
|
|
27
|
+
export const SpacingBase55 = "1.375rem"; // Spacing multiplier 5.5
|
|
28
|
+
export const SpacingBase45 = "1.125rem"; // Spacing multiplier 4.5
|
|
29
|
+
export const SpacingBase35 = "0.875rem"; // Spacing multiplier 3.5
|
|
30
|
+
export const SpacingBase275 = "0.6875rem"; // Spacing multiplier 2.75
|
|
31
|
+
export const SpacingBase25 = "0.625rem"; // Spacing multiplier 2.5
|
|
32
|
+
export const SpacingBase225 = "0.5625rem"; // Spacing multiplier 2.25
|
|
33
|
+
export const SpacingBase175 = "0.4375rem"; // Spacing multiplier 1.75
|
|
34
|
+
export const SpacingBase15 = "0.375rem"; // Spacing multiplier 1.5
|
|
35
|
+
export const SpacingBase125 = "0.3125rem"; // Spacing multiplier 1.25
|
|
36
|
+
export const SpacingBase075 = "0.1875rem"; // Spacing multiplier 0.75
|
|
37
|
+
export const SpacingBase05 = "0.125rem"; // Spacing multiplier 0.5
|
|
38
|
+
export const SpacingBase025 = "0.0625rem"; // Spacing multiplier 0.25
|
|
39
|
+
export const SpacingBase96 = "24rem"; // Spacing multiplier 96
|
|
40
|
+
export const SpacingBase80 = "20rem"; // Spacing multiplier 80
|
|
41
|
+
export const SpacingBase72 = "18rem"; // Spacing multiplier 72
|
|
42
|
+
export const SpacingBase64 = "16rem"; // Spacing multiplier 64
|
|
43
|
+
export const SpacingBase60 = "15rem"; // Spacing multiplier 60
|
|
44
|
+
export const SpacingBase56 = "14rem"; // Spacing multiplier 56
|
|
45
|
+
export const SpacingBase52 = "13rem"; // Spacing multiplier 52
|
|
46
|
+
export const SpacingBase48 = "12rem"; // Spacing multiplier 48
|
|
47
|
+
export const SpacingBase44 = "11rem"; // Spacing multiplier 44
|
|
48
|
+
export const SpacingBase40 = "10rem"; // Spacing multiplier 40
|
|
49
|
+
export const SpacingBase36 = "9rem"; // Spacing multiplier 36
|
|
50
|
+
export const SpacingBase32 = "8rem"; // Spacing multiplier 32
|
|
51
|
+
export const SpacingBase28 = "7rem"; // Spacing multiplier 28
|
|
52
|
+
export const SpacingBase24 = "6rem"; // Spacing multiplier 24
|
|
53
|
+
export const SpacingBase20 = "5rem"; // Spacing multiplier 20
|
|
54
|
+
export const SpacingBase18 = "4.5rem"; // Spacing multiplier 18
|
|
55
|
+
export const SpacingBase16 = "4rem"; // Spacing multiplier 16
|
|
56
|
+
export const SpacingBase14 = "3.5rem"; // Spacing multiplier 14
|
|
57
|
+
export const SpacingBase12 = "3rem"; // Spacing multiplier 12
|
|
58
|
+
export const SpacingBase10 = "2.5rem"; // Spacing multiplier 10
|
|
59
|
+
export const SpacingBase9 = "2.25rem"; // Spacing multiplier 9
|
|
60
|
+
export const SpacingBase8 = "2rem"; // Spacing multiplier 8
|
|
61
|
+
export const SpacingBase7 = "1.75rem"; // Spacing multiplier 7
|
|
62
|
+
export const SpacingBase6 = "1.5rem"; // Spacing multiplier 6
|
|
63
|
+
export const SpacingBase5 = "1.25rem"; // Spacing multiplier 5
|
|
64
|
+
export const SpacingBase4 = "1rem"; // Spacing multiplier 4
|
|
65
|
+
export const SpacingBase3 = "0.75rem"; // Spacing multiplier 3
|
|
66
|
+
export const SpacingBase2 = "0.5rem"; // Spacing multiplier 2
|
|
67
|
+
export const SpacingBase1 = "0.25rem"; // Spacing multiplier 1
|
|
68
|
+
export const HuesBrightGreenLightness = "60%";
|
|
69
|
+
export const HuesBrightGreenSaturation = "60%";
|
|
70
|
+
export const HuesBrightGreenHue = "110";
|
|
71
|
+
export const HuesGreenLightness = "40%";
|
|
72
|
+
export const HuesGreenSaturation = "60%";
|
|
73
|
+
export const HuesGreenHue = "138";
|
|
74
|
+
export const HuesOrangeLightness = "60%";
|
|
75
|
+
export const HuesOrangeSaturation = "100%";
|
|
76
|
+
export const HuesOrangeHue = "38";
|
|
77
|
+
export const HuesRedLightness = "60%";
|
|
78
|
+
export const HuesRedSaturation = "100%";
|
|
79
|
+
export const HuesRedHue = "359";
|
|
80
|
+
export const HuesBlueLightness = "52%";
|
|
81
|
+
export const HuesBlueSaturation = "60%";
|
|
82
|
+
export const HuesBlueHue = "206deg";
|
|
83
|
+
export const ColorBaseTranslucentLight50 = "rgba(255, 255, 255, 0.5)";
|
|
84
|
+
export const ColorBaseTranslucentLight25 = "rgba(255, 255, 255, 0.25)";
|
|
85
|
+
export const ColorBaseTranslucentDark05 = "rgba(0, 0, 0, 0.05)";
|
|
86
|
+
export const ColorBaseTranslucentDark60 = "rgba(0, 0, 0, 0.4)";
|
|
87
|
+
export const ColorBaseTranslucentDark40 = "rgba(0, 0, 0, 0.4)";
|
|
88
|
+
export const ColorBaseTranslucentDark25 = "rgba(0, 0, 0, 0.25)";
|
|
89
|
+
export const ColorBaseTranslucentDark10 = "rgba(0, 0, 0, 0.1)";
|
|
90
|
+
export const ColorBaseBlack = "rgb(0, 0, 0)";
|
|
91
|
+
export const ColorBaseWhite = "rgb(255, 255, 255)";
|
|
92
|
+
export const SizeInputHeight = SpacingBase10;
|
|
93
|
+
export const SizeButtonHeight = SpacingBase10;
|
|
94
|
+
export const ShadowSwitchThumbDisabled = `inset 0 0 0 2px ${ColorBaseTranslucentDark40}`;
|
|
95
|
+
export const ShadowBaseInner = `inset 0 2px 4px 0 ${ColorBaseTranslucentDark05}`;
|
|
96
|
+
export const ShadowBase2xl = `0 25px 50px -12px ${ColorBaseTranslucentDark25}`;
|
|
97
|
+
export const ShadowBaseXl = `0 20px 25px -5px ${ColorBaseTranslucentDark10}, 0 8px 10px -6px ${ColorBaseTranslucentDark10}`;
|
|
98
|
+
export const ShadowBaseLg = `0 10px 15px -3px ${ColorBaseTranslucentDark10}, 0 4px 6px -4px ${ColorBaseTranslucentDark10}`;
|
|
99
|
+
export const ShadowBaseMd = `0 4px 6px -1px ${ColorBaseTranslucentDark10}, 0 2px 4px -2px ${ColorBaseTranslucentDark10}`;
|
|
100
|
+
export const ShadowBaseDefault = `0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px ${ColorBaseTranslucentDark10}`;
|
|
101
|
+
export const ShadowBaseSm = `0 0 0 2px ${ColorBaseTranslucentDark05}`;
|
|
102
|
+
export const AliasColorBackgroundHighlight25 = ColorBaseTranslucentDark05;
|
|
103
|
+
export const AliasColorBackgroundOverlayPopup = ColorBaseTranslucentDark25;
|
|
104
|
+
export const AliasColorBackgroundOverlayBlocked = ColorBaseTranslucentLight50;
|
|
105
|
+
export const AliasColorBackgroundElevationNegative = ColorBaseTranslucentDark10;
|
|
106
|
+
export const AliasColorBorderVivid = `${ColorBaseBlack}`;
|
|
107
|
+
export const AliasColorTextAccent = ColorBaseBlack;
|
|
108
|
+
export const TypographyBaseLineHeight5xl = SpacingBase12;
|
|
109
|
+
export const TypographyBaseLineHeight4xl = SpacingBase12;
|
|
110
|
+
export const TypographyBaseLineHeight3xl = SpacingBase12;
|
|
111
|
+
export const TypographyBaseLineHeight2xl = SpacingBase12;
|
|
112
|
+
export const TypographyBaseLineHeightXl = SpacingBase6;
|
|
113
|
+
export const TypographyBaseLineHeightLg = SpacingBase6;
|
|
114
|
+
export const TypographyBaseLineHeightBase = SpacingBase6;
|
|
115
|
+
export const TypographyBaseLineHeightSm = SpacingBase6;
|
|
116
|
+
export const TypographyBaseLineHeightXs = SpacingBase6;
|
|
117
|
+
export const TypographyBaseSize9xl = SpacingBase24;
|
|
118
|
+
export const TypographyBaseSize8xl = SpacingBase18;
|
|
119
|
+
export const TypographyBaseSize7xl = SpacingBase16;
|
|
120
|
+
export const TypographyBaseSize6xl = SpacingBase12;
|
|
121
|
+
export const TypographyBaseSize5xl = SpacingBase10;
|
|
122
|
+
export const TypographyBaseSize4xl = SpacingBase9;
|
|
123
|
+
export const TypographyBaseSize3xl = SpacingBase8;
|
|
124
|
+
export const TypographyBaseSize2xl = SpacingBase6;
|
|
125
|
+
export const TypographyBaseSizeXl = SpacingBase5;
|
|
126
|
+
export const TypographyBaseSizeLg = SpacingBase4;
|
|
127
|
+
export const TypographyBaseSizeBase = SpacingBase35;
|
|
128
|
+
export const TypographyBaseSizeSm = SpacingBase3;
|
|
129
|
+
export const TypographyBaseSizeXs = SpacingBase275;
|
|
130
|
+
export const SpacingPMarginBottom = SpacingBase6;
|
|
131
|
+
export const SpacingH4MarginTop = SpacingBase4;
|
|
132
|
+
export const SpacingH3MarginTop = SpacingBase4;
|
|
133
|
+
export const SpacingH2MarginBottom = SpacingBase6;
|
|
134
|
+
export const SpacingH2MarginTop = SpacingBase6;
|
|
135
|
+
export const SpacingH1MarginBottom = SpacingBase4;
|
|
136
|
+
export const SpacingH1MarginTop = SpacingBase8;
|
|
137
|
+
export const SpacingInputIconMarginY = SpacingBase25;
|
|
138
|
+
export const SpacingInputIconMarginX = SpacingBase25;
|
|
139
|
+
export const SpacingInputPaddingInlineEnd = SpacingBase10;
|
|
140
|
+
export const SpacingButtonIconSize = SpacingBase5;
|
|
141
|
+
export const SpacingBaseXl2 = SpacingBase8;
|
|
142
|
+
export const SpacingBaseXl = SpacingBase6;
|
|
143
|
+
export const SpacingBaseLg = SpacingBase4;
|
|
144
|
+
export const SpacingBaseMd = SpacingBase3;
|
|
145
|
+
export const SpacingBaseSm = SpacingBase2;
|
|
146
|
+
export const SpacingBaseXs = SpacingBase1;
|
|
147
|
+
export const HuesBlueGrayHue = HuesBlueHue;
|
|
148
|
+
export const ColorBackgroundSwitchThumb = ColorBaseWhite;
|
|
149
|
+
export const ColorBaseBrightGreen600 = `hsl(${HuesBrightGreenHue}, ${HuesBrightGreenSaturation}, ${HuesBrightGreenLightness})`;
|
|
150
|
+
export const ColorBaseGreen400 = `hsl(${HuesGreenHue}, ${HuesGreenSaturation}, ${HuesGreenLightness})`;
|
|
151
|
+
export const ColorBaseOrange600 = `hsl(${HuesOrangeHue}, ${HuesOrangeSaturation}, ${HuesOrangeLightness})`;
|
|
152
|
+
export const ColorBaseOrange400 = `hsl(${HuesOrangeHue}, ${HuesOrangeSaturation}, 40%)`;
|
|
153
|
+
export const ColorBaseRed600 = `hsl(${HuesRedHue}, ${HuesRedSaturation}, ${HuesRedLightness})`;
|
|
154
|
+
export const ColorBaseBlue600 = `hsl(${HuesBlueHue}, ${HuesBlueSaturation}, 60%)`;
|
|
155
|
+
export const ColorBaseBlue500 = `hsl(${HuesBlueHue}, ${HuesBlueSaturation}, ${HuesBlueLightness})`;
|
|
156
|
+
export const AliasColorInfo = ColorBaseBlue600;
|
|
157
|
+
export const AliasColorCautionDark = `${ColorBaseOrange400}`;
|
|
158
|
+
export const SpacingInputPaddingInlineStart = SpacingBaseMd;
|
|
159
|
+
export const SpacingButtonIconMarginInlineEnd = SpacingBaseMd;
|
|
160
|
+
export const SpacingButtonPaddingY = SpacingBaseSm;
|
|
161
|
+
export const SpacingButtonPaddingX = SpacingBaseLg;
|
|
162
|
+
export const SpacingButtonBarPaddingBlock = SpacingBaseLg;
|
|
163
|
+
export const SpacingButtonBarPaddingInlineLarge = SpacingBaseXl;
|
|
164
|
+
export const SpacingButtonBarPaddingInline = SpacingBaseLg;
|
|
165
|
+
export const ColorFontInputFocus = AliasColorTextAccent;
|
|
166
|
+
export const ColorBackgroundSwitchHighlight = AliasColorBackgroundHighlight25;
|
|
167
|
+
export const ColorBaseBrightGreenDefault = ColorBaseBrightGreen600;
|
|
168
|
+
export const ColorBaseGreenDefault = ColorBaseGreen400;
|
|
169
|
+
export const ColorBaseOrangeDefault = ColorBaseOrange600;
|
|
170
|
+
export const ColorBaseRedDefault = ColorBaseRed600;
|
|
171
|
+
export const ColorBaseBlueGray980 = `hsl(${HuesBlueGrayHue}, 15%, 98%)`;
|
|
172
|
+
export const ColorBaseBlueGray900 = `hsl(${HuesBlueGrayHue}, 15%, 90%)`;
|
|
173
|
+
export const ColorBaseBlueGray850 = `hsl(${HuesBlueGrayHue}, 15%, 85%)`;
|
|
174
|
+
export const ColorBaseBlueGray800 = `hsl(${HuesBlueGrayHue}, 10%, 80%)`;
|
|
175
|
+
export const ColorBaseBlueGray750 = `hsl(${HuesBlueGrayHue}, 5%, 75%)`;
|
|
176
|
+
export const ColorBaseBlueGray650 = `hsl(${HuesBlueGrayHue}, 5%, 65%)`;
|
|
177
|
+
export const ColorBaseBlueGray550 = `hsl(${HuesBlueGrayHue}, 6%, 55%)`;
|
|
178
|
+
export const ColorBaseBlueGray450 = `hsl(${HuesBlueGrayHue}, 6%, 45%)`;
|
|
179
|
+
export const ColorBaseBlueGray350 = `hsl(${HuesBlueGrayHue}, 6%, 35%)`;
|
|
180
|
+
export const ColorBaseBlueGray230 = `hsl(${HuesBlueGrayHue}, 8%, 23%)`;
|
|
181
|
+
export const ColorBaseBlueGray200 = `hsl(${HuesBlueGrayHue}, 9%, 20%)`;
|
|
182
|
+
export const ColorBaseBlueGray160 = `hsl(${HuesBlueGrayHue}, 10%, 16%)`;
|
|
183
|
+
export const ColorBaseBlueGray130 = `hsl(${HuesBlueGrayHue}, 7%, 13%)`;
|
|
184
|
+
export const ColorBaseBlueDefault = ColorBaseBlue500; // Brand primary color
|
|
185
|
+
export const AliasColorBackgroundQuinary = ColorBaseBlueGray650;
|
|
186
|
+
export const AliasColorBackgroundQuarternary = ColorBaseBlueGray850;
|
|
187
|
+
export const AliasColorBackgroundTertiary = ColorBaseBlueGray900;
|
|
188
|
+
export const AliasColorBackgroundSecondary = ColorBaseBlueGray800;
|
|
189
|
+
export const AliasColorBackgroundBase = ColorBaseBlueGray980;
|
|
190
|
+
export const AliasColorOk = `${ColorBaseGreenDefault}`;
|
|
191
|
+
export const AliasColorCaution = `${ColorBaseOrangeDefault}`;
|
|
192
|
+
export const AliasColorDanger = `${ColorBaseRedDefault}`;
|
|
193
|
+
export const AliasColorBorderFocus = `${ColorBaseBlueDefault}`;
|
|
194
|
+
export const AliasColorBorderStrong = ColorBaseBlueGray450;
|
|
195
|
+
export const AliasColorBorderDefault = ColorBaseBlueGray650;
|
|
196
|
+
export const AliasColorBorderWeak = ColorBaseBlueGray850;
|
|
197
|
+
export const AliasColorTextQuarternary = ColorBaseBlueGray980;
|
|
198
|
+
export const AliasColorTextTertiary = ColorBaseBlueGray230;
|
|
199
|
+
export const AliasColorTextSecondary = ColorBaseBlueGray750;
|
|
200
|
+
export const AliasColorTextPrimary = ColorBaseBlueGray350;
|
|
201
|
+
export const AliasColorBrandPrimary = `${ColorBaseBlueDefault}`;
|
|
202
|
+
export const SpacingButtonBarGap = SpacingButtonBarPaddingBlock;
|
|
203
|
+
export const ColorBackgroundSwitchTrackActive = `${ColorBaseBrightGreenDefault}`;
|
|
204
|
+
export const ColorBackgroundButtonCautionBase = AliasColorCautionDark;
|
|
205
|
+
export const ColorBaseBlueGrayDefault = ColorBaseBlueGray450; // Background, text, borders, etc.
|
|
206
|
+
export const ColorFontInputPlaceholder = AliasColorTextSecondary;
|
|
207
|
+
export const ColorFontInputDefault = AliasColorTextTertiary;
|
|
208
|
+
export const ColorFontButtonDangerDiscreet = AliasColorDanger;
|
|
209
|
+
export const ColorFontButtonCautionDiscreet = AliasColorCaution;
|
|
210
|
+
export const ColorFontButtonOkDiscreet = AliasColorOk;
|
|
211
|
+
export const ColorFontButtonSecondaryDiscreet = AliasColorTextTertiary;
|
|
212
|
+
export const ColorFontButtonSecondaryBase = AliasColorTextQuarternary;
|
|
213
|
+
export const ColorFontButtonPrimaryDiscreet = AliasColorBrandPrimary;
|
|
214
|
+
export const ColorFontButtonPrimaryBase = AliasColorTextQuarternary;
|
|
215
|
+
export const ColorFontLink = AliasColorBrandPrimary;
|
|
216
|
+
export const ColorBorderInputInvalid = AliasColorDanger;
|
|
217
|
+
export const ColorBorderInputFocus = AliasColorBorderFocus;
|
|
218
|
+
export const ColorBorderInputDefault = AliasColorBorderWeak;
|
|
219
|
+
export const ColorBorderButtonDangerDiscreet = AliasColorDanger;
|
|
220
|
+
export const ColorBorderButtonCautionDiscreet = AliasColorCaution;
|
|
221
|
+
export const ColorBorderButtonOkDiscreet = AliasColorOk;
|
|
222
|
+
export const ColorBorderButtonSecondaryDiscreet = AliasColorBorderStrong;
|
|
223
|
+
export const ColorBorderButtonPrimaryDiscreet = AliasColorBrandPrimary;
|
|
224
|
+
export const ColorBackgroundSwitchTrackInactive = AliasColorBackgroundQuinary;
|
|
225
|
+
export const ColorBackgroundInputFocus = AliasColorBackgroundQuarternary;
|
|
226
|
+
export const ColorBackgroundInputDefault = AliasColorBackgroundBase;
|
|
227
|
+
export const ColorBackgroundButtonDangerBase = AliasColorDanger;
|
|
228
|
+
export const ColorBackgroundButtonOkBase = AliasColorOk;
|
|
229
|
+
export const ColorBackgroundButtonSecondaryBase = AliasColorBackgroundQuarternary;
|
|
230
|
+
export const ColorBackgroundButtonPrimaryBase = AliasColorBrandPrimary;
|
|
231
|
+
export const ColorBackgroundBlockFooter = AliasColorBackgroundSecondary;
|
|
232
|
+
export const ColorBackgroundBlockContent = AliasColorBackgroundTertiary;
|
|
233
|
+
export const ColorBackgroundBlockHeader = AliasColorBackgroundQuarternary;
|
package/lib/web/colors/dark.js
CHANGED
package/lib/web/colors/light.js
CHANGED