@noya-app/noya-designsystem 0.0.13 → 0.0.14

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 (17) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +12 -0
  3. package/dist/index.d.mts +50 -33
  4. package/dist/index.d.ts +50 -33
  5. package/dist/index.js +43 -11
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +43 -11
  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/GridView.tsx +113 -100
  12. package/src/components/IconButton.tsx +10 -8
  13. package/src/components/InputFieldWithCompletions.tsx +3 -0
  14. package/src/components/InspectorPrimitives.tsx +1 -1
  15. package/src/components/Text.tsx +57 -56
  16. package/src/theme/dark.ts +33 -31
  17. package/src/theme/light.ts +76 -64
package/src/components/Text.tsx CHANGED
@@ -1,48 +1,49 @@
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
+ 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"];
46
+ cursor?: CSSProperties["cursor"];
46
47
  };
47
48
 
48
49
  export type TextBreakpointList = BreakpointCollection<StyleProps>;
@@ -51,7 +52,7 @@ interface Props extends StyleProps {
51
52
  as?: keyof ReactHTML;
52
53
  href?: string;
53
54
  className?: string;
54
- variant: keyof Theme['textStyles'];
55
+ variant: keyof Theme["textStyles"];
55
56
  breakpoints?: BreakpointCollection<StyleProps> | null | false;
56
57
  color?: ThemeColorName;
57
58
  children: ReactNode;
@@ -60,9 +61,9 @@ interface Props extends StyleProps {
60
61
 
61
62
  const StyledElement = styled.span<
62
63
  {
63
- variant: keyof Theme['textStyles'];
64
+ variant: keyof Theme["textStyles"];
64
65
  styleProps: StyleProps;
65
- } & Pick<Props, 'variant' | 'breakpoints' | 'color'>
66
+ } & Pick<Props, "variant" | "breakpoints" | "color">
66
67
  >(({ theme, variant, styleProps, breakpoints, color }) => ({
67
68
  ...theme.textStyles[variant],
68
69
  color: color ? theme.colors[color] : undefined,
@@ -82,9 +83,9 @@ export const Text = forwardRef(function Text(
82
83
  onClick,
83
84
  ...rest
84
85
  }: Props,
85
- forwardedRef: ForwardedRef<HTMLElement>,
86
+ forwardedRef: ForwardedRef<HTMLElement>
86
87
  ) {
87
- const element = as ?? elements[variant] ?? 'span';
88
+ const element = as ?? elements[variant] ?? "span";
88
89
 
89
90
  return (
90
91
  <StyledElement
@@ -103,48 +104,48 @@ export const Text = forwardRef(function Text(
103
104
  );
104
105
  });
105
106
 
106
- type PresetProps = Omit<Props, 'variant'>;
107
+ type PresetProps = Omit<Props, "variant">;
107
108
 
108
109
  export const Heading1 = forwardRef(
109
110
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
110
111
  <Text ref={ref} {...props} variant="heading1" />
111
- ),
112
+ )
112
113
  );
113
114
 
114
115
  export const Heading2 = forwardRef(
115
116
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
116
117
  <Text ref={ref} {...props} variant="heading2" />
117
- ),
118
+ )
118
119
  );
119
120
 
120
121
  export const Heading3 = forwardRef(
121
122
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
122
123
  <Text ref={ref} {...props} variant="heading3" />
123
- ),
124
+ )
124
125
  );
125
126
 
126
127
  export const Heading4 = forwardRef(
127
128
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
128
129
  <Text ref={ref} {...props} variant="heading4" />
129
- ),
130
+ )
130
131
  );
131
132
 
132
133
  export const Heading5 = forwardRef(
133
134
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
134
135
  <Text ref={ref} {...props} variant="heading5" />
135
- ),
136
+ )
136
137
  );
137
138
 
138
139
  export const Body = forwardRef(
139
140
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
140
141
  <Text ref={ref} {...props} variant="body" />
141
- ),
142
+ )
142
143
  );
143
144
 
144
145
  export const Small = forwardRef(
145
146
  (props: PresetProps, ref: ForwardedRef<HTMLElement>) => (
146
147
  <Text ref={ref} {...props} variant="small" />
147
- ),
148
+ )
148
149
  );
149
150
 
150
151
  // export const Label = forwardRef(
@@ -156,7 +157,7 @@ export const Small = forwardRef(
156
157
  export const Italic = ({ children }: { children: ReactNode }) => (
157
158
  <span
158
159
  style={{
159
- fontStyle: 'italic',
160
+ fontStyle: "italic",
160
161
  }}
161
162
  >
162
163
  {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