@noya-app/noya-designsystem 0.1.24 → 0.1.26

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 (21) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/CHANGELOG.md +14 -0
  3. package/dist/index.d.mts +23 -3
  4. package/dist/index.d.ts +23 -3
  5. package/dist/index.js +347 -162
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +373 -193
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +2 -2
  10. package/src/components/Button.tsx +7 -0
  11. package/src/components/Chip.tsx +16 -11
  12. package/src/components/InputField.tsx +48 -8
  13. package/src/components/InputFieldWithCompletions.tsx +5 -3
  14. package/src/components/InspectorPrimitives.tsx +1 -1
  15. package/src/components/ListView.tsx +36 -8
  16. package/src/components/SelectMenu.tsx +40 -5
  17. package/src/components/Switch.tsx +3 -0
  18. package/src/components/Text.tsx +3 -0
  19. package/src/components/TextArea.tsx +82 -0
  20. package/src/index.tsx +1 -0
  21. package/src/theme/light.ts +26 -22
package/src/theme/light.ts CHANGED
@@ -5,26 +5,29 @@ export const name: string = "light";
5
5
 
6
6
  export const colors = {
7
7
  logo: {
8
- fill: "rgb(175,175,175)",
9
- highlight: "rgb(175,175,175)",
8
+ fill: "rgb(150, 152, 172)",
9
+ highlight: "rgb(150, 152, 172)",
10
10
  },
11
+ background: "rgb(255,255,255)",
11
12
  text: "rgb(38, 48, 83)",
12
- textMuted: "rgb(85, 85, 85)",
13
- textSubtle: "rgb(121, 121, 121)",
14
- textDisabled: "rgb(160, 160, 160)",
13
+ textMuted: "rgb(107, 113, 136)",
14
+ textSubtle: "rgb(117, 121, 129)",
15
+ textDisabled: "rgb(150, 152, 172)",
15
16
  textDecorativeLight: "rgb(168, 185, 212)",
16
- dividerSubtle: "rgba(0, 0, 0, 0.04)",
17
- divider: "rgba(0, 0, 0, 0.07)",
18
- dividerStrong: "rgba(0, 0, 0, 0.09)",
19
- primary: "rgb(132, 63, 255)",
17
+ dividerSubtle: "rgba(30, 50, 100, 0.04)",
18
+ divider: "rgba(30, 50, 100, 0.07)",
19
+ dividerStrong: "rgba(30, 50, 100, 0.09)",
20
+ primary: "rgb(103, 70, 255)",
20
21
  primaryLight: "rgb(147, 86, 255)",
22
+ primaryPastel: "rgba(234, 230, 255)",
21
23
  secondary: "rgb(0, 151, 117)",
22
24
  secondaryLight: "rgb(0, 160, 129)",
25
+ secondaryPastel: "rgb(205, 238, 231)",
23
26
  secondaryBright: "#0ab557",
24
27
  warning: "rgb(251, 211, 0)",
25
28
  neutralBackground: "rgb(222,223,232)",
26
- inputBackground: "rgb(240, 240, 242)",
27
- inputBackgroundLight: "rgb(243, 243, 245)",
29
+ inputBackground: "rgb(240, 242, 246)",
30
+ inputBackgroundLight: "rgb(243, 245, 249)",
28
31
  codeBackground: "rgb(250, 250, 250)",
29
32
  codeBackgroundLight: "rgb(250, 250, 250)",
30
33
  get codeBackgroundDark() {
@@ -52,6 +55,7 @@ export const colors = {
52
55
  editingBackground: "#fff",
53
56
  },
54
57
  canvas: {
58
+ // background: "white",
55
59
  background: "rgb(249,249,249)",
56
60
  get selectionStroke() {
57
61
  return colors.primary;
@@ -62,8 +66,8 @@ export const colors = {
62
66
  grid: "rgba(0,0,0,0.05)",
63
67
  },
64
68
  sidebar: {
65
- background: "rgb(252,252,252)",
66
- backgroundTransparent: "rgba(252,252,252,0.85)",
69
+ background: "rgb(255,255,255)",
70
+ backgroundTransparent: "rgba(255,255,255,0.85)",
67
71
  },
68
72
  popover: {
69
73
  background: "rgb(252,252,252)",
@@ -76,7 +80,7 @@ export const colors = {
76
80
  radioGroup: {
77
81
  background: "white",
78
82
  },
79
- icon: "rgb(139, 139, 139)",
83
+ icon: "rgb(129, 131, 165)",
80
84
  iconSelected: "rgb(220, 220, 220)",
81
85
  mask: "rgb(12,193,67)",
82
86
  imageOverlay:
@@ -122,41 +126,41 @@ export const textStyles = {
122
126
  heading1: {
123
127
  fontFamily: fonts.normal,
124
128
  fontSize: `${typeScale[2]}rem`,
125
- fontWeight: 500,
126
- lineHeight: "1.75",
129
+ fontWeight: 600,
130
+ lineHeight: "1.6",
127
131
  letterSpacing: "-0.025em",
128
132
  } as CSSObject,
129
133
  heading2: {
130
134
  fontFamily: fonts.normal,
131
135
  fontSize: `${typeScale[3]}rem`,
132
136
  fontWeight: 500,
133
- lineHeight: "1.75",
137
+ lineHeight: "1.5",
134
138
  letterSpacing: "-0.025em",
135
139
  } as CSSObject,
136
140
  heading3: {
137
141
  fontFamily: fonts.normal,
138
142
  fontSize: `${typeScale[4]}rem`,
139
- fontWeight: 500,
140
- lineHeight: "1.75",
143
+ fontWeight: 400,
144
+ lineHeight: "1.4",
141
145
  letterSpacing: "-0.025em",
142
146
  } as CSSObject,
143
147
  heading4: {
144
148
  fontFamily: fonts.normal,
145
149
  fontSize: `${typeScale[5]}rem`,
146
150
  fontWeight: 500,
147
- lineHeight: "1.75",
151
+ lineHeight: "1.4",
148
152
  } as CSSObject,
149
153
  heading5: {
150
154
  fontFamily: fonts.normal,
151
155
  fontSize: `${typeScale[6]}rem`,
152
156
  fontWeight: 500,
153
- lineHeight: "1.75",
157
+ lineHeight: "1.4",
154
158
  } as CSSObject,
155
159
  body: {
156
160
  fontFamily: fonts.normal,
157
161
  fontSize: `${typeScale[5]}rem`,
158
162
  fontWeight: 400,
159
- lineHeight: "1.75",
163
+ lineHeight: "1.4",
160
164
  } as CSSObject,
161
165
  small: {
162
166
  fontFamily: fonts.normal,