@paygreen/pgui 3.1.4 → 3.2.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/dist/components/card-expandable/card-expandable.d.ts +3 -1
- package/dist/components/data-table/hooks/use-table-styling.d.ts +15 -15
- package/dist/components/field-wrapper/field-wrapper.d.ts +31 -21
- package/dist/components/ui/toast-info-icon.d.ts +1 -0
- package/dist/components/ui/toaster.d.ts +2 -1
- package/dist/foundations/form-controls/all-controls-section.d.ts +2 -0
- package/dist/foundations/form-controls/chakra-native-select.d.ts +6 -0
- package/dist/foundations/form-controls/constants.d.ts +4 -0
- package/dist/foundations/form-controls/sizes-section.d.ts +2 -0
- package/dist/foundations/form-controls/states-section.d.ts +2 -0
- package/dist/index.js +5 -5
- package/dist/index.mjs +3148 -2776
- package/dist/pgui.css +1 -1
- package/dist/styled-system.d.ts +3 -2
- package/dist/theme/recipes/button-recipe.d.ts +24 -0
- package/dist/theme/recipes/card-recipe.d.ts +7 -2
- package/dist/theme/recipes/index.d.ts +24 -0
- package/dist/theme/recipes/toast-recipe.d.ts +3 -0
- package/dist/theme/semanticTokens/colors.d.ts +43 -0
- package/dist/theme/semanticTokens/index.d.ts +80 -0
- package/dist/theme/semanticTokens/shadows.d.ts +42 -0
- package/dist/theme/tokens/colors.d.ts +35 -0
- package/dist/theme/tokens/font-weights.d.ts +35 -0
- package/dist/theme/tokens/index.d.ts +64 -0
- package/dist/welcome/charter-color.d.ts +2 -0
- package/dist/welcome/charter-section.d.ts +8 -0
- package/dist/welcome/charter-snapshot.d.ts +2 -0
- package/dist/welcome/charter-type-shape.d.ts +2 -0
- package/dist/welcome/graphic-charter.d.ts +2 -0
- package/dist/welcome/token-chip.d.ts +7 -0
- package/dist/welcome/welcome-hero.d.ts +2 -0
- package/package.json +27 -27
- package/src/components/select/select.css +4 -0
package/dist/pgui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__control--is-disabled{opacity:.5!important;cursor:not-allowed!important}.select-custom__control--is-disabled .select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-focused{background-color:var(--chakra-colors-bg-muted)!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}
|
|
1
|
+
:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: .8;--PhoneInputInternationalIconGlobe-opacity: .65;--PhoneInputCountrySelect-marginRight: .35em;--PhoneInputCountrySelectArrow-width: .3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: .45;--PhoneInputCountrySelectArrow-color: currentColor;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled],.PhoneInputCountrySelect[readonly]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:"";width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.select-custom-container{font-size:var(--chakra-font-sizes-sm);min-width:200px;display:inline-block;width:100%}.select-custom-container--error .select-custom__control{border-color:var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control--is-focused{border-color:var(--chakra-colors-border-error)!important;box-shadow:0 0 0 1px var(--chakra-colors-border-error)!important}.select-custom-container--error .select-custom__control:hover{border-color:var(--chakra-colors-border-error)!important}.select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__control--is-disabled{opacity:.5!important;cursor:not-allowed!important}.select-custom__control--is-disabled .select-custom__placeholder{color:var(--chakra-colors-fg-muted)!important}.select-custom__single-value{color:var(--chakra-colors-fg)!important}.select-custom__control{border:1px solid var(--chakra-colors-border)!important}.select-custom__control,.select-custom__control--is-focused{min-height:var(--chakra-sizes-9)!important;background-color:transparent!important}.select-custom__control--is-focused{box-shadow:none!important;outline-offset:0!important;outline-width:var(--focus-ring-width, 1px)!important;outline-color:var(--chakra-colors-color-palette-focus-ring)!important;outline-style:var(--focus-ring-style, solid)!important;border-color:var(--chakra-colors-color-palette-focus-ring)!important}@keyframes pgui-select-menu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-custom__menu{z-index:1000!important;border:1px solid var(--chakra-colors-border)!important;background-color:var(--chakra-colors-bg-panel)!important;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f!important;border-radius:var(--chakra-radii-md)!important;animation:pgui-select-menu-in .2s cubic-bezier(.4,0,.2,1)}.select-custom__menu-list{border-radius:var(--chakra-radii-md)!important;padding:0!important}.select-custom__multi-value{background-color:var(--chakra-colors-bg-panel)!important;border:1px solid var(--chakra-colors-border)!important;border-radius:var(--chakra-radii-sm)!important}.select-custom__multi-value__label{color:var(--chakra-colors-fg)!important}.select-custom__option{background-color:var(--chakra-colors-bg)!important;font-size:var(--chakra-font-sizes-sm)!important;padding:5px 10px!important}.select-custom__option:hover{background-color:var(--chakra-colors-bg-muted)!important;cursor:pointer!important}.select-custom__option--is-focused{background-color:var(--chakra-colors-bg-muted)!important}.select-custom__option--is-selected{color:var(--chakra-colors-fg)!important;background-color:var(--chakra-colors-bg-muted)!important}.select-custom__multi-value__label{font-size:var(--chakra-font-sizes-sm)!important}.select-custom__multi-value__remove{color:var(--chakra-colors-fg)!important}.select-custom__multi-value__remove:hover{cursor:pointer!important;background-color:var(--chakra-colors-danger-muted)!important}.select-custom__menu-notice{color:var(--chakra-colors-fg-muted)!important}.select-custom__indicator svg{cursor:pointer;width:15px;height:15px}
|
package/dist/styled-system.d.ts
CHANGED
|
@@ -17,8 +17,9 @@
|
|
|
17
17
|
declare module '@chakra-ui/react' {
|
|
18
18
|
interface CardRootProps {
|
|
19
19
|
/**
|
|
20
|
-
* When true, applies `cursor: pointer`,
|
|
21
|
-
*
|
|
20
|
+
* When true, applies `cursor: pointer`, rest shadow `card`, and a
|
|
21
|
+
* `fast` / `standard` transition on background and shadow. Hover uses
|
|
22
|
+
* a light surface fill plus the `cardHover` token.
|
|
22
23
|
* The consumer remains responsible for `role="button"`, `tabIndex`,
|
|
23
24
|
* and keyboard handlers.
|
|
24
25
|
*/
|
|
@@ -49,6 +49,30 @@ declare const buttonRecipe: import('@chakra-ui/react').RecipeDefinition<{
|
|
|
49
49
|
* the same in both), so it intentionally does not flip with the color mode.
|
|
50
50
|
*/
|
|
51
51
|
variant: {
|
|
52
|
+
outline: {
|
|
53
|
+
_dark: {
|
|
54
|
+
bg: "bg.emphasized";
|
|
55
|
+
borderColor: "border.muted";
|
|
56
|
+
_hover: {
|
|
57
|
+
bg: "bg.hover";
|
|
58
|
+
};
|
|
59
|
+
_expanded: {
|
|
60
|
+
bg: "bg.hover";
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
surface: {
|
|
65
|
+
_dark: {
|
|
66
|
+
bg: "bg.emphasized";
|
|
67
|
+
borderColor: "border.muted";
|
|
68
|
+
_hover: {
|
|
69
|
+
bg: "bg.hover";
|
|
70
|
+
};
|
|
71
|
+
_expanded: {
|
|
72
|
+
bg: "bg.hover";
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
};
|
|
52
76
|
white: {
|
|
53
77
|
color: "white";
|
|
54
78
|
bg: "transparent";
|
|
@@ -5,7 +5,7 @@ declare const cardRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root"
|
|
|
5
5
|
h: "fit-content";
|
|
6
6
|
w: "100%";
|
|
7
7
|
borderWidth: "1px";
|
|
8
|
-
borderColor: "border";
|
|
8
|
+
borderColor: "border.muted";
|
|
9
9
|
boxShadow: "card";
|
|
10
10
|
};
|
|
11
11
|
description: {
|
|
@@ -17,10 +17,15 @@ declare const cardRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root"
|
|
|
17
17
|
true: {
|
|
18
18
|
root: {
|
|
19
19
|
cursor: "pointer";
|
|
20
|
-
|
|
20
|
+
boxShadow: "card";
|
|
21
|
+
transitionProperty: "background-color, box-shadow";
|
|
21
22
|
transitionDuration: "fast";
|
|
22
23
|
transitionTimingFunction: "standard";
|
|
23
24
|
_hover: {
|
|
25
|
+
bg: {
|
|
26
|
+
_light: "bg.subtle";
|
|
27
|
+
_dark: "bg.emphasized";
|
|
28
|
+
};
|
|
24
29
|
boxShadow: "cardHover";
|
|
25
30
|
};
|
|
26
31
|
};
|
|
@@ -64,6 +64,30 @@ declare const recipes: {
|
|
|
64
64
|
};
|
|
65
65
|
};
|
|
66
66
|
variant: {
|
|
67
|
+
outline: {
|
|
68
|
+
_dark: {
|
|
69
|
+
bg: "bg.emphasized";
|
|
70
|
+
borderColor: "border.muted";
|
|
71
|
+
_hover: {
|
|
72
|
+
bg: "bg.hover";
|
|
73
|
+
};
|
|
74
|
+
_expanded: {
|
|
75
|
+
bg: "bg.hover";
|
|
76
|
+
};
|
|
77
|
+
};
|
|
78
|
+
};
|
|
79
|
+
surface: {
|
|
80
|
+
_dark: {
|
|
81
|
+
bg: "bg.emphasized";
|
|
82
|
+
borderColor: "border.muted";
|
|
83
|
+
_hover: {
|
|
84
|
+
bg: "bg.hover";
|
|
85
|
+
};
|
|
86
|
+
_expanded: {
|
|
87
|
+
bg: "bg.hover";
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
};
|
|
67
91
|
white: {
|
|
68
92
|
color: "white";
|
|
69
93
|
bg: "transparent";
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const getToastPalette: (type: string | undefined) => "success" | "danger" | "warning" | "info";
|
|
2
|
+
declare const toastRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"title" | "root" | "description" | "indicator" | "closeTrigger" | "actionTrigger", import('@chakra-ui/react').SlotRecipeVariantRecord<"title" | "root" | "description" | "indicator" | "closeTrigger" | "actionTrigger">>;
|
|
3
|
+
export default toastRecipe;
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dark surfaces: one charcoal family, 1–2 shade steps.
|
|
3
|
+
* canvas = page + sidebar; panel = cards + tables.
|
|
4
|
+
* Body text is matte off-white. Scale: DEFAULT > muted > subtle.
|
|
5
|
+
*/
|
|
1
6
|
declare const colors: {
|
|
2
7
|
main: {
|
|
3
8
|
layout: {
|
|
@@ -32,6 +37,12 @@ declare const colors: {
|
|
|
32
37
|
_dark: string;
|
|
33
38
|
};
|
|
34
39
|
};
|
|
40
|
+
hover: {
|
|
41
|
+
value: {
|
|
42
|
+
_light: string;
|
|
43
|
+
_dark: string;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
35
46
|
inverted: {
|
|
36
47
|
value: {
|
|
37
48
|
_light: string;
|
|
@@ -395,6 +406,38 @@ declare const colors: {
|
|
|
395
406
|
};
|
|
396
407
|
};
|
|
397
408
|
};
|
|
409
|
+
orange: {
|
|
410
|
+
contrast: {
|
|
411
|
+
value: {
|
|
412
|
+
_light: string;
|
|
413
|
+
_dark: string;
|
|
414
|
+
};
|
|
415
|
+
};
|
|
416
|
+
};
|
|
417
|
+
green: {
|
|
418
|
+
contrast: {
|
|
419
|
+
value: {
|
|
420
|
+
_light: string;
|
|
421
|
+
_dark: string;
|
|
422
|
+
};
|
|
423
|
+
};
|
|
424
|
+
};
|
|
425
|
+
teal: {
|
|
426
|
+
contrast: {
|
|
427
|
+
value: {
|
|
428
|
+
_light: string;
|
|
429
|
+
_dark: string;
|
|
430
|
+
};
|
|
431
|
+
};
|
|
432
|
+
};
|
|
433
|
+
cyan: {
|
|
434
|
+
contrast: {
|
|
435
|
+
value: {
|
|
436
|
+
_light: string;
|
|
437
|
+
_dark: string;
|
|
438
|
+
};
|
|
439
|
+
};
|
|
440
|
+
};
|
|
398
441
|
sidebar: {
|
|
399
442
|
fg: {
|
|
400
443
|
value: {
|
|
@@ -33,6 +33,12 @@ declare const semanticThemeTokens: {
|
|
|
33
33
|
_dark: string;
|
|
34
34
|
};
|
|
35
35
|
};
|
|
36
|
+
hover: {
|
|
37
|
+
value: {
|
|
38
|
+
_light: string;
|
|
39
|
+
_dark: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
36
42
|
inverted: {
|
|
37
43
|
value: {
|
|
38
44
|
_light: string;
|
|
@@ -396,6 +402,38 @@ declare const semanticThemeTokens: {
|
|
|
396
402
|
};
|
|
397
403
|
};
|
|
398
404
|
};
|
|
405
|
+
orange: {
|
|
406
|
+
contrast: {
|
|
407
|
+
value: {
|
|
408
|
+
_light: string;
|
|
409
|
+
_dark: string;
|
|
410
|
+
};
|
|
411
|
+
};
|
|
412
|
+
};
|
|
413
|
+
green: {
|
|
414
|
+
contrast: {
|
|
415
|
+
value: {
|
|
416
|
+
_light: string;
|
|
417
|
+
_dark: string;
|
|
418
|
+
};
|
|
419
|
+
};
|
|
420
|
+
};
|
|
421
|
+
teal: {
|
|
422
|
+
contrast: {
|
|
423
|
+
value: {
|
|
424
|
+
_light: string;
|
|
425
|
+
_dark: string;
|
|
426
|
+
};
|
|
427
|
+
};
|
|
428
|
+
};
|
|
429
|
+
cyan: {
|
|
430
|
+
contrast: {
|
|
431
|
+
value: {
|
|
432
|
+
_light: string;
|
|
433
|
+
_dark: string;
|
|
434
|
+
};
|
|
435
|
+
};
|
|
436
|
+
};
|
|
399
437
|
sidebar: {
|
|
400
438
|
fg: {
|
|
401
439
|
value: {
|
|
@@ -460,6 +498,48 @@ declare const semanticThemeTokens: {
|
|
|
460
498
|
};
|
|
461
499
|
};
|
|
462
500
|
shadows: {
|
|
501
|
+
xs: {
|
|
502
|
+
value: {
|
|
503
|
+
_light: string;
|
|
504
|
+
_dark: string;
|
|
505
|
+
};
|
|
506
|
+
};
|
|
507
|
+
sm: {
|
|
508
|
+
value: {
|
|
509
|
+
_light: string;
|
|
510
|
+
_dark: string;
|
|
511
|
+
};
|
|
512
|
+
};
|
|
513
|
+
md: {
|
|
514
|
+
value: {
|
|
515
|
+
_light: string;
|
|
516
|
+
_dark: string;
|
|
517
|
+
};
|
|
518
|
+
};
|
|
519
|
+
lg: {
|
|
520
|
+
value: {
|
|
521
|
+
_light: string;
|
|
522
|
+
_dark: string;
|
|
523
|
+
};
|
|
524
|
+
};
|
|
525
|
+
xl: {
|
|
526
|
+
value: {
|
|
527
|
+
_light: string;
|
|
528
|
+
_dark: string;
|
|
529
|
+
};
|
|
530
|
+
};
|
|
531
|
+
'2xl': {
|
|
532
|
+
value: {
|
|
533
|
+
_light: string;
|
|
534
|
+
_dark: string;
|
|
535
|
+
};
|
|
536
|
+
};
|
|
537
|
+
inner: {
|
|
538
|
+
value: {
|
|
539
|
+
_light: string;
|
|
540
|
+
_dark: string;
|
|
541
|
+
};
|
|
542
|
+
};
|
|
463
543
|
card: {
|
|
464
544
|
value: {
|
|
465
545
|
_light: string;
|
|
@@ -1,4 +1,46 @@
|
|
|
1
1
|
declare const shadows: {
|
|
2
|
+
xs: {
|
|
3
|
+
value: {
|
|
4
|
+
_light: string;
|
|
5
|
+
_dark: string;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
sm: {
|
|
9
|
+
value: {
|
|
10
|
+
_light: string;
|
|
11
|
+
_dark: string;
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
md: {
|
|
15
|
+
value: {
|
|
16
|
+
_light: string;
|
|
17
|
+
_dark: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
lg: {
|
|
21
|
+
value: {
|
|
22
|
+
_light: string;
|
|
23
|
+
_dark: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
xl: {
|
|
27
|
+
value: {
|
|
28
|
+
_light: string;
|
|
29
|
+
_dark: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
'2xl': {
|
|
33
|
+
value: {
|
|
34
|
+
_light: string;
|
|
35
|
+
_dark: string;
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
inner: {
|
|
39
|
+
value: {
|
|
40
|
+
_light: string;
|
|
41
|
+
_dark: string;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
2
44
|
card: {
|
|
3
45
|
value: {
|
|
4
46
|
_light: string;
|
|
@@ -103,6 +103,9 @@ declare const colors: {
|
|
|
103
103
|
20: {
|
|
104
104
|
value: string;
|
|
105
105
|
};
|
|
106
|
+
28: {
|
|
107
|
+
value: string;
|
|
108
|
+
};
|
|
106
109
|
30: {
|
|
107
110
|
value: string;
|
|
108
111
|
};
|
|
@@ -147,6 +150,9 @@ declare const colors: {
|
|
|
147
150
|
20: {
|
|
148
151
|
value: string;
|
|
149
152
|
};
|
|
153
|
+
22: {
|
|
154
|
+
value: string;
|
|
155
|
+
};
|
|
150
156
|
30: {
|
|
151
157
|
value: string;
|
|
152
158
|
};
|
|
@@ -191,6 +197,9 @@ declare const colors: {
|
|
|
191
197
|
20: {
|
|
192
198
|
value: string;
|
|
193
199
|
};
|
|
200
|
+
28: {
|
|
201
|
+
value: string;
|
|
202
|
+
};
|
|
194
203
|
30: {
|
|
195
204
|
value: string;
|
|
196
205
|
};
|
|
@@ -238,6 +247,9 @@ declare const colors: {
|
|
|
238
247
|
30: {
|
|
239
248
|
value: string;
|
|
240
249
|
};
|
|
250
|
+
32: {
|
|
251
|
+
value: string;
|
|
252
|
+
};
|
|
241
253
|
35: {
|
|
242
254
|
value: string;
|
|
243
255
|
};
|
|
@@ -283,6 +295,29 @@ declare const colors: {
|
|
|
283
295
|
value: string;
|
|
284
296
|
};
|
|
285
297
|
};
|
|
298
|
+
lm_dark: {
|
|
299
|
+
canvas: {
|
|
300
|
+
value: string;
|
|
301
|
+
};
|
|
302
|
+
panel: {
|
|
303
|
+
value: string;
|
|
304
|
+
};
|
|
305
|
+
emphasized: {
|
|
306
|
+
value: string;
|
|
307
|
+
};
|
|
308
|
+
hover: {
|
|
309
|
+
value: string;
|
|
310
|
+
};
|
|
311
|
+
fg: {
|
|
312
|
+
value: string;
|
|
313
|
+
};
|
|
314
|
+
fgMuted: {
|
|
315
|
+
value: string;
|
|
316
|
+
};
|
|
317
|
+
fgSubtle: {
|
|
318
|
+
value: string;
|
|
319
|
+
};
|
|
320
|
+
};
|
|
286
321
|
opacities: {
|
|
287
322
|
white: {
|
|
288
323
|
3: {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Named scale stays strictly increasing.
|
|
3
|
+
* `bold` is 600 (was 700). `semibold` sits between medium and bold
|
|
4
|
+
* so it does not collide with either.
|
|
5
|
+
*/
|
|
6
|
+
declare const fontWeights: {
|
|
7
|
+
thin: {
|
|
8
|
+
value: string;
|
|
9
|
+
};
|
|
10
|
+
extralight: {
|
|
11
|
+
value: string;
|
|
12
|
+
};
|
|
13
|
+
light: {
|
|
14
|
+
value: string;
|
|
15
|
+
};
|
|
16
|
+
normal: {
|
|
17
|
+
value: string;
|
|
18
|
+
};
|
|
19
|
+
medium: {
|
|
20
|
+
value: string;
|
|
21
|
+
};
|
|
22
|
+
semibold: {
|
|
23
|
+
value: string;
|
|
24
|
+
};
|
|
25
|
+
bold: {
|
|
26
|
+
value: string;
|
|
27
|
+
};
|
|
28
|
+
extrabold: {
|
|
29
|
+
value: string;
|
|
30
|
+
};
|
|
31
|
+
black: {
|
|
32
|
+
value: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export default fontWeights;
|
|
@@ -142,6 +142,9 @@ declare const themeTokens: {
|
|
|
142
142
|
20: {
|
|
143
143
|
value: string;
|
|
144
144
|
};
|
|
145
|
+
28: {
|
|
146
|
+
value: string;
|
|
147
|
+
};
|
|
145
148
|
30: {
|
|
146
149
|
value: string;
|
|
147
150
|
};
|
|
@@ -186,6 +189,9 @@ declare const themeTokens: {
|
|
|
186
189
|
20: {
|
|
187
190
|
value: string;
|
|
188
191
|
};
|
|
192
|
+
22: {
|
|
193
|
+
value: string;
|
|
194
|
+
};
|
|
189
195
|
30: {
|
|
190
196
|
value: string;
|
|
191
197
|
};
|
|
@@ -230,6 +236,9 @@ declare const themeTokens: {
|
|
|
230
236
|
20: {
|
|
231
237
|
value: string;
|
|
232
238
|
};
|
|
239
|
+
28: {
|
|
240
|
+
value: string;
|
|
241
|
+
};
|
|
233
242
|
30: {
|
|
234
243
|
value: string;
|
|
235
244
|
};
|
|
@@ -277,6 +286,9 @@ declare const themeTokens: {
|
|
|
277
286
|
30: {
|
|
278
287
|
value: string;
|
|
279
288
|
};
|
|
289
|
+
32: {
|
|
290
|
+
value: string;
|
|
291
|
+
};
|
|
280
292
|
35: {
|
|
281
293
|
value: string;
|
|
282
294
|
};
|
|
@@ -322,6 +334,29 @@ declare const themeTokens: {
|
|
|
322
334
|
value: string;
|
|
323
335
|
};
|
|
324
336
|
};
|
|
337
|
+
lm_dark: {
|
|
338
|
+
canvas: {
|
|
339
|
+
value: string;
|
|
340
|
+
};
|
|
341
|
+
panel: {
|
|
342
|
+
value: string;
|
|
343
|
+
};
|
|
344
|
+
emphasized: {
|
|
345
|
+
value: string;
|
|
346
|
+
};
|
|
347
|
+
hover: {
|
|
348
|
+
value: string;
|
|
349
|
+
};
|
|
350
|
+
fg: {
|
|
351
|
+
value: string;
|
|
352
|
+
};
|
|
353
|
+
fgMuted: {
|
|
354
|
+
value: string;
|
|
355
|
+
};
|
|
356
|
+
fgSubtle: {
|
|
357
|
+
value: string;
|
|
358
|
+
};
|
|
359
|
+
};
|
|
325
360
|
opacities: {
|
|
326
361
|
white: {
|
|
327
362
|
3: {
|
|
@@ -469,6 +504,35 @@ declare const themeTokens: {
|
|
|
469
504
|
value: string;
|
|
470
505
|
};
|
|
471
506
|
};
|
|
507
|
+
fontWeights: {
|
|
508
|
+
thin: {
|
|
509
|
+
value: string;
|
|
510
|
+
};
|
|
511
|
+
extralight: {
|
|
512
|
+
value: string;
|
|
513
|
+
};
|
|
514
|
+
light: {
|
|
515
|
+
value: string;
|
|
516
|
+
};
|
|
517
|
+
normal: {
|
|
518
|
+
value: string;
|
|
519
|
+
};
|
|
520
|
+
medium: {
|
|
521
|
+
value: string;
|
|
522
|
+
};
|
|
523
|
+
semibold: {
|
|
524
|
+
value: string;
|
|
525
|
+
};
|
|
526
|
+
bold: {
|
|
527
|
+
value: string;
|
|
528
|
+
};
|
|
529
|
+
extrabold: {
|
|
530
|
+
value: string;
|
|
531
|
+
};
|
|
532
|
+
black: {
|
|
533
|
+
value: string;
|
|
534
|
+
};
|
|
535
|
+
};
|
|
472
536
|
sizes: {
|
|
473
537
|
max: {
|
|
474
538
|
value: string;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
type CharterSectionProps = {
|
|
3
|
+
kicker: string;
|
|
4
|
+
title: string;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
};
|
|
7
|
+
declare const CharterSection: ({ kicker, title, children }: CharterSectionProps) => import("react").JSX.Element;
|
|
8
|
+
export default CharterSection;
|