basefn 1.4.0 → 1.6.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.
Files changed (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/Basefn__Accordion.css +8 -7
  3. package/src/components/Basefn__Button.css +2 -3
  4. package/src/components/Basefn__Tabs.css +9 -6
  5. package/src/styles/Basefn__Theme.res +16 -2
  6. package/src/styles/Basefn__Theme.res.mjs +15 -1
  7. package/src/styles/variables.css +57 -38
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "basefn",
3
- "version": "1.4.0",
3
+ "version": "1.6.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/brnrdog/basefn.git"
package/src/components/Basefn__Accordion.css CHANGED
@@ -1,12 +1,13 @@
1
1
  .basefn-accordion {
2
2
  width: 100%;
3
- border: 1px solid #e5e7eb;
4
- border-radius: 0.5rem;
3
+ background: var(--basefn-bg-primary);
4
+ border: 1px solid var(--basefn-border-primary);
5
+ border-radius: var(--basefn-radius-lg);
5
6
  overflow: hidden;
6
7
  }
7
8
 
8
9
  .basefn-accordion__item {
9
- border-bottom: 1px solid #e5e7eb;
10
+ border-bottom: 1px solid var(--basefn-border-primary);
10
11
  }
11
12
 
12
13
  .basefn-accordion__item:last-child {
@@ -23,14 +24,14 @@
23
24
  border: none;
24
25
  font-size: 0.9375rem;
25
26
  font-weight: 500;
26
- color: #1f2937;
27
+ color: var(--basefn-text-primary);
27
28
  cursor: pointer;
28
29
  transition: background-color 0.2s;
29
30
  text-align: left;
30
31
  }
31
32
 
32
33
  .basefn-accordion__trigger:hover {
33
- background-color: #f9fafb;
34
+ background-color: var(--basefn-bg-secondary);
34
35
  }
35
36
 
36
37
  .basefn-accordion__trigger:disabled {
@@ -41,7 +42,7 @@
41
42
  .basefn-accordion__icon {
42
43
  font-size: 1.25rem;
43
44
  transition: transform 0.2s;
44
- color: #6b7280;
45
+ color: var(--basefn-text-tertiary);
45
46
  }
46
47
 
47
48
  .basefn-accordion__icon--open {
@@ -65,6 +66,6 @@
65
66
 
66
67
  .basefn-accordion__content-inner {
67
68
  padding: 0 1.25rem 1rem 1.25rem;
68
- color: #6b7280;
69
+ color: var(--basefn-text-secondary);
69
70
  line-height: 1.6;
70
71
  }
package/src/components/Basefn__Button.css CHANGED
@@ -1,4 +1,4 @@
1
- @import '../styles/variables.css';
1
+ @import "../styles/variables.css";
2
2
 
3
3
  .basefn-button {
4
4
  display: inline-flex;
@@ -11,7 +11,7 @@
11
11
  height: var(--basefn-button-height);
12
12
  padding: 0 var(--basefn-button-padding-x);
13
13
  border: var(--basefn-border-width) solid transparent;
14
- border-radius: var(--basefn-radius-lg);
14
+ border-radius: var(--basefn-radius-xl);
15
15
  cursor: pointer;
16
16
  transition: all var(--basefn-transition-fast);
17
17
  outline: none;
@@ -64,7 +64,6 @@
64
64
  background-color: transparent;
65
65
  border-color: transparent;
66
66
  border: 0;
67
- padding: 0;
68
67
  color: var(--basefn-text-tertiary);
69
68
  }
70
69
 
package/src/components/Basefn__Tabs.css CHANGED
@@ -1,10 +1,13 @@
1
1
  .basefn-tabs {
2
2
  width: 100%;
3
+ background: var(--basefn-bg-primary);
4
+ border-radius: var(--basefn-radius-lg);
5
+ padding: 1rem;
3
6
  }
4
7
 
5
8
  .basefn-tabs__list {
6
9
  display: flex;
7
- border-bottom: 2px solid #e5e7eb;
10
+ border-bottom: 2px solid var(--basefn-border-primary);
8
11
  gap: 0.5rem;
9
12
  margin-bottom: 1.5rem;
10
13
  }
@@ -17,20 +20,20 @@
17
20
  margin-bottom: -2px;
18
21
  font-size: 0.875rem;
19
22
  font-weight: 500;
20
- color: #6b7280;
23
+ color: var(--basefn-text-tertiary);
21
24
  cursor: pointer;
22
25
  transition: all 0.2s;
23
26
  white-space: nowrap;
24
27
  }
25
28
 
26
29
  .basefn-tabs__trigger:hover {
27
- color: #374151;
28
- background-color: #f9fafb;
30
+ color: var(--basefn-text-primary);
31
+ background-color: var(--basefn-bg-secondary);
29
32
  }
30
33
 
31
34
  .basefn-tabs__trigger--active {
32
- color: #3b82f6;
33
- border-bottom-color: #3b82f6;
35
+ color: var(--basefn-color-primary);
36
+ border-bottom-color: var(--basefn-color-primary);
34
37
  }
35
38
 
36
39
  .basefn-tabs__trigger:disabled {
package/src/styles/Basefn__Theme.res CHANGED
@@ -21,12 +21,26 @@ let stringToTheme = (str: string) => {
21
21
  }
22
22
  }
23
23
 
24
- // Apply theme to document
24
+ // Apply theme to document (disables transitions temporarily for instant switch)
25
25
  let applyTheme = (theme: theme) => {
26
26
  let themeValue = themeToString(theme)
27
27
 
28
28
  (
29
- %raw(`function(val) { document.documentElement.setAttribute('data-theme', val) }`): string => unit
29
+ %raw(`function(val) {
30
+ // Disable all transitions
31
+ document.documentElement.classList.add('no-transitions');
32
+
33
+ // Apply theme
34
+ document.documentElement.setAttribute('data-theme', val);
35
+
36
+ // Force reflow to ensure styles are applied
37
+ document.documentElement.offsetHeight;
38
+
39
+ // Re-enable transitions after a frame
40
+ requestAnimationFrame(() => {
41
+ document.documentElement.classList.remove('no-transitions');
42
+ });
43
+ }`): string => unit
30
44
  )(themeValue)
31
45
  }
32
46
 
package/src/styles/Basefn__Theme.res.mjs CHANGED
@@ -21,7 +21,21 @@ function stringToTheme(str) {
21
21
  }
22
22
 
23
23
  function applyTheme(theme) {
24
- ((function(val) { document.documentElement.setAttribute('data-theme', val) })(themeToString(theme)));
24
+ ((function(val) {
25
+ // Disable all transitions
26
+ document.documentElement.classList.add('no-transitions');
27
+
28
+ // Apply theme
29
+ document.documentElement.setAttribute('data-theme', val);
30
+
31
+ // Force reflow to ensure styles are applied
32
+ document.documentElement.offsetHeight;
33
+
34
+ // Re-enable transitions after a frame
35
+ requestAnimationFrame(() => {
36
+ document.documentElement.classList.remove('no-transitions');
37
+ });
38
+ })(themeToString(theme)));
25
39
  }
26
40
 
27
41
  function saveThemePreference(theme) {
package/src/styles/variables.css CHANGED
@@ -1,5 +1,4 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
2
-
1
+ @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
3
2
 
4
3
  :root {
5
4
  /* Color Palette - Neutral Theme */
@@ -31,14 +30,18 @@
31
30
  --font-mono: "Source Code", monospace;
32
31
 
33
32
  /* Typography */
34
- --basefn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
35
- --basefn-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
36
-
37
- --basefn-font-size-xs: 0.75rem; /* 12px */
38
- --basefn-font-size-sm: 0.875rem; /* 14px */
39
- --basefn-font-size-base: 1rem; /* 16px */
40
- --basefn-font-size-lg: 1.125rem; /* 18px */
41
- --basefn-font-size-xl: 1.25rem; /* 20px */
33
+ --basefn-font-family:
34
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
35
+ "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
36
+ --basefn-font-family-mono:
37
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
38
+ monospace;
39
+
40
+ --basefn-font-size-xs: 0.75rem; /* 12px */
41
+ --basefn-font-size-sm: 0.875rem; /* 14px */
42
+ --basefn-font-size-base: 1rem; /* 16px */
43
+ --basefn-font-size-lg: 1.125rem; /* 18px */
44
+ --basefn-font-size-xl: 1.25rem; /* 20px */
42
45
 
43
46
  --basefn-font-weight-normal: 400;
44
47
  --basefn-font-weight-medium: 500;
@@ -50,18 +53,18 @@
50
53
  --basefn-line-height-relaxed: 1.75;
51
54
 
52
55
  /* Spacing */
53
- --basefn-spacing-xs: 0.25rem; /* 4px */
54
- --basefn-spacing-sm: 0.5rem; /* 8px */
55
- --basefn-spacing-md: 0.75rem; /* 12px */
56
- --basefn-spacing-lg: 1rem; /* 16px */
57
- --basefn-spacing-xl: 1.5rem; /* 24px */
58
- --basefn-spacing-2xl: 2rem; /* 32px */
56
+ --basefn-spacing-xs: 0.25rem; /* 4px */
57
+ --basefn-spacing-sm: 0.5rem; /* 8px */
58
+ --basefn-spacing-md: 0.75rem; /* 12px */
59
+ --basefn-spacing-lg: 1rem; /* 16px */
60
+ --basefn-spacing-xl: 1.5rem; /* 24px */
61
+ --basefn-spacing-2xl: 2rem; /* 32px */
59
62
 
60
63
  /* Border Radius */
61
- --basefn-radius-sm: 0.25rem; /* 4px */
62
- --basefn-radius-md: 0.375rem; /* 6px */
63
- --basefn-radius-lg: 0.5rem; /* 8px */
64
- --basefn-radius-xl: 0.75rem; /* 12px */
64
+ --basefn-radius-sm: 0.25rem; /* 4px */
65
+ --basefn-radius-md: 0.375rem; /* 6px */
66
+ --basefn-radius-lg: 0.5rem; /* 8px */
67
+ --basefn-radius-xl: 0.75rem; /* 12px */
65
68
  --basefn-radius-full: 9999px;
66
69
 
67
70
  /* Border Width */
@@ -70,8 +73,10 @@
70
73
 
71
74
  /* Shadows */
72
75
  --basefn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
73
- --basefn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
74
- --basefn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
76
+ --basefn-shadow-md:
77
+ 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
78
+ --basefn-shadow-lg:
79
+ 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
75
80
 
76
81
  /* Focus Ring */
77
82
  --basefn-focus-ring-color: rgba(59, 130, 246, 0.5);
@@ -84,12 +89,12 @@
84
89
  --basefn-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
85
90
 
86
91
  /* Form-specific Variables */
87
- --basefn-form-input-height: 2.5rem; /* 40px */
88
- --basefn-form-input-height-sm: 2rem; /* 32px */
89
- --basefn-form-input-height-lg: 3rem; /* 48px */
92
+ --basefn-form-input-height: 2.5rem; /* 40px */
93
+ --basefn-form-input-height-sm: 2rem; /* 32px */
94
+ --basefn-form-input-height-lg: 3rem; /* 48px */
90
95
 
91
- --basefn-form-input-padding-x: 0.75rem; /* 12px */
92
- --basefn-form-input-padding-y: 0.5rem; /* 8px */
96
+ --basefn-form-input-padding-x: 0.75rem; /* 12px */
97
+ --basefn-form-input-padding-y: 0.5rem; /* 8px */
93
98
 
94
99
  --basefn-form-input-bg: #ffffff;
95
100
  --basefn-form-input-border: var(--basefn-color-neutral-300);
@@ -102,13 +107,13 @@
102
107
  --basefn-form-input-disabled-text: var(--basefn-color-neutral-500);
103
108
 
104
109
  /* Button Variables */
105
- --basefn-button-height: 2.5rem; /* 40px */
106
- --basefn-button-height-sm: 2rem; /* 32px */
107
- --basefn-button-height-lg: 3rem; /* 48px */
110
+ --basefn-button-height: 2.5rem; /* 40px */
111
+ --basefn-button-height-sm: 2rem; /* 32px */
112
+ --basefn-button-height-lg: 3rem; /* 48px */
108
113
 
109
- --basefn-button-padding-x: 1rem; /* 16px */
110
- --basefn-button-padding-x-sm: 0.75rem; /* 12px */
111
- --basefn-button-padding-x-lg: 1.5rem; /* 24px */
114
+ --basefn-button-padding-x: 1.5rem; /* 16px */
115
+ --basefn-button-padding-x-sm: 0.75rem; /* 12px */
116
+ --basefn-button-padding-x-lg: 1.5rem; /* 24px */
112
117
 
113
118
  /* Semantic Color Tokens - Light Theme */
114
119
  /* Backgrounds */
@@ -117,7 +122,6 @@
117
122
  --basefn-bg-tertiary: #f3f4f6;
118
123
  --basefn-bg-primary-aa: #eff6ff;
119
124
 
120
-
121
125
  /* Text colors */
122
126
  --basefn-text-primary: #111827;
123
127
  --basefn-text-secondary: #4b5563;
@@ -145,7 +149,11 @@
145
149
 
146
150
  /* Dark Theme */
147
151
  [data-theme="dark"] {
148
-
152
+ /* Secondary button - visible in dark mode */
153
+ --basefn-color-secondary: #475569;
154
+ --basefn-color-secondary-hover: #64748b;
155
+ --basefn-color-secondary-active: #334155;
156
+
149
157
  /* Backgrounds - Slate palette */
150
158
  --basefn-bg-primary: #0f172a;
151
159
  --basefn-bg-secondary: #131c2f;
@@ -178,8 +186,10 @@
178
186
 
179
187
  /* Shadows - darker for dark mode */
180
188
  --basefn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
181
- --basefn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
182
- --basefn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
189
+ --basefn-shadow-md:
190
+ 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
191
+ --basefn-shadow-lg:
192
+ 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
183
193
 
184
194
  /* Alert semantic colors - Dark theme */
185
195
  --basefn-alert-info-bg: #1e3a5f;
@@ -195,5 +205,14 @@
195
205
  /* Base reset for form elements */
196
206
  * {
197
207
  box-sizing: border-box;
198
- font-family: 'Source Sans', sans-serif;
208
+ font-family: "Source Sans", sans-serif;
209
+ }
210
+
211
+ /* Disable all transitions during theme switch */
212
+ .no-transitions,
213
+ .no-transitions *,
214
+ .no-transitions *::before,
215
+ .no-transitions *::after {
216
+ transition: none !important;
217
+ animation: none !important;
199
218
  }