reshaped 3.8.3 → 3.8.4-canary.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/bundle.css +1 -1
- package/dist/bundle.js +8 -8
- package/dist/components/Accordion/Accordion.d.ts +1 -6
- package/dist/components/Accordion/Accordion.js +0 -4
- package/dist/components/Accordion/index.d.ts +8 -1
- package/dist/components/Accordion/index.js +7 -1
- package/dist/components/Actionable/Actionable.types.d.ts +1 -1
- package/dist/components/Autocomplete/Autocomplete.d.ts +2 -4
- package/dist/components/Autocomplete/Autocomplete.js +1 -2
- package/dist/components/Autocomplete/index.d.ts +5 -1
- package/dist/components/Autocomplete/index.js +4 -1
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +1 -1
- package/dist/components/Badge/Badge.d.ts +2 -1
- package/dist/components/Badge/Badge.js +0 -2
- package/dist/components/Badge/Badge.types.d.ts +1 -6
- package/dist/components/Badge/index.d.ts +6 -1
- package/dist/components/Badge/index.js +5 -1
- package/dist/components/Badge/tests/Badge.stories.d.ts +3 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +1 -4
- package/dist/components/Breadcrumbs/Breadcrumbs.js +0 -2
- package/dist/components/Breadcrumbs/index.d.ts +6 -1
- package/dist/components/Breadcrumbs/index.js +5 -1
- package/dist/components/Button/Button.d.ts +14 -1
- package/dist/components/Button/Button.js +0 -4
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Button/Button.types.d.ts +1 -7
- package/dist/components/Button/index.d.ts +8 -1
- package/dist/components/Button/index.js +7 -1
- package/dist/components/Button/tests/Button.stories.d.ts +16 -1
- package/dist/components/Carousel/Carousel.types.d.ts +2 -1
- package/dist/components/Carousel/CarouselControl.d.ts +2 -1
- package/dist/components/ContextMenu/ContextMenu.d.ts +1 -8
- package/dist/components/ContextMenu/ContextMenu.js +0 -5
- package/dist/components/ContextMenu/index.d.ts +10 -1
- package/dist/components/ContextMenu/index.js +9 -1
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +7 -15
- package/dist/components/DropdownMenu/DropdownMenu.js +7 -14
- package/dist/components/DropdownMenu/index.d.ts +12 -1
- package/dist/components/DropdownMenu/index.js +11 -1
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +5 -5
- package/dist/components/FileUpload/FileUpload.d.ts +2 -4
- package/dist/components/FileUpload/FileUpload.js +1 -2
- package/dist/components/FileUpload/index.d.ts +5 -1
- package/dist/components/FileUpload/index.js +4 -1
- package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +1 -1
- package/dist/components/Flyout/Flyout.d.ts +1 -6
- package/dist/components/Flyout/Flyout.js +0 -4
- package/dist/components/Flyout/index.d.ts +8 -1
- package/dist/components/Flyout/index.js +7 -1
- package/dist/components/FormControl/FormControl.d.ts +1 -8
- package/dist/components/FormControl/FormControl.js +0 -6
- package/dist/components/FormControl/index.d.ts +10 -1
- package/dist/components/FormControl/index.js +9 -1
- package/dist/components/Grid/Grid.d.ts +4 -4
- package/dist/components/Grid/Grid.js +1 -2
- package/dist/components/Grid/index.d.ts +5 -1
- package/dist/components/Grid/index.js +4 -1
- package/dist/components/Grid/tests/Grid.stories.d.ts +2 -4
- package/dist/components/MenuItem/MenuItem.d.ts +12 -1
- package/dist/components/MenuItem/MenuItem.js +0 -2
- package/dist/components/MenuItem/MenuItem.types.d.ts +1 -6
- package/dist/components/MenuItem/index.d.ts +6 -1
- package/dist/components/MenuItem/index.js +5 -1
- package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +13 -1
- package/dist/components/Modal/Modal.d.ts +3 -6
- package/dist/components/Modal/Modal.js +2 -4
- package/dist/components/Modal/index.d.ts +6 -1
- package/dist/components/Modal/index.js +5 -1
- package/dist/components/Modal/tests/Modal.stories.d.ts +2 -2
- package/dist/components/Popover/Popover.d.ts +2 -7
- package/dist/components/Popover/Popover.js +1 -4
- package/dist/components/Popover/index.d.ts +8 -1
- package/dist/components/Popover/index.js +7 -1
- package/dist/components/Popover/tests/Popover.stories.d.ts +1 -1
- package/dist/components/Resizable/Resizable.d.ts +2 -4
- package/dist/components/Resizable/Resizable.js +4 -5
- package/dist/components/Resizable/index.d.ts +7 -1
- package/dist/components/Resizable/index.js +6 -1
- package/dist/components/Resizable/tests/Resizable.stories.d.ts +2 -2
- package/dist/components/Select/Select.d.ts +1 -8
- package/dist/components/Select/Select.js +0 -6
- package/dist/components/Select/index.d.ts +10 -1
- package/dist/components/Select/index.js +9 -1
- package/dist/components/Stepper/Stepper.d.ts +2 -4
- package/dist/components/Stepper/Stepper.js +1 -2
- package/dist/components/Stepper/index.d.ts +5 -1
- package/dist/components/Stepper/index.js +4 -1
- package/dist/components/Stepper/tests/Stepper.stories.d.ts +1 -4
- package/dist/components/Table/Table.d.ts +6 -12
- package/dist/components/Table/Table.js +5 -10
- package/dist/components/Table/index.d.ts +9 -1
- package/dist/components/Table/index.js +8 -1
- package/dist/components/Table/tests/Table.stories.d.ts +5 -5
- package/dist/components/Tabs/Tabs.d.ts +1 -8
- package/dist/components/Tabs/Tabs.js +0 -6
- package/dist/components/Tabs/index.d.ts +10 -1
- package/dist/components/Tabs/index.js +9 -1
- package/dist/components/TextArea/TextArea.d.ts +1 -4
- package/dist/components/TextArea/TextArea.js +0 -2
- package/dist/components/TextArea/index.d.ts +6 -1
- package/dist/components/TextArea/index.js +5 -1
- package/dist/components/TextField/TextField.d.ts +1 -4
- package/dist/components/TextField/TextField.js +0 -2
- package/dist/components/TextField/index.d.ts +6 -1
- package/dist/components/TextField/index.js +5 -1
- package/dist/components/Timeline/Timeline.d.ts +2 -4
- package/dist/components/Timeline/Timeline.js +1 -2
- package/dist/components/Timeline/index.d.ts +5 -1
- package/dist/components/Timeline/index.js +4 -1
- package/dist/components/Timeline/tests/Timeline.stories.d.ts +1 -1
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +4 -0
- package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +15 -0
- package/dist/components/View/View.d.ts +4 -4
- package/dist/components/View/View.js +1 -2
- package/dist/components/View/index.d.ts +5 -1
- package/dist/components/View/index.js +4 -1
- package/dist/components/View/tests/View.stories.d.ts +2 -4
- package/dist/components/_private/Portal/Portal.d.ts +3 -5
- package/dist/components/_private/Portal/Portal.js +1 -2
- package/dist/components/_private/Portal/index.d.ts +5 -1
- package/dist/components/_private/Portal/index.js +4 -1
- package/dist/config/postcss.js +3 -0
- package/package.json +5 -6
- package/dist/cjs/cli/theming/index.d.ts +0 -4
- package/dist/cjs/cli/theming/index.js +0 -40
- package/dist/cjs/cli/theming/reshaped.config.d.ts +0 -3
- package/dist/cjs/cli/theming/reshaped.config.js +0 -25
- package/dist/cjs/cli/theming/tailwind.d.ts +0 -2
- package/dist/cjs/cli/theming/tailwind.js +0 -83
- package/dist/cjs/config/postcss.d.ts +0 -28
- package/dist/cjs/config/postcss.js +0 -33
- package/dist/cjs/config/tailwind.d.ts +0 -2
- package/dist/cjs/config/tailwind.js +0 -86
- package/dist/cjs/constants/breakpoints.d.ts +0 -6
- package/dist/cjs/constants/breakpoints.js +0 -7
- package/dist/cjs/themes/_generator/constants.d.ts +0 -2
- package/dist/cjs/themes/_generator/constants.js +0 -11
- package/dist/cjs/themes/_generator/definitions/figma.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/figma.js +0 -197
- package/dist/cjs/themes/_generator/definitions/reshaped.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/reshaped.js +0 -210
- package/dist/cjs/themes/_generator/definitions/slate.d.ts +0 -3
- package/dist/cjs/themes/_generator/definitions/slate.js +0 -12
- package/dist/cjs/themes/_generator/tokens/color/color.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/color.transforms.js +0 -44
- package/dist/cjs/themes/_generator/tokens/color/color.types.d.ts +0 -33
- package/dist/cjs/themes/_generator/tokens/color/color.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.d.ts +0 -20
- package/dist/cjs/themes/_generator/tokens/color/utilities/a11y.js +0 -64
- package/dist/cjs/themes/_generator/tokens/color/utilities/convert.d.ts +0 -11
- package/dist/cjs/themes/_generator/tokens/color/utilities/convert.js +0 -33
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateColors.js +0 -152
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/color/utilities/generateMetaColors.js +0 -68
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/a11y.test.js +0 -38
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/convert.test.js +0 -48
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.d.ts +0 -1
- package/dist/cjs/themes/_generator/tokens/color/utilities/tests/generateColors.test.js +0 -21
- package/dist/cjs/themes/_generator/tokens/css.d.ts +0 -6
- package/dist/cjs/themes/_generator/tokens/css.js +0 -52
- package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/duration/duration.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/duration/duration.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/duration/duration.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/easing/easing.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/easing/easing.types.d.ts +0 -7
- package/dist/cjs/themes/_generator/tokens/easing/easing.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/font/font.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/font/font.transforms.js +0 -43
- package/dist/cjs/themes/_generator/tokens/font/font.types.d.ts +0 -11
- package/dist/cjs/themes/_generator/tokens/font/font.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontFamily/fontFamily.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/fontWeight/fontWeight.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/radius/radius.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/radius/radius.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/radius/radius.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.transforms.js +0 -22
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.d.ts +0 -13
- package/dist/cjs/themes/_generator/tokens/shadow/shadow.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/transforms.d.ts +0 -13
- package/dist/cjs/themes/_generator/tokens/transforms.js +0 -30
- package/dist/cjs/themes/_generator/tokens/types.d.ts +0 -62
- package/dist/cjs/themes/_generator/tokens/types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/unit/unit.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/unit/unit.types.d.ts +0 -5
- package/dist/cjs/themes/_generator/tokens/unit/unit.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.d.ts +0 -5
- package/dist/cjs/themes/_generator/tokens/unit/utilities/generate.js +0 -16
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.transforms.js +0 -27
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.d.ts +0 -9
- package/dist/cjs/themes/_generator/tokens/viewport/viewport.types.js +0 -2
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.transforms.js +0 -11
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.d.ts +0 -4
- package/dist/cjs/themes/_generator/tokens/zIndex/zIndex.types.js +0 -2
- package/dist/cjs/themes/_generator/transform.d.ts +0 -8
- package/dist/cjs/themes/_generator/transform.js +0 -108
- package/dist/cjs/themes/_generator/types.d.ts +0 -15
- package/dist/cjs/themes/_generator/types.js +0 -2
- package/dist/cjs/themes/_generator/utilities/mergeDefinitions.d.ts +0 -3
- package/dist/cjs/themes/_generator/utilities/mergeDefinitions.js +0 -19
- package/dist/cjs/themes/figma/media.css +0 -1
- package/dist/cjs/themes/figma/tailwind.css +0 -1
- package/dist/cjs/themes/figma/theme.css +0 -1
- package/dist/cjs/themes/fragments/twitter/tailwind.css +0 -1
- package/dist/cjs/themes/fragments/twitter/theme.css +0 -1
- package/dist/cjs/themes/index.d.ts +0 -23
- package/dist/cjs/themes/index.js +0 -21
- package/dist/cjs/themes/reshaped/media.css +0 -1
- package/dist/cjs/themes/reshaped/tailwind.css +0 -1
- package/dist/cjs/themes/reshaped/theme.css +0 -1
- package/dist/cjs/themes/slate/media.css +0 -1
- package/dist/cjs/themes/slate/tailwind.css +0 -1
- package/dist/cjs/themes/slate/theme.css +0 -1
- package/dist/cjs/types/config.d.ts +0 -20
- package/dist/cjs/types/config.js +0 -2
- package/dist/cjs/utilities/string.d.ts +0 -2
- package/dist/cjs/utilities/string.js +0 -15
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const breakpoints_1 = __importDefault(require("../../../constants/breakpoints"));
|
|
7
|
-
const theme = {
|
|
8
|
-
fontFamily: {
|
|
9
|
-
title: {
|
|
10
|
-
family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
|
|
11
|
-
},
|
|
12
|
-
body: {
|
|
13
|
-
family: "Inter, BlinkMacSystemFont, -apple-system, Roboto, Helvetica, Arial, sans-serif",
|
|
14
|
-
},
|
|
15
|
-
monospace: {
|
|
16
|
-
family: "Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace",
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
fontWeight: {
|
|
20
|
-
regular: { weight: 400 },
|
|
21
|
-
medium: { weight: 500 },
|
|
22
|
-
semibold: { weight: 600 },
|
|
23
|
-
bold: { weight: 700 },
|
|
24
|
-
extrabold: { weight: 800 },
|
|
25
|
-
black: { weight: 900 },
|
|
26
|
-
},
|
|
27
|
-
font: {
|
|
28
|
-
title1: {
|
|
29
|
-
fontSize: { px: 96 },
|
|
30
|
-
lineHeight: { px: 100 },
|
|
31
|
-
fontWeightToken: "extrabold",
|
|
32
|
-
fontFamilyToken: "title",
|
|
33
|
-
},
|
|
34
|
-
title2: {
|
|
35
|
-
fontSize: { px: 80 },
|
|
36
|
-
lineHeight: { px: 84 },
|
|
37
|
-
fontWeightToken: "extrabold",
|
|
38
|
-
fontFamilyToken: "title",
|
|
39
|
-
},
|
|
40
|
-
title3: {
|
|
41
|
-
fontSize: { px: 64 },
|
|
42
|
-
lineHeight: { px: 68 },
|
|
43
|
-
fontWeightToken: "extrabold",
|
|
44
|
-
fontFamilyToken: "title",
|
|
45
|
-
},
|
|
46
|
-
title4: {
|
|
47
|
-
fontSize: { px: 56 },
|
|
48
|
-
lineHeight: { px: 60 },
|
|
49
|
-
fontWeightToken: "bold",
|
|
50
|
-
fontFamilyToken: "title",
|
|
51
|
-
},
|
|
52
|
-
title5: {
|
|
53
|
-
fontSize: { px: 48 },
|
|
54
|
-
lineHeight: { px: 52 },
|
|
55
|
-
fontWeightToken: "bold",
|
|
56
|
-
fontFamilyToken: "title",
|
|
57
|
-
},
|
|
58
|
-
title6: {
|
|
59
|
-
fontSize: { px: 36 },
|
|
60
|
-
lineHeight: { px: 40 },
|
|
61
|
-
fontWeightToken: "bold",
|
|
62
|
-
fontFamilyToken: "title",
|
|
63
|
-
},
|
|
64
|
-
featured1: {
|
|
65
|
-
fontSize: { px: 32 },
|
|
66
|
-
lineHeight: { px: 40 },
|
|
67
|
-
fontFamilyToken: "body",
|
|
68
|
-
},
|
|
69
|
-
featured2: {
|
|
70
|
-
fontSize: { px: 24 },
|
|
71
|
-
lineHeight: { px: 32 },
|
|
72
|
-
fontFamilyToken: "body",
|
|
73
|
-
},
|
|
74
|
-
featured3: {
|
|
75
|
-
fontSize: { px: 20 },
|
|
76
|
-
lineHeight: { px: 28 },
|
|
77
|
-
fontFamilyToken: "body",
|
|
78
|
-
},
|
|
79
|
-
body1: {
|
|
80
|
-
fontSize: { px: 18 },
|
|
81
|
-
lineHeight: { px: 28 },
|
|
82
|
-
fontFamilyToken: "body",
|
|
83
|
-
},
|
|
84
|
-
body2: {
|
|
85
|
-
fontSize: { px: 16 },
|
|
86
|
-
lineHeight: { px: 24 },
|
|
87
|
-
fontFamilyToken: "body",
|
|
88
|
-
},
|
|
89
|
-
body3: {
|
|
90
|
-
fontSize: { px: 14 },
|
|
91
|
-
lineHeight: { px: 20 },
|
|
92
|
-
fontFamilyToken: "body",
|
|
93
|
-
},
|
|
94
|
-
caption1: {
|
|
95
|
-
fontSize: { px: 12 },
|
|
96
|
-
lineHeight: { px: 16 },
|
|
97
|
-
fontFamilyToken: "body",
|
|
98
|
-
},
|
|
99
|
-
caption2: {
|
|
100
|
-
fontSize: { px: 10 },
|
|
101
|
-
lineHeight: { px: 12 },
|
|
102
|
-
fontFamilyToken: "body",
|
|
103
|
-
},
|
|
104
|
-
},
|
|
105
|
-
unit: {
|
|
106
|
-
base: { px: 4 },
|
|
107
|
-
},
|
|
108
|
-
radius: {
|
|
109
|
-
small: { px: 4 },
|
|
110
|
-
medium: { px: 8 },
|
|
111
|
-
large: { px: 12 },
|
|
112
|
-
},
|
|
113
|
-
color: {
|
|
114
|
-
backgroundPrimary: { hex: "#5a58f2", hexDark: "#524fea" },
|
|
115
|
-
backgroundPrimaryFaded: { hex: "#ecebfe", hexDark: "#252544" },
|
|
116
|
-
borderPrimary: { hex: "#3b38ed", hexDark: "#8c8bf3" },
|
|
117
|
-
borderPrimaryFaded: { hex: "#dedcfb", hexDark: "#323164" },
|
|
118
|
-
foregroundPrimary: { hex: "#4f4cf0", hexDark: "#8b8af7" },
|
|
119
|
-
backgroundCritical: { hex: "#e22c2c", hexDark: "#d02626" },
|
|
120
|
-
backgroundCriticalFaded: { hex: "#fdeded", hexDark: "#3e1f1f" },
|
|
121
|
-
borderCritical: { hex: "#bf2424", hexDark: "#f46969" },
|
|
122
|
-
borderCriticalFaded: { hex: "#f3dad6", hexDark: "#5a2e29" },
|
|
123
|
-
foregroundCritical: { hex: "#c42525", hexDark: "#f36a6a" },
|
|
124
|
-
backgroundWarning: { hex: "#facc15", hexDark: "#f1c512" },
|
|
125
|
-
backgroundWarningFaded: { hex: "#fffae9", hexDark: "#2c271f" },
|
|
126
|
-
borderWarning: { hex: "#cfa90f", hexDark: "#b4920a" },
|
|
127
|
-
borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" },
|
|
128
|
-
foregroundWarning: { hex: "#7b6305", hexDark: "#b4920c" },
|
|
129
|
-
backgroundPositive: { hex: "#118850", hexDark: "#14784a" },
|
|
130
|
-
backgroundPositiveFaded: { hex: "#edfdf5", hexDark: "#1f2a23" },
|
|
131
|
-
borderPositive: { hex: "#0c6e40", hexDark: "#21ab6b" },
|
|
132
|
-
borderPositiveFaded: { hex: "#d2eddb", hexDark: "#264431" },
|
|
133
|
-
foregroundPositive: { hex: "#0d7544", hexDark: "#18ab66" },
|
|
134
|
-
backgroundNeutral: { hex: "#dfe2ea", hexDark: "#494f60" },
|
|
135
|
-
backgroundNeutralFaded: { hex: "#f3f3f5", hexDark: "#222835" },
|
|
136
|
-
borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" },
|
|
137
|
-
borderNeutralFaded: { hex: "#00000014", hexDark: "#ffffff14" },
|
|
138
|
-
foregroundNeutral: { hex: "#14181f", hexDark: "#eff1f5" },
|
|
139
|
-
foregroundNeutralFaded: { hex: "#5b667e", hexDark: "#c0c6d6" },
|
|
140
|
-
backgroundDisabled: { hex: "#eceef2", hexDark: "#1e212a" },
|
|
141
|
-
backgroundDisabledFaded: { hex: "#f5f6f9", hexDark: "#171921" },
|
|
142
|
-
borderDisabled: { hex: "#dfe2ea", hexDark: "#262a34" },
|
|
143
|
-
foregroundDisabled: { hex: "#c6ccda", hexDark: "#434959" },
|
|
144
|
-
backgroundElevationBase: { hex: "#ffffff", hexDark: "#15171e" },
|
|
145
|
-
backgroundElevationRaised: { hex: "#ffffff", hexDark: "#191b23" },
|
|
146
|
-
backgroundElevationOverlay: { hex: "#ffffff", hexDark: "#1c1f28" },
|
|
147
|
-
backgroundPage: { hex: "#ffffff", hexDark: "#0f1116" },
|
|
148
|
-
backgroundPageFaded: { hex: "#f9f9fb", hexDark: "#111319" },
|
|
149
|
-
brand: { hex: "#5a58f2" },
|
|
150
|
-
white: { hex: "#ffffff" },
|
|
151
|
-
black: { hex: "#000000" },
|
|
152
|
-
},
|
|
153
|
-
duration: {
|
|
154
|
-
rapid: { ms: 100 },
|
|
155
|
-
fast: { ms: 200 },
|
|
156
|
-
medium: { ms: 300 },
|
|
157
|
-
slow: { ms: 400 },
|
|
158
|
-
},
|
|
159
|
-
easing: {
|
|
160
|
-
standard: { x1: 0.4, y1: 0, x2: 0.2, y2: 1 },
|
|
161
|
-
accelerate: { x1: 0.4, y1: 0, x2: 1, y2: 1 },
|
|
162
|
-
decelerate: { x1: 0, y1: 0, x2: 0.2, y2: 1 },
|
|
163
|
-
},
|
|
164
|
-
shadow: {
|
|
165
|
-
raised: [
|
|
166
|
-
{
|
|
167
|
-
offsetX: 0,
|
|
168
|
-
offsetY: 1,
|
|
169
|
-
blurRadius: 5,
|
|
170
|
-
spreadRadius: -4,
|
|
171
|
-
colorToken: "black",
|
|
172
|
-
opacity: 0.5,
|
|
173
|
-
},
|
|
174
|
-
{
|
|
175
|
-
offsetX: 0,
|
|
176
|
-
offsetY: 4,
|
|
177
|
-
blurRadius: 8,
|
|
178
|
-
colorToken: "black",
|
|
179
|
-
opacity: 0.05,
|
|
180
|
-
},
|
|
181
|
-
],
|
|
182
|
-
overlay: [
|
|
183
|
-
{
|
|
184
|
-
offsetX: 0,
|
|
185
|
-
offsetY: 5,
|
|
186
|
-
blurRadius: 10,
|
|
187
|
-
colorToken: "black",
|
|
188
|
-
opacity: 0.05,
|
|
189
|
-
},
|
|
190
|
-
{
|
|
191
|
-
offsetX: 0,
|
|
192
|
-
offsetY: 15,
|
|
193
|
-
blurRadius: 25,
|
|
194
|
-
colorToken: "black",
|
|
195
|
-
opacity: 0.07,
|
|
196
|
-
},
|
|
197
|
-
],
|
|
198
|
-
},
|
|
199
|
-
viewport: {
|
|
200
|
-
m: { minPx: breakpoints_1.default.m },
|
|
201
|
-
l: { minPx: breakpoints_1.default.l },
|
|
202
|
-
xl: { minPx: breakpoints_1.default.xl },
|
|
203
|
-
},
|
|
204
|
-
zIndex: {
|
|
205
|
-
relative: { level: 10 },
|
|
206
|
-
absolute: { level: 100 },
|
|
207
|
-
fixed: { level: 200 },
|
|
208
|
-
},
|
|
209
|
-
};
|
|
210
|
-
exports.default = theme;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const reshaped_1 = __importDefault(require("./reshaped"));
|
|
7
|
-
const generateColors_1 = __importDefault(require("../tokens/color/utilities/generateColors"));
|
|
8
|
-
const theme = {
|
|
9
|
-
...reshaped_1.default,
|
|
10
|
-
color: (0, generateColors_1.default)(),
|
|
11
|
-
};
|
|
12
|
-
exports.default = theme;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const transformTokenForMode = (args, themeOptions) => {
|
|
4
|
-
const { hex, oklch } = args;
|
|
5
|
-
if (oklch && themeOptions?.colorOutputFormat !== "hex") {
|
|
6
|
-
const components = `${Number(oklch.l.toFixed(4))} ${Number(oklch.c.toFixed(4))} ${Number(oklch.h?.toFixed(4) || 0)}`;
|
|
7
|
-
const alphaSuffix = oklch?.alpha === undefined ? "" : ` / ${Number(oklch.alpha.toFixed(4))}`;
|
|
8
|
-
return `oklch(${components}${alphaSuffix})`;
|
|
9
|
-
}
|
|
10
|
-
if (hex)
|
|
11
|
-
return hex;
|
|
12
|
-
throw new Error(`[Reshaped] ${JSON.stringify(args)} is missing a color value`);
|
|
13
|
-
};
|
|
14
|
-
const transformToken = (name, token, { themeOptions }) => {
|
|
15
|
-
const { hex, hexDark, oklch, oklchDark } = token;
|
|
16
|
-
// Apply color to both modes if dark mode is not available
|
|
17
|
-
const hasDark = !!hexDark || !!oklchDark;
|
|
18
|
-
const value = transformTokenForMode({ oklch, hex }, themeOptions);
|
|
19
|
-
const darkValue = hasDark
|
|
20
|
-
? transformTokenForMode({ oklch: oklchDark, hex: hexDark }, themeOptions)
|
|
21
|
-
: undefined;
|
|
22
|
-
const separateModes = hasDark && value !== darkValue;
|
|
23
|
-
const defaultMode = separateModes ? "light" : undefined;
|
|
24
|
-
const result = [
|
|
25
|
-
{
|
|
26
|
-
name,
|
|
27
|
-
tokenType: "color",
|
|
28
|
-
type: "variable",
|
|
29
|
-
value,
|
|
30
|
-
mode: defaultMode,
|
|
31
|
-
},
|
|
32
|
-
];
|
|
33
|
-
if (darkValue && separateModes) {
|
|
34
|
-
result.push({
|
|
35
|
-
name,
|
|
36
|
-
tokenType: "color",
|
|
37
|
-
type: "variable",
|
|
38
|
-
value: darkValue,
|
|
39
|
-
mode: "dark",
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
return result;
|
|
43
|
-
};
|
|
44
|
-
exports.default = transformToken;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type { Oklch } from "culori/fn";
|
|
2
|
-
export type Hue = "primary" | "positive" | "critical" | "warning" | "neutral" | "brand";
|
|
3
|
-
export type Name = "foregroundNeutral" | "foregroundNeutralFaded" | "foregroundDisabled" | "foregroundPrimary" | "foregroundCritical" | "foregroundWarning" | "foregroundPositive" | "borderNeutral" | "borderNeutralFaded" | "borderDisabled" | "borderPrimary" | "borderPrimaryFaded" | "borderCritical" | "borderCriticalFaded" | "borderWarning" | "borderWarningFaded" | "borderPositive" | "borderPositiveFaded" | "backgroundNeutral" | "backgroundNeutralFaded" | "backgroundDisabled" | "backgroundDisabledFaded" | "backgroundPrimary" | "backgroundPrimaryFaded" | "backgroundCritical" | "backgroundCriticalFaded" | "backgroundWarning" | "backgroundWarningFaded" | "backgroundPositive" | "backgroundPositiveFaded" | "backgroundPage" | "backgroundPageFaded" | "backgroundElevationBase" | "backgroundElevationRaised" | "backgroundElevationOverlay" | "brand" | "white" | "black";
|
|
4
|
-
export type GeneratedOnName = "onBackgroundNeutral" | "onBackgroundPrimary" | "onBackgroundPositive" | "onBackgroundWarning" | "onBackgroundCritical";
|
|
5
|
-
export type GeneratedRGBName = "rgbBackgroundNeutral" | "rgbBackgroundNeutralFaded" | "rgbBackgroundDisabled" | "rgbBackgroundDisabledFaded" | "rgbBackgroundPrimary" | "rgbBackgroundPrimaryFaded" | "rgbBackgroundCritical" | "rgbBackgroundCriticalFaded" | "rgbBackgroundWarning" | "rgbBackgroundWarningFaded" | "rgbBackgroundPositive" | "rgbBackgroundPositiveFaded" | "rgbBackgroundPage" | "rgbBackgroundPageFaded" | "rgbBackgroundElevationBase" | "rgbBackgroundElevationRaised" | "rgbBackgroundElevationOverlay";
|
|
6
|
-
export type RgbColor = {
|
|
7
|
-
r: number;
|
|
8
|
-
g: number;
|
|
9
|
-
b: number;
|
|
10
|
-
};
|
|
11
|
-
export type OklchColor = Omit<Oklch, "mode">;
|
|
12
|
-
export type HexColor = string;
|
|
13
|
-
export type ColorValue = HexColor | PassedToken;
|
|
14
|
-
export type OklchOnlyToken = {
|
|
15
|
-
oklch: OklchColor;
|
|
16
|
-
oklchDark?: OklchColor;
|
|
17
|
-
};
|
|
18
|
-
export type OklchToken = OklchOnlyToken & {
|
|
19
|
-
hex?: never;
|
|
20
|
-
hexDark?: never;
|
|
21
|
-
};
|
|
22
|
-
export type HexToken = {
|
|
23
|
-
hex: HexColor;
|
|
24
|
-
hexDark?: HexColor;
|
|
25
|
-
oklch?: never;
|
|
26
|
-
oklchDark?: never;
|
|
27
|
-
};
|
|
28
|
-
export type PassedToken = HexToken | OklchToken;
|
|
29
|
-
export type InternalToken = {
|
|
30
|
-
oklch: Oklch;
|
|
31
|
-
oklchDark?: Oklch;
|
|
32
|
-
};
|
|
33
|
-
export type Token = Pick<HexToken, "hex" | "hexDark"> & Partial<OklchOnlyToken>;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { type Oklch } from "culori/fn";
|
|
2
|
-
export declare const getOnColorWCAG: (args: {
|
|
3
|
-
bgColor: Oklch;
|
|
4
|
-
lightColor: Oklch;
|
|
5
|
-
darkColor: Oklch;
|
|
6
|
-
}) => Oklch;
|
|
7
|
-
export declare const getOnColorAPCA: (args: {
|
|
8
|
-
bgColor: Oklch;
|
|
9
|
-
lightColor: Oklch;
|
|
10
|
-
darkColor: Oklch;
|
|
11
|
-
}) => Oklch;
|
|
12
|
-
/**
|
|
13
|
-
* General
|
|
14
|
-
*/
|
|
15
|
-
export declare const getOnColor: (args: {
|
|
16
|
-
bgColor: Oklch;
|
|
17
|
-
lightColor: Oklch;
|
|
18
|
-
darkColor: Oklch;
|
|
19
|
-
algorithm?: "wcag" | "apca";
|
|
20
|
-
}) => Oklch;
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getOnColor = exports.getOnColorAPCA = exports.getOnColorWCAG = void 0;
|
|
4
|
-
const convert_1 = require("./convert");
|
|
5
|
-
/**
|
|
6
|
-
* WCAG
|
|
7
|
-
*/
|
|
8
|
-
const RED = 0.2126;
|
|
9
|
-
const GREEN = 0.7152;
|
|
10
|
-
const BLUE = 0.0722;
|
|
11
|
-
const GAMMA = 2.4;
|
|
12
|
-
function luminanceWCAG(r, g, b) {
|
|
13
|
-
const a = [r, g, b].map((v) => {
|
|
14
|
-
return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
|
|
15
|
-
});
|
|
16
|
-
return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
|
|
17
|
-
}
|
|
18
|
-
function contrastWCAG(rgb1, rgb2) {
|
|
19
|
-
const lum1 = luminanceWCAG(...rgb1);
|
|
20
|
-
const lum2 = luminanceWCAG(...rgb2);
|
|
21
|
-
const brightest = Math.max(lum1, lum2);
|
|
22
|
-
const darkest = Math.min(lum1, lum2);
|
|
23
|
-
return (brightest + 0.05) / (darkest + 0.05);
|
|
24
|
-
}
|
|
25
|
-
const getOnColorWCAG = (args) => {
|
|
26
|
-
const { bgColor, lightColor, darkColor } = args;
|
|
27
|
-
const bgRgb = (0, convert_1.oklchToRgb)(bgColor);
|
|
28
|
-
const lightRgb = (0, convert_1.oklchToRgb)(lightColor);
|
|
29
|
-
return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
|
|
30
|
-
? lightColor
|
|
31
|
-
: darkColor;
|
|
32
|
-
};
|
|
33
|
-
exports.getOnColorWCAG = getOnColorWCAG;
|
|
34
|
-
/**
|
|
35
|
-
* APCA
|
|
36
|
-
*/
|
|
37
|
-
function luminanceAPCA(oklch) {
|
|
38
|
-
const { r, g, b } = (0, convert_1.oklchToRgb)(oklch);
|
|
39
|
-
return (0.2126 * Math.pow(r / 255, 2.2) +
|
|
40
|
-
0.7152 * Math.pow(g / 255, 2.2) +
|
|
41
|
-
0.0722 * Math.pow(b / 255, 2.2));
|
|
42
|
-
}
|
|
43
|
-
const getOnColorAPCA = (args) => {
|
|
44
|
-
const { bgColor, lightColor, darkColor } = args;
|
|
45
|
-
const backgroundLuminance = luminanceAPCA(bgColor);
|
|
46
|
-
const lightLuminance = luminanceAPCA(lightColor);
|
|
47
|
-
const darkLuminance = luminanceAPCA(darkColor);
|
|
48
|
-
const contrastWithLight = Math.abs(lightLuminance - backgroundLuminance);
|
|
49
|
-
const contrastWithDark = Math.abs(darkLuminance - backgroundLuminance);
|
|
50
|
-
return contrastWithLight > contrastWithDark ? lightColor : darkColor;
|
|
51
|
-
};
|
|
52
|
-
exports.getOnColorAPCA = getOnColorAPCA;
|
|
53
|
-
/**
|
|
54
|
-
* General
|
|
55
|
-
*/
|
|
56
|
-
const getOnColor = (args) => {
|
|
57
|
-
if (args.algorithm === "apca") {
|
|
58
|
-
return (0, exports.getOnColorAPCA)(args);
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
return (0, exports.getOnColorWCAG)(args);
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
exports.getOnColor = getOnColor;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type Oklch } from "culori/fn";
|
|
2
|
-
import type * as TColor from "../color.types";
|
|
3
|
-
export declare const hexToOklch: (hex: string) => Oklch;
|
|
4
|
-
export declare const oklchToRgb: (oklch: Oklch) => {
|
|
5
|
-
r: number;
|
|
6
|
-
g: number;
|
|
7
|
-
b: number;
|
|
8
|
-
mode: "rgb";
|
|
9
|
-
alpha?: number;
|
|
10
|
-
};
|
|
11
|
-
export declare const tokenToOklchToken: (token: TColor.PassedToken) => TColor.InternalToken;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.tokenToOklchToken = exports.oklchToRgb = exports.hexToOklch = void 0;
|
|
4
|
-
const fn_1 = require("culori/require");
|
|
5
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
6
|
-
const oklch = (0, fn_1.useMode)(fn_1.modeOklch);
|
|
7
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
8
|
-
const rgb = (0, fn_1.useMode)(fn_1.modeRgb);
|
|
9
|
-
const hexToOklch = (hex) => {
|
|
10
|
-
const result = oklch((0, fn_1.formatHex)(hex));
|
|
11
|
-
if (!result)
|
|
12
|
-
throw new Error(`[Reshaped] Can't convert ${hex} to oklch`);
|
|
13
|
-
return result;
|
|
14
|
-
};
|
|
15
|
-
exports.hexToOklch = hexToOklch;
|
|
16
|
-
const oklchToRgb = (oklch) => {
|
|
17
|
-
const value = rgb(oklch);
|
|
18
|
-
return {
|
|
19
|
-
...value,
|
|
20
|
-
r: Number(value.r.toFixed(4)),
|
|
21
|
-
g: Number(value.g.toFixed(4)),
|
|
22
|
-
b: Number(value.b.toFixed(4)),
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
exports.oklchToRgb = oklchToRgb;
|
|
26
|
-
const tokenToOklchToken = (token) => {
|
|
27
|
-
const hexDarkFallback = token.hexDark ? (0, exports.hexToOklch)(token.hexDark) : undefined;
|
|
28
|
-
return {
|
|
29
|
-
oklch: token.oklch ? { ...token.oklch, mode: "oklch" } : (0, exports.hexToOklch)(token.hex),
|
|
30
|
-
oklchDark: token.oklchDark ? { ...token.oklchDark, mode: "oklch" } : hexDarkFallback,
|
|
31
|
-
};
|
|
32
|
-
};
|
|
33
|
-
exports.tokenToOklchToken = tokenToOklchToken;
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const convert_1 = require("./convert");
|
|
4
|
-
const parseColor = (color) => {
|
|
5
|
-
const isString = typeof color === "string";
|
|
6
|
-
if (!isString && "oklch" in color && color.oklch) {
|
|
7
|
-
return {
|
|
8
|
-
light: color.oklch,
|
|
9
|
-
dark: color.oklchDark,
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
|
-
const hexLight = isString ? color : color.hex;
|
|
13
|
-
const hexDark = isString ? undefined : color.hexDark;
|
|
14
|
-
const light = (0, convert_1.hexToOklch)(hexLight);
|
|
15
|
-
const dark = hexDark ? (0, convert_1.hexToOklch)(hexDark) : undefined;
|
|
16
|
-
if (!light) {
|
|
17
|
-
throw new Error(`[Reshaped] Failed when parsing color: ${JSON.stringify(color)}`);
|
|
18
|
-
}
|
|
19
|
-
return { light, dark };
|
|
20
|
-
};
|
|
21
|
-
const getDarkModeColor = (lch) => {
|
|
22
|
-
const { l, c } = lch;
|
|
23
|
-
// Top boundary at which background colors are perceived as vibrant
|
|
24
|
-
const vibrancyThreshold = 0.25;
|
|
25
|
-
// A linear modifier of how gray a color is, gray = 1, vibrant = 0
|
|
26
|
-
const neutralFactor = Math.min(1, Math.max(0, (vibrancyThreshold - c) / vibrancyThreshold));
|
|
27
|
-
// Non-linear modification to make gray color inversion progress faster
|
|
28
|
-
const easedVibrancy = 1 - Math.pow(neutralFactor, 2);
|
|
29
|
-
const invertedL = 1 - l;
|
|
30
|
-
// Take plain inversion and increase it back by vibrancy modifier
|
|
31
|
-
// Vibrant colors should get back to almost the original value
|
|
32
|
-
// while non-briant colors should lean towards full inversion
|
|
33
|
-
// Example:
|
|
34
|
-
// Black should become white in dark mode
|
|
35
|
-
// Light gray should become dark gray
|
|
36
|
-
// Vibrant blue should stay vibrant blue
|
|
37
|
-
const darkL = invertedL + (l - invertedL) * easedVibrancy;
|
|
38
|
-
// Make sure dark mode value doesn't become too dark and is still visible on dark page background
|
|
39
|
-
const clampedDarkL = Math.max(0.36, darkL);
|
|
40
|
-
return { ...lch, c: c * 0.8, l: clampedDarkL };
|
|
41
|
-
};
|
|
42
|
-
const generateColorValues = (key, token) => {
|
|
43
|
-
const { light: bg, dark } = parseColor(token);
|
|
44
|
-
const capitalizedKey = key.charAt(0).toUpperCase() + key.slice(1);
|
|
45
|
-
const neutral = key === "neutral";
|
|
46
|
-
const warning = key === "warning";
|
|
47
|
-
const bgDark = dark || getDarkModeColor(bg);
|
|
48
|
-
const bgFaded = {
|
|
49
|
-
...bg,
|
|
50
|
-
l: 0.97,
|
|
51
|
-
c: neutral ? 0.005 : warning ? 0.04 : 0.02,
|
|
52
|
-
};
|
|
53
|
-
const bgFadedDark = {
|
|
54
|
-
...bgDark,
|
|
55
|
-
l: 0.25,
|
|
56
|
-
// For primary color with low chroma, we still have to make sure it stays low
|
|
57
|
-
c: neutral ? 0.01 : bgDark.c / 5,
|
|
58
|
-
};
|
|
59
|
-
const fg = neutral ? { ...bg, l: 0.2 } : { ...bg, l: 0.5 };
|
|
60
|
-
const fgDark = neutral ? { ...bgDark, l: 0.96 } : { ...bgDark, l: 0.75, c: bg.c * 0.85 };
|
|
61
|
-
const bd = neutral ? { ...bg, l: 0, alpha: 0.12 } : { ...bg, l: bg.l - 0.08 };
|
|
62
|
-
const bdDark = neutral ? { ...bgDark, l: 1, alpha: 0.16 } : { ...bgDark, l: bgDark.l + 0.1 };
|
|
63
|
-
const bdFaded = neutral
|
|
64
|
-
? { ...bgFaded, l: 0, alpha: 0.08 }
|
|
65
|
-
: { ...bgFaded, l: bgFaded.l - 0.05, c: bgFaded.c + 0.01 };
|
|
66
|
-
const bdFadedDark = neutral
|
|
67
|
-
? { ...bgFadedDark, l: 1, alpha: 0.08 }
|
|
68
|
-
: { ...bgFadedDark, l: bgFadedDark.l + 0.1 };
|
|
69
|
-
const output = {
|
|
70
|
-
[`background${capitalizedKey}`]: {
|
|
71
|
-
oklch: bg,
|
|
72
|
-
oklchDark: bgDark,
|
|
73
|
-
},
|
|
74
|
-
[`background${capitalizedKey}Faded`]: {
|
|
75
|
-
oklch: bgFaded,
|
|
76
|
-
oklchDark: bgFadedDark,
|
|
77
|
-
},
|
|
78
|
-
[`border${capitalizedKey}`]: {
|
|
79
|
-
oklch: bd,
|
|
80
|
-
oklchDark: bdDark,
|
|
81
|
-
},
|
|
82
|
-
[`border${capitalizedKey}Faded`]: {
|
|
83
|
-
oklch: bdFaded,
|
|
84
|
-
oklchDark: bdFadedDark,
|
|
85
|
-
},
|
|
86
|
-
[`foreground${capitalizedKey}`]: {
|
|
87
|
-
oklch: fg,
|
|
88
|
-
oklchDark: fgDark,
|
|
89
|
-
},
|
|
90
|
-
};
|
|
91
|
-
if (neutral) {
|
|
92
|
-
output[`foreground${capitalizedKey}Faded`] = {
|
|
93
|
-
oklch: { ...fg, l: fg.l + 0.25 },
|
|
94
|
-
oklchDark: { ...fgDark, l: fgDark.l - 0.15 },
|
|
95
|
-
};
|
|
96
|
-
output[`backgroundDisabled`] = {
|
|
97
|
-
oklch: { ...bg, l: 0.95, c: 0 },
|
|
98
|
-
oklchDark: { ...bgDark, l: 0.28, c: 0 },
|
|
99
|
-
};
|
|
100
|
-
output[`backgroundDisabledFaded`] = {
|
|
101
|
-
oklch: { ...bg, l: 0.98, c: 0 },
|
|
102
|
-
oklchDark: { ...bgDark, l: 0.23, c: 0 },
|
|
103
|
-
};
|
|
104
|
-
output[`borderDisabled`] = {
|
|
105
|
-
oklch: { ...bd, alpha: 0.06 },
|
|
106
|
-
oklchDark: { ...bgDark, l: 0.28, c: 0 },
|
|
107
|
-
};
|
|
108
|
-
output[`foregroundDisabled`] = {
|
|
109
|
-
oklch: { ...fg, l: 0.84, c: 0 },
|
|
110
|
-
oklchDark: { ...fgDark, l: 0.4, c: 0 },
|
|
111
|
-
};
|
|
112
|
-
output[`backgroundElevationBase`] = {
|
|
113
|
-
oklch: { ...bg, l: 1, c: 0 },
|
|
114
|
-
oklchDark: { ...bgDark, l: 0.2, c: 0 },
|
|
115
|
-
};
|
|
116
|
-
output[`backgroundElevationRaised`] = {
|
|
117
|
-
oklch: { ...bg, l: 1, c: 0 },
|
|
118
|
-
oklchDark: { ...bgDark, l: 0.21, c: 0 },
|
|
119
|
-
};
|
|
120
|
-
output[`backgroundElevationOverlay`] = {
|
|
121
|
-
oklch: { ...bg, l: 1, c: 0 },
|
|
122
|
-
oklchDark: { ...bgDark, l: 0.22, c: 0 },
|
|
123
|
-
};
|
|
124
|
-
output[`backgroundPage`] = {
|
|
125
|
-
oklch: { ...bg, l: 1, c: 0 },
|
|
126
|
-
oklchDark: { ...bgDark, l: 0.16, c: 0 },
|
|
127
|
-
};
|
|
128
|
-
output[`backgroundPageFaded`] = {
|
|
129
|
-
oklch: { ...bg, l: 0.97, c: 0 },
|
|
130
|
-
oklchDark: { ...bgDark, l: 0.18, c: 0 },
|
|
131
|
-
};
|
|
132
|
-
}
|
|
133
|
-
return output;
|
|
134
|
-
};
|
|
135
|
-
const getOklchToken = (color) => {
|
|
136
|
-
const token = typeof color === "string" ? { hex: color } : color;
|
|
137
|
-
return (0, convert_1.tokenToOklchToken)(token);
|
|
138
|
-
};
|
|
139
|
-
const generateColors = (args = {}) => {
|
|
140
|
-
const { primary = { oklch: { l: 0.55, c: 0.24, h: 262.67 } }, critical = { oklch: { l: 0.59, c: 0.22, h: 26.97 } }, warning = { oklch: { l: 0.83, c: 0.2, h: 80 } }, positive = { oklch: { l: 0.53, c: 0.13, h: 153.78 } }, neutral = { oklch: { l: 0.92, c: 0.01, h: 262.67 } }, brand, } = args;
|
|
141
|
-
return {
|
|
142
|
-
...generateColorValues("primary", getOklchToken(primary)),
|
|
143
|
-
...generateColorValues("critical", getOklchToken(critical)),
|
|
144
|
-
...generateColorValues("warning", getOklchToken(warning)),
|
|
145
|
-
...generateColorValues("positive", getOklchToken(positive)),
|
|
146
|
-
...generateColorValues("neutral", getOklchToken(neutral)),
|
|
147
|
-
brand: getOklchToken(brand || primary),
|
|
148
|
-
white: getOklchToken("#ffffff"),
|
|
149
|
-
black: getOklchToken("#000000"),
|
|
150
|
-
};
|
|
151
|
-
};
|
|
152
|
-
exports.default = generateColors;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type * as T from "../../../types";
|
|
2
|
-
import { PassedThemeDefinition } from "../../types";
|
|
3
|
-
declare const generateMetaColors: (definition: PassedThemeDefinition, themeOptions?: T.PublicOptions["themeOptions"]) => PassedThemeDefinition["color"] | undefined;
|
|
4
|
-
export default generateMetaColors;
|