reshaped 2.4.3 → 2.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -8
- package/bundle.css +1 -1
- package/bundle.js +5 -5
- package/cli/theming/index.js +2 -2
- package/cli/theming/reshaped.config.js +3 -3
- package/components/Accordion/AccordionContent.js +3 -1
- package/components/Accordion/tests/Accordion.stories.js +2 -1
- package/components/Actionable/Actionable.module.css +1 -1
- package/components/Checkbox/tests/Checkbox.stories.js +1 -1
- package/components/TextField/TextField.module.css +1 -1
- package/components/Toast/tests/Toast.stories.js +0 -1
- package/components/View/tests/View.stories.js +1 -1
- package/config/tailwind.js +2 -2
- package/package.json +10 -5
- package/themes/_generator/definitions/base.d.ts +3 -0
- package/themes/_generator/definitions/figma.d.ts +3 -0
- package/themes/_generator/definitions/reshaped.d.ts +3 -0
- package/{cli/theming → themes/_generator}/definitions/reshaped.js +5 -38
- package/themes/_generator/definitions/slate.d.ts +3 -0
- package/themes/_generator/tests/themes.stories.d.ts +2 -1
- package/themes/_generator/tests/themes.stories.js +75 -2
- package/themes/_generator/tokens/shadow/shadow.transforms.js +2 -2
- package/themes/_generator/utilities/generateColors.d.ts +20 -0
- package/themes/_generator/utilities/generateColors.js +422 -0
- package/themes/figma/theme.css +1 -1
- package/themes/index.d.ts +11 -0
- package/themes/index.js +8 -0
- package/themes/reshaped/theme.css +1 -1
- package/themes/slate/theme.css +1 -1
- package/cli/theming/definitions/base.d.ts +0 -3
- package/cli/theming/definitions/figma.d.ts +0 -3
- package/cli/theming/definitions/reshaped.d.ts +0 -3
- package/cli/theming/definitions/slate.d.ts +0 -3
- /package/{cli/theming → themes/_generator}/definitions/base.js +0 -0
- /package/{cli/theming → themes/_generator}/definitions/figma.js +0 -0
- /package/{cli/theming → themes/_generator}/definitions/slate.js +0 -0
package/cli/theming/index.js
CHANGED
|
@@ -9,8 +9,8 @@ const path_1 = __importDefault(require("path"));
|
|
|
9
9
|
const chalk_1 = __importDefault(require("chalk"));
|
|
10
10
|
const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
|
|
11
11
|
const transform_1 = __importDefault(require("../../themes/_generator/transform"));
|
|
12
|
-
const reshaped_1 = __importDefault(require("
|
|
13
|
-
const base_1 = __importDefault(require("
|
|
12
|
+
const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
|
|
13
|
+
const base_1 = __importDefault(require("../../themes/_generator/definitions/base"));
|
|
14
14
|
const transformDefinition = (name, definition, options) => {
|
|
15
15
|
const { isFragment, outputPath } = options;
|
|
16
16
|
const code = (0, transform_1.default)(name, definition, options);
|
|
@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const reshaped_1 = __importDefault(require("
|
|
7
|
-
const figma_1 = __importDefault(require("
|
|
8
|
-
const slate_1 = __importDefault(require("
|
|
6
|
+
const reshaped_1 = __importDefault(require("../../themes/_generator/definitions/reshaped"));
|
|
7
|
+
const figma_1 = __importDefault(require("../../themes/_generator/definitions/figma"));
|
|
8
|
+
const slate_1 = __importDefault(require("../../themes/_generator/definitions/slate"));
|
|
9
9
|
const config = {
|
|
10
10
|
themes: {
|
|
11
11
|
reshaped: reshaped_1.default,
|
|
@@ -38,6 +38,8 @@ const AccordionContent = (props) => {
|
|
|
38
38
|
}
|
|
39
39
|
setAnimatedHeight(targetHeight);
|
|
40
40
|
}, [active]);
|
|
41
|
-
return (React.createElement("div", { className: contentClassNames, ref: contentRef, style: animatedHeight !== null
|
|
41
|
+
return (React.createElement("div", { className: contentClassNames, ref: contentRef, style: animatedHeight !== null
|
|
42
|
+
? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
|
|
43
|
+
: undefined, onTransitionEnd: handleTransitionEnd, "aria-labelledby": triggerId, id: contentId, role: "region", hidden: !active && animatedHeight === null }, children));
|
|
42
44
|
};
|
|
43
45
|
export default AccordionContent;
|
|
@@ -3,6 +3,7 @@ import { Example, Placeholder } from "../../../utilities/storybook/index.js";
|
|
|
3
3
|
import Accordion from "../index.js";
|
|
4
4
|
import Button from "../../Button/index.js";
|
|
5
5
|
import View from "../../View/index.js";
|
|
6
|
+
import TextField from "../../TextField/index.js";
|
|
6
7
|
export default { title: "Utilities/Accordion" };
|
|
7
8
|
export const behavior = () => (<Example>
|
|
8
9
|
<Example.Item title="uncontrolled">
|
|
@@ -10,8 +11,8 @@ export const behavior = () => (<Example>
|
|
|
10
11
|
<Accordion.Trigger>Uncontrolled accordion</Accordion.Trigger>
|
|
11
12
|
<Accordion.Content>
|
|
12
13
|
<View paddingTop={2}>
|
|
14
|
+
<TextField name="test"/>
|
|
13
15
|
<Placeholder />
|
|
14
|
-
<button>Heeloo</button>
|
|
15
16
|
</View>
|
|
16
17
|
</Accordion.Content>
|
|
17
18
|
</Accordion>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none
|
|
1
|
+
.root{-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px);position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1)
|
|
1
|
+
.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px);position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) 0;outline:none;padding:0 var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-text-fill-color:var(--rs-color-foreground-neutral);-webkit-background-clip:text}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;position:relative;z-index:5}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.attachment{align-items:center;display:flex}.attachment--position-start .affix,.attachment--position-start .icon{margin-inline-end:var(--rs-unit-x1);padding-inline-start:var(--rs-text-field-gap)}.attachment--position-start .affix{border-inline-end:1px solid var(--rs-color-border-neutral-faded);padding-inline-end:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.attachment--position-end .affix,.attachment--position-end .icon{margin-inline-start:var(--rs-unit-x1);padding-inline-end:var(--rs-text-field-gap)}.attachment--position-end .affix{border-inline-start:1px solid var(--rs-color-border-neutral-faded);padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (max-width:659px) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (min-width:660px){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:900px){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (min-width:1280px){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x1);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{padding-bottom:var(--rs-unit-x4);padding-top:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
@@ -501,7 +501,7 @@ export const border = () => (<Example>
|
|
|
501
501
|
</Example.Item>
|
|
502
502
|
|
|
503
503
|
<Example.Item title="border: positive-faded">
|
|
504
|
-
<View borderColor="positive" padding={4}>
|
|
504
|
+
<View borderColor="positive-faded" padding={4}>
|
|
505
505
|
Content
|
|
506
506
|
</View>
|
|
507
507
|
</Example.Item>
|
package/config/tailwind.js
CHANGED
|
@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.getTheme = void 0;
|
|
7
|
-
const reshaped_1 = __importDefault(require("../
|
|
8
|
-
const base_1 = __importDefault(require("../
|
|
7
|
+
const reshaped_1 = __importDefault(require("../themes/_generator/definitions/reshaped"));
|
|
8
|
+
const base_1 = __importDefault(require("../themes/_generator/definitions/base"));
|
|
9
9
|
const string_1 = require("../utilities/string");
|
|
10
10
|
const color_1 = require("../utilities/color");
|
|
11
11
|
const mergeDefinitions_1 = __importDefault(require("../themes/_generator/utilities/mergeDefinitions"));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "2.4.
|
|
4
|
+
"version": "2.4.5",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -144,18 +144,23 @@
|
|
|
144
144
|
},
|
|
145
145
|
"size-limit": [
|
|
146
146
|
{
|
|
147
|
-
"name": "JS",
|
|
147
|
+
"name": "Library / JS",
|
|
148
148
|
"path": "dist/bundle.js",
|
|
149
149
|
"webpack": false
|
|
150
150
|
},
|
|
151
151
|
{
|
|
152
|
-
"name": "CSS",
|
|
152
|
+
"name": "Library / CSS",
|
|
153
153
|
"path": "dist/bundle.css",
|
|
154
154
|
"webpack": false
|
|
155
155
|
},
|
|
156
156
|
{
|
|
157
|
-
"name": "
|
|
158
|
-
"path": "dist/
|
|
157
|
+
"name": "Theming / JS",
|
|
158
|
+
"path": "dist/tests/themingWithoutDefinition.js",
|
|
159
|
+
"webpack": true
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "Theming with a default theme definition / JS",
|
|
163
|
+
"path": "dist/tests/themingWithDefinition.js",
|
|
159
164
|
"webpack": true
|
|
160
165
|
}
|
|
161
166
|
],
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const generateColors_1 = __importDefault(require("../utilities/generateColors"));
|
|
3
7
|
const theme = {
|
|
4
8
|
fontFamily: {
|
|
5
9
|
title: {
|
|
@@ -101,44 +105,7 @@ const theme = {
|
|
|
101
105
|
radiusMedium: { px: 8 },
|
|
102
106
|
radiusLarge: { px: 12 },
|
|
103
107
|
},
|
|
104
|
-
color:
|
|
105
|
-
foregroundNeutral: { hex: "#14171F", hexDark: "#EFF0F1" },
|
|
106
|
-
foregroundNeutralFaded: { hex: "#4D5874", hexDark: "#C2C8D6" },
|
|
107
|
-
foregroundDisabled: { hex: "#C7CDDB", hexDark: "#404A63" },
|
|
108
|
-
foregroundPrimary: { hex: "#4D4BE7", hexDark: "#9D9CF7" },
|
|
109
|
-
foregroundPositive: { hex: "#05751F", hexDark: "#03AB5F" },
|
|
110
|
-
foregroundCritical: { hex: "#CB101D", hexDark: "#EB6666" },
|
|
111
|
-
backgroundNeutral: { hex: "#DFE2EA", hexDark: "#384056" },
|
|
112
|
-
backgroundNeutralFaded: { hex: "#F3F4F6", hexDark: "#242838" },
|
|
113
|
-
backgroundNeutralHighlighted: { hex: "#D4D8E3", hexDark: "#404A63" },
|
|
114
|
-
backgroundDisabled: { hex: "#ECEEF3", hexDark: "#1C202B" },
|
|
115
|
-
backgroundDisabledFaded: { hex: "#F4F5F7", hexDark: "#161922" },
|
|
116
|
-
backgroundPrimary: { hex: "#5A58F2", hexDark: "#5250F2" },
|
|
117
|
-
backgroundPrimaryHighlighted: { hex: "#6d6bf5", hexDark: "#5f5df4" },
|
|
118
|
-
backgroundPrimaryFaded: { hex: "#EDECFD", hexDark: "#24254C" },
|
|
119
|
-
backgroundPositive: { hex: "#118850", hexDark: "#06743F" },
|
|
120
|
-
backgroundPositiveFaded: { hex: "#EBFEF6", hexDark: "#0F2921" },
|
|
121
|
-
backgroundPositiveHighlighted: { hex: "#009950", hexDark: "#008545" },
|
|
122
|
-
backgroundCritical: { hex: "#E22C2C", hexDark: "#AB1717" },
|
|
123
|
-
backgroundCriticalFaded: { hex: "#FEF1F2", hexDark: "#2F1E1F" },
|
|
124
|
-
backgroundCriticalHighlighted: { hex: "#eb4747", hexDark: "#c11515" },
|
|
125
|
-
borderNeutral: { hex: "#BBC1D3", hexDark: "#49536F" },
|
|
126
|
-
borderNeutralFaded: { hex: "#DFE2EA", hexDark: "#313649" },
|
|
127
|
-
borderDisabled: { hex: "#DFE2EA", hexDark: "#242938" },
|
|
128
|
-
borderPrimary: { hex: "#4D4BE7", hexDark: "#7D7BF4" },
|
|
129
|
-
borderPrimaryFaded: { hex: "#D7D5FB", hexDark: "#2E3160" },
|
|
130
|
-
borderPositive: { hex: "#05751F", hexDark: "#03A059" },
|
|
131
|
-
borderPositiveFaded: { hex: "#CDEDD5", hexDark: "#163C30" },
|
|
132
|
-
borderCritical: { hex: "#CB101D", hexDark: "#E95454" },
|
|
133
|
-
borderCriticalFaded: { hex: "#FBD5D8", hexDark: "#412A2B" },
|
|
134
|
-
backgroundPage: { hex: "#FFFFFF", hexDark: "#0D1117" },
|
|
135
|
-
backgroundPageFaded: { hex: "#FAFAFA", hexDark: "#0F131A" },
|
|
136
|
-
backgroundElevationBase: { hex: "#FFFFFF", hexDark: "#14181f" },
|
|
137
|
-
backgroundElevationRaised: { hex: "#FFFFFF", hexDark: "#181D25" },
|
|
138
|
-
backgroundElevationOverlay: { hex: "#FFFFFF", hexDark: "#1C212B" },
|
|
139
|
-
black: { hex: "#000000" },
|
|
140
|
-
white: { hex: "#FFFFFF" },
|
|
141
|
-
},
|
|
108
|
+
color: (0, generateColors_1.default)(),
|
|
142
109
|
duration: {
|
|
143
110
|
fast: { ms: 200 },
|
|
144
111
|
medium: { ms: 300 },
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Example } from "../../../utilities/storybook/index.js";
|
|
3
|
+
import View from "../../../components/View/index.js";
|
|
3
4
|
import Button from "../../../components/Button/index.js";
|
|
5
|
+
import Badge from "../../../components/Badge/index.js";
|
|
6
|
+
import Alert from "../../../components/Alert/index.js";
|
|
7
|
+
import Card from "../../../components/Card/index.js";
|
|
8
|
+
import DropdownMenu from "../../../components/DropdownMenu/index.js";
|
|
4
9
|
import Theme from "../../../components/Theme/index.js";
|
|
5
|
-
import { getThemeCSS } from "../../index.js";
|
|
10
|
+
import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
|
|
6
11
|
export default { title: "Themes" };
|
|
7
12
|
const css = getThemeCSS("green", {
|
|
8
13
|
color: {
|
|
@@ -16,7 +21,64 @@ const css2 = getThemeCSS("peach", {
|
|
|
16
21
|
backgroundPrimaryHighlighted: { hex: "#ffbe76" },
|
|
17
22
|
},
|
|
18
23
|
});
|
|
19
|
-
|
|
24
|
+
const cssGenerated = getThemeCSS("generated", Object.assign(Object.assign({}, baseThemeDefinition), { color: generateThemeColors({ primary: "#2563eb" }) }));
|
|
25
|
+
const componentExamples = (<View gap={4}>
|
|
26
|
+
<View gap={2} direction="row">
|
|
27
|
+
<Button color="primary">Primary button</Button>
|
|
28
|
+
<Button color="critical">Primary button</Button>
|
|
29
|
+
<Button color="positive">Primary button</Button>
|
|
30
|
+
<Button color="neutral">Primary button</Button>
|
|
31
|
+
</View>
|
|
32
|
+
<View gap={2} direction="row">
|
|
33
|
+
<Button color="primary" variant="outline">
|
|
34
|
+
Primary button
|
|
35
|
+
</Button>
|
|
36
|
+
<Button color="critical" variant="outline">
|
|
37
|
+
Primary button
|
|
38
|
+
</Button>
|
|
39
|
+
<Button color="positive" variant="outline">
|
|
40
|
+
Primary button
|
|
41
|
+
</Button>
|
|
42
|
+
<Button color="neutral" variant="outline">
|
|
43
|
+
Primary button
|
|
44
|
+
</Button>
|
|
45
|
+
</View>
|
|
46
|
+
<View direction="row" gap={4}>
|
|
47
|
+
<View.Item columns={6}>
|
|
48
|
+
<Alert color="primary">Primary</Alert>
|
|
49
|
+
</View.Item>
|
|
50
|
+
<View.Item columns={6}>
|
|
51
|
+
<Alert color="critical">Critical</Alert>
|
|
52
|
+
</View.Item>
|
|
53
|
+
<View.Item columns={6}>
|
|
54
|
+
<Alert color="positive">Positive</Alert>
|
|
55
|
+
</View.Item>
|
|
56
|
+
<View.Item columns={6}>
|
|
57
|
+
<Alert color="neutral">Neutral</Alert>
|
|
58
|
+
</View.Item>
|
|
59
|
+
<View.Item columns={6}>
|
|
60
|
+
<Card>
|
|
61
|
+
<View gap={2} align="start">
|
|
62
|
+
<Badge variant="outline" color="primary">
|
|
63
|
+
Badge
|
|
64
|
+
</Badge>
|
|
65
|
+
<DropdownMenu>
|
|
66
|
+
<DropdownMenu.Trigger>
|
|
67
|
+
{(attributes) => (<Button variant="faded" attributes={attributes}>
|
|
68
|
+
Menu
|
|
69
|
+
</Button>)}
|
|
70
|
+
</DropdownMenu.Trigger>
|
|
71
|
+
<DropdownMenu.Content>
|
|
72
|
+
<DropdownMenu.Item>Item 1</DropdownMenu.Item>
|
|
73
|
+
<DropdownMenu.Item>Item 1</DropdownMenu.Item>
|
|
74
|
+
</DropdownMenu.Content>
|
|
75
|
+
</DropdownMenu>
|
|
76
|
+
</View>
|
|
77
|
+
</Card>
|
|
78
|
+
</View.Item>
|
|
79
|
+
</View>
|
|
80
|
+
</View>);
|
|
81
|
+
export const base = () => (<Example>
|
|
20
82
|
<Example.Item title="custom runtime theme">
|
|
21
83
|
<style>{css}</style>
|
|
22
84
|
<Theme name="green">
|
|
@@ -30,3 +92,14 @@ export const behavior = () => (<Example>
|
|
|
30
92
|
</Theme>
|
|
31
93
|
</Example.Item>
|
|
32
94
|
</Example>);
|
|
95
|
+
export const generation = () => (<Example>
|
|
96
|
+
<Example.Item title="base">
|
|
97
|
+
<style>{cssGenerated}</style>
|
|
98
|
+
<View gap={4}>
|
|
99
|
+
<View.Item>Generated theme</View.Item>
|
|
100
|
+
<Theme name="generated">{componentExamples}</Theme>
|
|
101
|
+
{/* <View.Item>Reshaped theme</View.Item> */}
|
|
102
|
+
{/* <Theme name="reshaped">{componentExamples}</Theme> */}
|
|
103
|
+
</View>
|
|
104
|
+
</Example.Item>
|
|
105
|
+
</Example>);
|
|
@@ -8,8 +8,8 @@ const transformedToken = (name, token, theme) => [
|
|
|
8
8
|
type: "variable",
|
|
9
9
|
value: token
|
|
10
10
|
.map((value) => {
|
|
11
|
-
const blur =
|
|
12
|
-
const spread =
|
|
11
|
+
const blur = ` ${value.blurRadius || 0}px`;
|
|
12
|
+
const spread = ` ${value.spreadRadius || 0}px`;
|
|
13
13
|
const colorRef = theme.color[value.colorToken];
|
|
14
14
|
const color = `rgba(${(0, color_1.hexToRgbString)(colorRef.hex)}, ${value.opacity || 1})`;
|
|
15
15
|
return `${value.offsetX}px ${value.offsetY}px${blur}${spread} ${color}`;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Some of the color conversion utilities are taken from https://github.com/hsluv/hsluv-javascript
|
|
3
|
+
* They have been rewritten for easier color transformations in the theme generation case
|
|
4
|
+
*/
|
|
5
|
+
type RgbColor = {
|
|
6
|
+
r: number;
|
|
7
|
+
g: number;
|
|
8
|
+
b: number;
|
|
9
|
+
};
|
|
10
|
+
export declare function hexToRgb(hex: string): RgbColor;
|
|
11
|
+
export declare function getRgbLuminance({ r, g, b }: RgbColor): number;
|
|
12
|
+
declare const generate: (args?: {
|
|
13
|
+
primary?: string;
|
|
14
|
+
critical?: string;
|
|
15
|
+
positive?: string;
|
|
16
|
+
neutral?: string;
|
|
17
|
+
}) => Record<import("../tokens/color/color.types").Name, import("../tokens/color/color.types").Token> & {
|
|
18
|
+
[tokenName: string]: import("../tokens/color/color.types").Token;
|
|
19
|
+
};
|
|
20
|
+
export default generate;
|