@noya-app/noya-designsystem 0.0.13 → 0.0.15

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.
Files changed (20) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +24 -0
  3. package/dist/index.d.mts +65 -44
  4. package/dist/index.d.ts +65 -44
  5. package/dist/index.js +71 -14
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +70 -14
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +6 -6
  10. package/src/components/Button.tsx +84 -78
  11. package/src/components/Chip.tsx +74 -73
  12. package/src/components/Dialog.tsx +51 -26
  13. package/src/components/GridView.tsx +113 -100
  14. package/src/components/IconButton.tsx +10 -8
  15. package/src/components/InputFieldWithCompletions.tsx +3 -0
  16. package/src/components/InspectorPrimitives.tsx +1 -1
  17. package/src/components/Switch.tsx +25 -25
  18. package/src/components/Text.tsx +60 -56
  19. package/src/theme/dark.ts +33 -31
  20. package/src/theme/light.ts +76 -64
package/src/components/Text.tsx CHANGED
@@ -1,48 +1,51 @@
1
- import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from 'react';
2
- import styled, { CSSProperties } from 'styled-components';
3
- import { Theme, ThemeColorName } from '../theme';
4
- import { BreakpointCollection, mergeBreakpoints } from '../utils/breakpoints';
5
-
6
- const elements: Record<keyof Theme['textStyles'], keyof ReactHTML> = {
7
- title: 'h1',
8
- subtitle: 'h1',
9
- heading1: 'h1',
10
- heading2: 'h2',
11
- heading3: 'h3',
12
- heading4: 'h4',
13
- heading5: 'h5',
14
- body: 'p',
15
- small: 'span',
16
- code: 'code',
17
- label: 'span',
1
+ import React, { ForwardedRef, forwardRef, ReactHTML, ReactNode } from "react";
2
+ import styled, { CSSProperties } from "styled-components";
3
+ import { Theme, ThemeColorName } from "../theme";
4
+ import { BreakpointCollection, mergeBreakpoints } from "../utils/breakpoints";
5
+
6
+ const elements: Record<keyof Theme["textStyles"], keyof ReactHTML> = {
7
+ title: "h1",
8
+ subtitle: "h1",
9
+ heading1: "h1",
10
+ heading2: "h2",
11
+ heading3: "h3",
12
+ heading4: "h4",
13
+ heading5: "h5",
14
+ body: "p",
15
+ small: "span",
16
+ code: "code",
17
+ label: "span",
18
18
  };
19
19
 
20
20
  type StyleProps = {
21
- flex?: CSSProperties['flex'];
22
- padding?: CSSProperties['padding'];
23
- background?: CSSProperties['background'];
24
- borderRadius?: CSSProperties['borderRadius'];
25
- textAlign?: CSSProperties['textAlign'];
26
- fontWeight?: CSSProperties['fontWeight'];
27
- fontStyle?: CSSProperties['fontStyle'];
28
- fontSize?: CSSProperties['fontSize'];
29
- lineHeight?: CSSProperties['lineHeight'];
30
- fontFamily?: CSSProperties['fontFamily'];
31
- wordBreak?: CSSProperties['wordBreak'];
32
- whiteSpace?: CSSProperties['whiteSpace'];
33
- height?: CSSProperties['height'];
34
- width?: CSSProperties['width'];
35
- opacity?: CSSProperties['opacity'];
36
- position?: CSSProperties['position'];
37
- overflow?: CSSProperties['overflow'];
38
- textOverflow?: CSSProperties['textOverflow'];
39
- textDecoration?: CSSProperties['textDecoration'];
40
- display?: CSSProperties['display'];
41
- top?: CSSProperties['top'];
42
- right?: CSSProperties['right'];
43
- bottom?: CSSProperties['bottom'];
44
- left?: CSSProperties['left'];
45
- userSelect?: CSSProperties['userSelect'];
21
+ flex?: CSSProperties["flex"];
22
+ padding?: CSSProperties["padding"];
23
+ background?: CSSProperties["background"];
24
+ borderRadius?: CSSProperties["borderRadius"];
25
+ textAlign?: CSSProperties["textAlign"];
26
+ fontWeight?: CSSProperties["fontWeight"];
27
+ fontStyle?: CSSProperties["fontStyle"];
28
+ fontSize?: CSSProperties["fontSize"];
29
+ lineHeight?: CSSProperties["lineHeight"];
30
+ fontFamily?: CSSProperties["fontFamily"];
31
+ wordBreak?: CSSProperties["wordBreak"];
32
+ whiteSpace?: CSSProperties["whiteSpace"];
33
+ height?: CSSProperties["height"];
34
+ width?: CSSProperties["width"];
35
+ minWidth?: CSSProperties["minWidth"];
36
+ maxWidth?: CSSProperties["maxWidth"];
37
+ opacity?: CSSProperties["opacity"];
38
+ position?: CSSProperties["position"];
39
+ overflow?: CSSProperties["overflow"];
40
+ textOverflow?: CSSProperties["textOverflow"];
41
+ textDecoration?: CSSProperties["textDecoration"];
42
+ display?: CSSProperties["display"];
43
+ top?: CSSProperties["top"];
44
+ right?: CSSProperties["right"];
45
+ bottom?: CSSProperties["bottom"];
46
+ left?: CSSProperties["left"];
47
+ userSelect?: CSSProperties["userSelect"];
48
+ cursor?: CSSProperties["cursor"];
46
49
  };
47
50
 
48
51
  export type TextBreakpointList = BreakpointCollection<StyleProps>;
@@ -51,18 +54,19 @@ interface Props extends StyleProps {
51
54
  as?: keyof ReactHTML;
52
55
  href?: string;
53
56
  className?: string;
54
- variant: keyof Theme['textStyles'];
57
+ variant: keyof Theme["textStyles"];
55
58
  breakpoints?: BreakpointCollection<StyleProps> | null | false;
56
59
  color?: ThemeColorName;
57
60
  children: ReactNode;
58
61
  onClick?: () => void;
62
+ onDoubleClick?: () => void;
59
63
  }
60
64
 
61
65
  const StyledElement = styled.span<
62
66
  {
63
- variant: keyof Theme['textStyles'];
67
+ variant: keyof Theme["textStyles"];
64
68
  styleProps: StyleProps;
65
- } & Pick<Props, 'variant' | 'breakpoints' | 'color'>
69
+ } & Pick<Props, "variant" | "breakpoints" | "color">
66
70
  >(({ theme, variant, styleProps, breakpoints, color }) => ({
67
71
  ...theme.textStyles[variant],
68
72
  color: color ? theme.colors[color] : undefined,
@@ -82,9 +86,9 @@ export const Text = forwardRef(function Text(
82
86
  onClick,
83
87
  ...rest
84
88
  }: Props,
85
- forwardedRef: ForwardedRef<HTMLElement>,
89
+ forwardedRef: ForwardedRef<HTMLElement>
86
90
  ) {
87
- const element = as ?? elements[variant] ?? 'span';
91
+ const element = as ?? elements[variant] ?? "span";
88
92
 
89
93
  return (
90
94
  <StyledElement
@@ -103,48 +107,48 @@ export const Text = forwardRef(function Text(
103
107
  );
104
108
  });
105
109
 
106
- type PresetProps = Omit<Props, 'variant'>;
110
+ type PresetProps = Omit<Props, "variant">;
107
111
 
108
112
  export const Heading1 = forwardRef(
109
113
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
110
114
  <Text ref={ref} {...props} variant="heading1" />
111
- ),
115
+ )
112
116
  );
113
117
 
114
118
  export const Heading2 = forwardRef(
115
119
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
116
120
  <Text ref={ref} {...props} variant="heading2" />
117
- ),
121
+ )
118
122
  );
119
123
 
120
124
  export const Heading3 = forwardRef(
121
125
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
122
126
  <Text ref={ref} {...props} variant="heading3" />
123
- ),
127
+ )
124
128
  );
125
129
 
126
130
  export const Heading4 = forwardRef(
127
131
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
128
132
  <Text ref={ref} {...props} variant="heading4" />
129
- ),
133
+ )
130
134
  );
131
135
 
132
136
  export const Heading5 = forwardRef(
133
137
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
134
138
  <Text ref={ref} {...props} variant="heading5" />
135
- ),
139
+ )
136
140
  );
137
141
 
138
142
  export const Body = forwardRef(
139
143
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
140
144
  <Text ref={ref} {...props} variant="body" />
141
- ),
145
+ )
142
146
  );
143
147
 
144
148
  export const Small = forwardRef(
145
149
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
146
150
  <Text ref={ref} {...props} variant="small" />
147
- ),
151
+ )
148
152
  );
149
153
 
150
154
  // export const Label = forwardRef(
@@ -156,7 +160,7 @@ export const Small = forwardRef(
156
160
  export const Italic = ({ children }: { children: ReactNode }) => (
157
161
  <span
158
162
  style={{
159
- fontStyle: 'italic',
163
+ fontStyle: "italic",
160
164
  }}
161
165
  >
162
166
  {children}
package/src/theme/dark.ts CHANGED
@@ -1,37 +1,39 @@
1
- import produce from 'immer';
2
- import * as lightTheme from './light';
1
+ import produce from "immer";
2
+ import * as lightTheme from "./light";
3
3
 
4
4
  export const colors = produce(lightTheme.colors, (colors) => {
5
- colors.logo.fill = 'rgb(248,248,250)';
6
- colors.logo.highlight = 'rgb(248,248,250)';
7
- colors.text = 'rgb(248,248,250)';
8
- colors.textMuted = 'rgb(180,179,182)';
9
- colors.textDisabled = 'rgb(100,99,102)';
10
- colors.inputBackground = 'rgba(181,178,255,0.08)';
11
- colors.inputBackgroundLight = 'rgba(181,178,255,0.10)';
12
- colors.codeBackground = 'rgb(20,19,23)';
13
- colors.dividerSubtle = 'rgba(255,255,255,0.04)';
14
- colors.divider = 'rgba(255,255,255,0.08)';
15
- colors.dividerStrong = 'rgba(0,0,0,1)';
16
- colors.primary = 'rgb(119, 66, 255)';
17
- colors.primaryLight = 'rgb(134, 86, 255)';
18
- colors.secondaryBright = '#36fe91';
19
- colors.canvas.background = 'rgb(20,19,23)';
20
- colors.canvas.sliceOutline = 'rgb(150,150,150)';
21
- colors.canvas.grid = 'rgba(0,0,0,0.1)';
22
- colors.sidebar.background = 'rgba(34,33,39,0.95)';
23
- colors.popover.background = 'rgba(34,33,39,1)';
5
+ colors.logo.fill = "rgb(248,248,250)";
6
+ colors.logo.highlight = "rgb(248,248,250)";
7
+ colors.text = "rgb(248,248,250)";
8
+ colors.textMuted = "rgb(180,179,182)";
9
+ colors.textDisabled = "rgb(100,99,102)";
10
+ colors.inputBackground = "rgba(181,178,255,0.08)";
11
+ colors.inputBackgroundLight = "rgba(181,178,255,0.10)";
12
+ colors.codeBackground = "rgb(20,19,23)";
13
+ colors.dividerSubtle = "rgba(255,255,255,0.04)";
14
+ colors.divider = "rgba(255,255,255,0.08)";
15
+ colors.dividerStrong = "rgba(0,0,0,1)";
16
+ colors.primary = "rgb(119, 66, 255)";
17
+ colors.primaryLight = "rgb(134, 86, 255)";
18
+ colors.secondaryBright = "#36fe91";
19
+ colors.canvas.background = "rgb(20,19,23)";
20
+ colors.canvas.sliceOutline = "rgb(150,150,150)";
21
+ colors.canvas.grid = "rgba(0,0,0,0.1)";
22
+ colors.sidebar.background = "rgba(34,33,39,0.95)";
23
+ colors.popover.background = "rgba(34,33,39,1)";
24
24
  colors.popover.divider = colors.divider;
25
- colors.listView.raisedBackground = 'rgba(181,178,255,0.1)';
26
- colors.listView.editingBackground = '#000';
27
- colors.slider.background = '#BBB';
25
+ colors.listView.raisedBackground = "rgba(181,178,255,0.1)";
26
+ colors.listView.editingBackground = "#000";
27
+ colors.slider.background = "#BBB";
28
28
  colors.radioGroup.background = colors.inputBackground;
29
- colors.mask = 'rgb(102,187,106)';
30
- colors.transparentChecker = 'rgba(255,255,255,0.3)';
31
- colors.scrollbar = 'rgba(199,199,199,0.2)';
32
- colors.placeholderDots = 'rgba(255,255,255,0.3)';
33
- colors.dragOutline = 'white';
34
- colors.activeBackground = 'rgba(181,178,255,0.08)';
29
+ colors.mask = "rgb(102,187,106)";
30
+ colors.transparentChecker = "rgba(255,255,255,0.3)";
31
+ colors.scrollbar = "rgba(199,199,199,0.2)";
32
+ colors.placeholderDots = "rgba(255,255,255,0.3)";
33
+ colors.dragOutline = "white";
34
+ colors.activeBackground = "rgba(181,178,255,0.08)";
35
+ colors.thumbnailBackground = "#1f1d33";
36
+ colors.thumbnailShadow = "#1f1d3366";
35
37
  });
36
38
 
37
- export { fonts, sizes, textStyles } from './light';
39
+ export { fonts, sizes, textStyles } from "./light";
package/src/theme/light.ts CHANGED
@@ -1,76 +1,83 @@
1
- import { CSSObject } from 'styled-components';
2
- import { mediaQuery } from '../mediaQuery';
1
+ import { CSSObject } from "styled-components";
2
+ import { mediaQuery } from "../mediaQuery";
3
3
 
4
4
  export const colors = {
5
5
  logo: {
6
- fill: 'rgb(175,175,175)',
7
- highlight: 'rgb(175,175,175)',
6
+ fill: "rgb(175,175,175)",
7
+ highlight: "rgb(175,175,175)",
8
8
  },
9
- text: 'rgb(38, 48, 83)',
10
- textMuted: 'rgb(85, 85, 85)',
11
- textSubtle: 'rgb(121, 121, 121)',
12
- textDisabled: 'rgb(160, 160, 160)',
13
- dividerSubtle: 'rgba(0, 0, 0, 0.04)',
14
- divider: 'rgba(0, 0, 0, 0.07)',
15
- dividerStrong: 'rgba(0, 0, 0, 0.09)',
16
- primary: 'rgb(132, 63, 255)',
17
- primaryLight: 'rgb(147, 86, 255)',
18
- secondary: 'rgb(0, 151, 117)',
19
- secondaryLight: 'rgb(0, 160, 129)',
20
- secondaryBright: '#0ab557',
21
- warning: 'rgb(251, 211, 0)',
22
- neutralBackground: 'rgb(222,223,232)',
23
- inputBackground: 'rgb(240, 240, 242)',
24
- inputBackgroundLight: 'rgb(243, 243, 245)',
25
- codeBackground: 'rgb(250, 250, 250)',
26
- selectedBackground: 'rgb(242, 245, 250)',
27
- transparentChecker: 'rgba(255,255,255,0.8)',
28
- activeBackground: 'rgba(0,0,0,0.1)',
29
- scrollbar: 'rgba(199,199,199,0.8)',
30
- placeholderDots: 'rgba(0,0,0,0.3)',
9
+ text: "rgb(38, 48, 83)",
10
+ textMuted: "rgb(85, 85, 85)",
11
+ textSubtle: "rgb(121, 121, 121)",
12
+ textDisabled: "rgb(160, 160, 160)",
13
+ textDecorativeLight: "rgb(168, 185, 212)",
14
+ dividerSubtle: "rgba(0, 0, 0, 0.04)",
15
+ divider: "rgba(0, 0, 0, 0.07)",
16
+ dividerStrong: "rgba(0, 0, 0, 0.09)",
17
+ primary: "rgb(132, 63, 255)",
18
+ primaryLight: "rgb(147, 86, 255)",
19
+ secondary: "rgb(0, 151, 117)",
20
+ secondaryLight: "rgb(0, 160, 129)",
21
+ secondaryBright: "#0ab557",
22
+ warning: "rgb(251, 211, 0)",
23
+ neutralBackground: "rgb(222,223,232)",
24
+ inputBackground: "rgb(240, 240, 242)",
25
+ inputBackgroundLight: "rgb(243, 243, 245)",
26
+ codeBackground: "rgb(250, 250, 250)",
27
+ codeBackgroundLight: "rgb(250, 250, 250)",
28
+ get codeBackgroundDark() {
29
+ return colors.text;
30
+ },
31
+ codeBackgroundDecorativeDark: "#435080",
32
+ selectedBackground: "rgb(242, 245, 250)",
33
+ transparentChecker: "rgba(255,255,255,0.8)",
34
+ activeBackground: "rgba(0,0,0,0.1)",
35
+ scrollbar: "rgba(199,199,199,0.8)",
36
+ placeholderDots: "rgba(0,0,0,0.3)",
31
37
  listView: {
32
- raisedBackground: 'rgba(0,0,0,0.03)',
33
- editingBackground: '#fff',
38
+ raisedBackground: "rgba(0,0,0,0.03)",
39
+ editingBackground: "#fff",
34
40
  },
35
41
  canvas: {
36
- background: 'rgb(249,249,249)',
42
+ background: "rgb(249,249,249)",
37
43
  get selectionStroke() {
38
44
  return colors.primary;
39
45
  },
40
- dragHandleStroke: 'rgba(180,180,180,0.5)',
41
- measurement: 'rgb(207,92,42)',
42
- sliceOutline: 'rgb(210,210,210)',
43
- grid: 'rgba(0,0,0,0.05)',
46
+ dragHandleStroke: "rgba(180,180,180,0.5)",
47
+ measurement: "rgb(207,92,42)",
48
+ sliceOutline: "rgb(210,210,210)",
49
+ grid: "rgba(0,0,0,0.05)",
44
50
  },
45
51
  sidebar: {
46
- background: 'rgba(252,252,252,0.85)',
52
+ background: "rgba(252,252,252,0.85)",
47
53
  },
48
54
  popover: {
49
- background: 'rgb(252,252,252)',
50
- divider: 'transparent',
55
+ background: "rgb(252,252,252)",
56
+ divider: "transparent",
51
57
  },
52
58
  slider: {
53
- background: 'white',
54
- border: '#BBB',
59
+ background: "white",
60
+ border: "#BBB",
55
61
  },
56
62
  radioGroup: {
57
- background: 'white',
63
+ background: "white",
58
64
  },
59
- icon: 'rgb(139, 139, 139)',
60
- iconSelected: 'rgb(220, 220, 220)',
61
- mask: 'rgb(12,193,67)',
65
+ icon: "rgb(139, 139, 139)",
66
+ iconSelected: "rgb(220, 220, 220)",
67
+ mask: "rgb(12,193,67)",
62
68
  imageOverlay:
63
- 'linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))',
69
+ "linear-gradient(0deg, rgba(132, 63, 255,0.55), rgba(132, 63, 255,0.55))",
64
70
  get dragOutline() {
65
71
  return colors.primary;
66
72
  },
67
- selection: 'rgb(179,215,254)',
68
- thumbnailBackground: '#E1DAFF',
73
+ selection: "rgb(179,215,254)",
74
+ thumbnailBackground: "#E1DAFF",
75
+ thumbnailShadow: "#D3CEED66",
69
76
  };
70
77
 
71
78
  export const fonts = {
72
79
  normal:
73
- "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
80
+ "'__Inter_6b0edc', '__Inter_Fallback_6b0edc', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
74
81
  monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
75
82
  };
76
83
 
@@ -81,75 +88,80 @@ export const textStyles = {
81
88
  title: {
82
89
  fontFamily: fonts.normal,
83
90
  fontSize: `${typeScale[0]}rem`,
84
- fontWeight: 'bold',
85
- lineHeight: '1.4',
91
+ fontWeight: "bold",
92
+ lineHeight: "1.4",
93
+ letterSpacing: "-0.05em",
86
94
  [mediaQuery.small]: {
87
- fontSize: '36px',
95
+ fontSize: "36px",
88
96
  },
89
97
  } as CSSObject,
90
98
  subtitle: {
91
99
  fontFamily: fonts.normal,
92
100
  fontSize: `${typeScale[3]}rem`,
93
101
  fontWeight: 500,
94
- lineHeight: '1.75',
102
+ lineHeight: "1.75",
103
+ letterSpacing: "-0.05em",
95
104
  [mediaQuery.small]: {
96
- fontSize: '18px',
105
+ fontSize: "18px",
97
106
  },
98
107
  } as CSSObject,
99
108
  heading1: {
100
109
  fontFamily: fonts.normal,
101
110
  fontSize: `${typeScale[2]}rem`,
102
111
  fontWeight: 500,
103
- lineHeight: '1.75',
112
+ lineHeight: "1.75",
113
+ letterSpacing: "-0.025em",
104
114
  } as CSSObject,
105
115
  heading2: {
106
116
  fontFamily: fonts.normal,
107
117
  fontSize: `${typeScale[3]}rem`,
108
118
  fontWeight: 500,
109
- lineHeight: '1.75',
119
+ lineHeight: "1.75",
120
+ letterSpacing: "-0.025em",
110
121
  } as CSSObject,
111
122
  heading3: {
112
123
  fontFamily: fonts.normal,
113
124
  fontSize: `${typeScale[4]}rem`,
114
125
  fontWeight: 500,
115
- lineHeight: '1.75',
126
+ lineHeight: "1.75",
127
+ letterSpacing: "-0.025em",
116
128
  } as CSSObject,
117
129
  heading4: {
118
130
  fontFamily: fonts.normal,
119
131
  fontSize: `${typeScale[5]}rem`,
120
132
  fontWeight: 500,
121
- lineHeight: '1.75',
133
+ lineHeight: "1.75",
122
134
  } as CSSObject,
123
135
  heading5: {
124
136
  fontFamily: fonts.normal,
125
137
  fontSize: `${typeScale[6]}rem`,
126
138
  fontWeight: 500,
127
- lineHeight: '1.75',
139
+ lineHeight: "1.75",
128
140
  } as CSSObject,
129
141
  body: {
130
142
  fontFamily: fonts.normal,
131
143
  fontSize: `${typeScale[5]}rem`,
132
144
  fontWeight: 400,
133
- lineHeight: '1.75',
145
+ lineHeight: "1.75",
134
146
  } as CSSObject,
135
147
  small: {
136
148
  fontFamily: fonts.normal,
137
149
  fontSize: `${typeScale[6]}rem`,
138
150
  fontWeight: 400,
139
- lineHeight: '1.4',
151
+ lineHeight: "1.4",
140
152
  } as CSSObject,
141
153
  code: {
142
154
  fontFamily: fonts.monospace,
143
- fontSize: '90%',
144
- lineHeight: '1.5',
155
+ fontSize: "90%",
156
+ lineHeight: "1.5",
145
157
  } as CSSObject,
146
158
  label: {
147
159
  fontFamily: fonts.normal,
148
- fontSize: '0.62rem',
160
+ fontSize: "0.62rem",
149
161
  fontWeight: 400,
150
- lineHeight: '1.4',
151
- textTransform: 'uppercase',
152
- letterSpacing: '0.3px',
162
+ lineHeight: "1.4",
163
+ textTransform: "uppercase",
164
+ letterSpacing: "0.3px",
153
165
  } as CSSObject,
154
166
  };
155
167