@sublimee/surfaces 0.1.2 → 0.1.3

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 (4) hide show
  1. package/README.md +66 -0
  2. package/dist/surface.css +41 -11
  3. package/package.json +2 -2
  4. package/src/surface.css +41 -11
package/README.md CHANGED
@@ -110,6 +110,72 @@ This is the same glass styling as the Surface component, but without the additio
110
110
 
111
111
  Both `sublime-glassed` and `variant="glass"` respect dark mode automatically.
112
112
 
113
+ #### Glass Configuration API
114
+
115
+ Customize the glass effect using CSS custom properties:
116
+
117
+ | Property | Default | Description |
118
+ |----------|---------|-------------|
119
+ | `--sublime-glass-blur` | `12px` | Blur intensity (higher = more frosted) |
120
+ | `--sublime-glass-bg` | Semantic overlay* | Background color/opacity |
121
+ | `--sublime-glass-border` | Semantic border* | Border color |
122
+ | `--sublime-glass-shadow` | Semantic shadow* | Box shadow |
123
+
124
+ \* Uses `--sublime-color-overlay-light/dark`, `--sublime-color-border-*`, and `--sublime-shadow-*` tokens based on theme.
125
+
126
+ **Adjust blur and opacity:**
127
+ ```tsx
128
+ // More opaque, heavier blur for busy backgrounds
129
+ <Surface
130
+ variant="glass"
131
+ style={{
132
+ '--sublime-glass-blur': '20px',
133
+ '--sublime-glass-bg': 'rgba(255, 255, 255, 0.95)'
134
+ }}
135
+ >
136
+ Content
137
+ </Surface>
138
+
139
+ // Or with utility class
140
+ <div class="sublime-glassed" style="--sublime-glass-blur: 20px; --sublime-glass-bg: rgba(255,255,255,0.95)">
141
+ Content
142
+ </div>
143
+ ```
144
+
145
+ **Custom color tint:**
146
+ ```tsx
147
+ // Blue-tinted glass
148
+ <Surface
149
+ variant="glass"
150
+ style={{ '--sublime-glass-bg': 'rgba(59, 130, 246, 0.3)' }}
151
+ >
152
+ Blue glass
153
+ </Surface>
154
+ ```
155
+
156
+ **Darker modifier for very dark backgrounds:**
157
+
158
+ When the default dark mode glass is too subtle on near-black backgrounds, use the `sublime-glassed--darker` modifier:
159
+
160
+ ```html
161
+ <!-- Default may be invisible on black -->
162
+ <div class="sublime-glassed">Default</div>
163
+
164
+ <!-- Lighter tint for visibility -->
165
+ <div class="sublime-glassed sublime-glassed--darker">More visible</div>
166
+ ```
167
+
168
+ This switches to `rgba(255, 255, 255, 0.15)` background with `rgba(255, 255, 255, 0.25)` border—subtle but visible on pure black.
169
+
170
+ **Override per-element:**
171
+ ```css
172
+ .my-glass-button {
173
+ /* Always use light glass, even in dark mode */
174
+ --sublime-glass-bg: rgba(255, 255, 255, 0.9);
175
+ --sublime-glass-border: rgba(255, 255, 255, 0.3);
176
+ }
177
+ ```
178
+
113
179
  ## Theming
114
180
 
115
181
  For full theming support including dark mode, also import the tokens:
package/dist/surface.css CHANGED
@@ -228,6 +228,22 @@
228
228
  * Usage: <div class="sublime-glassed">Content</div>
229
229
  * Or with Surface: <Surface variant="glass">Content</Surface>
230
230
  *
231
+ * Configuration API (CSS custom properties):
232
+ * --sublime-glass-bg: Background color/opacity (default: semantic overlay)
233
+ * --sublime-glass-blur: Blur amount (default: 12px)
234
+ * --sublime-glass-border: Border color (default: semantic border)
235
+ * --sublime-glass-shadow: Box shadow (default: semantic shadow)
236
+ *
237
+ * Examples:
238
+ * // Increase blur and opacity
239
+ * <div class="sublime-glassed" style="--sublime-glass-blur: 20px; --sublime-glass-bg: rgba(255,255,255,0.95)">
240
+ *
241
+ * // Custom color tint
242
+ * <div class="sublime-glassed" style="--sublime-glass-bg: rgba(59, 130, 246, 0.3)">
243
+ *
244
+ * // Darker in dark mode
245
+ * <div class="sublime-glassed dark-glass-darker">
246
+ *
231
247
  * Note: The Surface component applies additional padding, radius, and layout.
232
248
  * This utility is the raw glass styling only.
233
249
  *
@@ -236,13 +252,19 @@
236
252
  */
237
253
  .sublime-glassed,
238
254
  .sublime-surface--glass {
255
+ /* Configurable properties - override these to customize */
256
+ --sublime-glass-blur: 12px;
257
+ --sublime-glass-bg: var(--sublime-color-overlay-light, rgba(255, 255, 255, 0.8));
258
+ --sublime-glass-border: var(--sublime-color-border-primary, rgba(0, 0, 0, 0.1));
259
+ --sublime-glass-shadow: var(--sublime-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
260
+
239
261
  /* Light mode: white glass for dark text on light backgrounds */
240
- background: var(--sublime-color-overlay-light, rgba(255, 255, 255, 0.8));
262
+ background: var(--sublime-glass-bg);
241
263
  border-radius: 16px;
242
- box-shadow: var(--sublime-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
243
- backdrop-filter: blur(12px);
244
- -webkit-backdrop-filter: blur(12px);
245
- border: 1px solid var(--sublime-color-border-primary, rgba(0, 0, 0, 0.1));
264
+ box-shadow: var(--sublime-glass-shadow);
265
+ backdrop-filter: blur(var(--sublime-glass-blur));
266
+ -webkit-backdrop-filter: blur(var(--sublime-glass-blur));
267
+ border: 1px solid var(--sublime-glass-border);
246
268
  transition: var(--sublime-transition-button);
247
269
  }
248
270
 
@@ -257,17 +279,25 @@
257
279
  [data-theme="dark"] .sublime-glassed,
258
280
  .dark .sublime-surface--glass,
259
281
  [data-theme="dark"] .sublime-surface--glass {
260
- background: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
261
- border-color: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
262
- box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
282
+ --sublime-glass-bg: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
283
+ --sublime-glass-border: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
284
+ --sublime-glass-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
285
+ }
286
+
287
+ /* Darker glass modifier - for very dark backgrounds where default isn't visible */
288
+ .dark .sublime-glassed--darker,
289
+ [data-theme="dark"] .sublime-glassed--darker,
290
+ .sublime-glassed.sublime-glassed--darker {
291
+ --sublime-glass-bg: rgba(255, 255, 255, 0.15);
292
+ --sublime-glass-border: rgba(255, 255, 255, 0.25);
263
293
  }
264
294
 
265
295
  /* System preference dark mode */
266
296
  @media (prefers-color-scheme: dark) {
267
297
  :root:not([data-theme="light"]):not(.light) .sublime-glassed,
268
298
  :root:not([data-theme="light"]):not(.light) .sublime-surface--glass {
269
- background: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
270
- border-color: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
271
- box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
299
+ --sublime-glass-bg: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
300
+ --sublime-glass-border: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
301
+ --sublime-glass-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
272
302
  }
273
303
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sublimee/surfaces",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Surface container components for Sublime",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -52,7 +52,7 @@
52
52
  "peerDependencies": {
53
53
  "react": "^19.0.0",
54
54
  "react-dom": "^19.0.0",
55
- "@sublimee/tokens": "0.1.17"
55
+ "@sublimee/tokens": "0.1.18"
56
56
  },
57
57
  "peerDependenciesMeta": {
58
58
  "@sublimee/tokens": {
package/src/surface.css CHANGED
@@ -228,6 +228,22 @@
228
228
  * Usage: <div class="sublime-glassed">Content</div>
229
229
  * Or with Surface: <Surface variant="glass">Content</Surface>
230
230
  *
231
+ * Configuration API (CSS custom properties):
232
+ * --sublime-glass-bg: Background color/opacity (default: semantic overlay)
233
+ * --sublime-glass-blur: Blur amount (default: 12px)
234
+ * --sublime-glass-border: Border color (default: semantic border)
235
+ * --sublime-glass-shadow: Box shadow (default: semantic shadow)
236
+ *
237
+ * Examples:
238
+ * // Increase blur and opacity
239
+ * <div class="sublime-glassed" style="--sublime-glass-blur: 20px; --sublime-glass-bg: rgba(255,255,255,0.95)">
240
+ *
241
+ * // Custom color tint
242
+ * <div class="sublime-glassed" style="--sublime-glass-bg: rgba(59, 130, 246, 0.3)">
243
+ *
244
+ * // Darker in dark mode
245
+ * <div class="sublime-glassed dark-glass-darker">
246
+ *
231
247
  * Note: The Surface component applies additional padding, radius, and layout.
232
248
  * This utility is the raw glass styling only.
233
249
  *
@@ -236,13 +252,19 @@
236
252
  */
237
253
  .sublime-glassed,
238
254
  .sublime-surface--glass {
255
+ /* Configurable properties - override these to customize */
256
+ --sublime-glass-blur: 12px;
257
+ --sublime-glass-bg: var(--sublime-color-overlay-light, rgba(255, 255, 255, 0.8));
258
+ --sublime-glass-border: var(--sublime-color-border-primary, rgba(0, 0, 0, 0.1));
259
+ --sublime-glass-shadow: var(--sublime-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
260
+
239
261
  /* Light mode: white glass for dark text on light backgrounds */
240
- background: var(--sublime-color-overlay-light, rgba(255, 255, 255, 0.8));
262
+ background: var(--sublime-glass-bg);
241
263
  border-radius: 16px;
242
- box-shadow: var(--sublime-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
243
- backdrop-filter: blur(12px);
244
- -webkit-backdrop-filter: blur(12px);
245
- border: 1px solid var(--sublime-color-border-primary, rgba(0, 0, 0, 0.1));
264
+ box-shadow: var(--sublime-glass-shadow);
265
+ backdrop-filter: blur(var(--sublime-glass-blur));
266
+ -webkit-backdrop-filter: blur(var(--sublime-glass-blur));
267
+ border: 1px solid var(--sublime-glass-border);
246
268
  transition: var(--sublime-transition-button);
247
269
  }
248
270
 
@@ -257,17 +279,25 @@
257
279
  [data-theme="dark"] .sublime-glassed,
258
280
  .dark .sublime-surface--glass,
259
281
  [data-theme="dark"] .sublime-surface--glass {
260
- background: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
261
- border-color: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
262
- box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
282
+ --sublime-glass-bg: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
283
+ --sublime-glass-border: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
284
+ --sublime-glass-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
285
+ }
286
+
287
+ /* Darker glass modifier - for very dark backgrounds where default isn't visible */
288
+ .dark .sublime-glassed--darker,
289
+ [data-theme="dark"] .sublime-glassed--darker,
290
+ .sublime-glassed.sublime-glassed--darker {
291
+ --sublime-glass-bg: rgba(255, 255, 255, 0.15);
292
+ --sublime-glass-border: rgba(255, 255, 255, 0.25);
263
293
  }
264
294
 
265
295
  /* System preference dark mode */
266
296
  @media (prefers-color-scheme: dark) {
267
297
  :root:not([data-theme="light"]):not(.light) .sublime-glassed,
268
298
  :root:not([data-theme="light"]):not(.light) .sublime-surface--glass {
269
- background: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
270
- border-color: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
271
- box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
299
+ --sublime-glass-bg: var(--sublime-color-overlay-dark, rgba(0, 0, 0, 0.5));
300
+ --sublime-glass-border: var(--sublime-color-border-surface, rgba(255, 255, 255, 0.2));
301
+ --sublime-glass-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.5));
272
302
  }
273
303
  }