@sublimee/surfaces 0.1.1 → 0.1.2

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 +22 -0
  2. package/dist/surface.css +23 -11
  3. package/package.json +2 -2
  4. package/src/surface.css +23 -11
package/README.md CHANGED
@@ -70,6 +70,28 @@ The `glass` variant creates a frosted glass effect using `backdrop-filter`. It's
70
70
 
71
71
  Browser support: Glass uses `backdrop-filter` which is supported in all modern browsers. In unsupported browsers, the surface will fall back to a solid semi-transparent background.
72
72
 
73
+ #### Glass Dark Mode Behavior
74
+
75
+ The glass surface automatically adapts its background color based on the theme:
76
+
77
+ | Mode | Background | Use Case |
78
+ |------|------------|----------|
79
+ | **Light** | White translucent (`--sublime-color-overlay-light`) | Dark text on light backgrounds |
80
+ | **Dark** | Black translucent (`--sublime-color-overlay-dark`) | Light text on dark backgrounds |
81
+
82
+ This ensures the glass effect works correctly in both modes. In light mode, the white overlay provides a frosted look that darkens text for readability. In dark mode, the black overlay provides depth while keeping light text legible.
83
+
84
+ ```tsx
85
+ // Automatic adaptation - no configuration needed
86
+ <Surface variant="glass">
87
+ <p>This text is readable on any background</p>
88
+ </Surface>
89
+ ```
90
+
91
+ The glass effect uses these semantic tokens:
92
+ - `--sublime-color-overlay-light`: `rgb(255 255 255 / 0.8)` in light mode
93
+ - `--sublime-color-overlay-dark`: `rgb(0 0 0 / 0.5)` in dark mode
94
+
73
95
  ### Glass Utility Class
74
96
 
75
97
  For simple use cases, apply the glass effect directly with a CSS class:
package/dist/surface.css CHANGED
@@ -230,32 +230,44 @@
230
230
  *
231
231
  * Note: The Surface component applies additional padding, radius, and layout.
232
232
  * This utility is the raw glass styling only.
233
+ *
234
+ * Light mode: white translucent overlay (readable on light backgrounds)
235
+ * Dark mode: black translucent overlay (readable on dark backgrounds)
233
236
  */
234
237
  .sublime-glassed,
235
238
  .sublime-surface--glass {
236
- background: rgba(255, 255, 255, 0.11);
239
+ /* Light mode: white glass for dark text on light backgrounds */
240
+ background: var(--sublime-color-overlay-light, rgba(255, 255, 255, 0.8));
237
241
  border-radius: 16px;
238
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
239
- backdrop-filter: blur(8.6px);
240
- -webkit-backdrop-filter: blur(8.6px);
241
- border: 1px solid rgba(255, 255, 255, 0.11);
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));
246
+ transition: var(--sublime-transition-button);
247
+ }
248
+
249
+ /* Hover state */
250
+ .sublime-glassed:hover,
251
+ .sublime-surface--glass:hover {
252
+ box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
242
253
  }
243
254
 
255
+ /* Dark mode: switch to dark translucent overlay for light text */
244
256
  .dark .sublime-glassed,
245
257
  [data-theme="dark"] .sublime-glassed,
246
258
  .dark .sublime-surface--glass,
247
259
  [data-theme="dark"] .sublime-surface--glass {
248
- background: rgba(255, 255, 255, 0.1);
249
- border-color: rgba(255, 255, 255, 0.2);
250
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
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));
251
263
  }
252
264
 
253
265
  /* System preference dark mode */
254
266
  @media (prefers-color-scheme: dark) {
255
267
  :root:not([data-theme="light"]):not(.light) .sublime-glassed,
256
268
  :root:not([data-theme="light"]):not(.light) .sublime-surface--glass {
257
- background: rgba(255, 255, 255, 0.1);
258
- border-color: rgba(255, 255, 255, 0.2);
259
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
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));
260
272
  }
261
273
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sublimee/surfaces",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
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.16"
55
+ "@sublimee/tokens": "0.1.17"
56
56
  },
57
57
  "peerDependenciesMeta": {
58
58
  "@sublimee/tokens": {
package/src/surface.css CHANGED
@@ -230,32 +230,44 @@
230
230
  *
231
231
  * Note: The Surface component applies additional padding, radius, and layout.
232
232
  * This utility is the raw glass styling only.
233
+ *
234
+ * Light mode: white translucent overlay (readable on light backgrounds)
235
+ * Dark mode: black translucent overlay (readable on dark backgrounds)
233
236
  */
234
237
  .sublime-glassed,
235
238
  .sublime-surface--glass {
236
- background: rgba(255, 255, 255, 0.11);
239
+ /* Light mode: white glass for dark text on light backgrounds */
240
+ background: var(--sublime-color-overlay-light, rgba(255, 255, 255, 0.8));
237
241
  border-radius: 16px;
238
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
239
- backdrop-filter: blur(8.6px);
240
- -webkit-backdrop-filter: blur(8.6px);
241
- border: 1px solid rgba(255, 255, 255, 0.11);
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));
246
+ transition: var(--sublime-transition-button);
247
+ }
248
+
249
+ /* Hover state */
250
+ .sublime-glassed:hover,
251
+ .sublime-surface--glass:hover {
252
+ box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
242
253
  }
243
254
 
255
+ /* Dark mode: switch to dark translucent overlay for light text */
244
256
  .dark .sublime-glassed,
245
257
  [data-theme="dark"] .sublime-glassed,
246
258
  .dark .sublime-surface--glass,
247
259
  [data-theme="dark"] .sublime-surface--glass {
248
- background: rgba(255, 255, 255, 0.1);
249
- border-color: rgba(255, 255, 255, 0.2);
250
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
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));
251
263
  }
252
264
 
253
265
  /* System preference dark mode */
254
266
  @media (prefers-color-scheme: dark) {
255
267
  :root:not([data-theme="light"]):not(.light) .sublime-glassed,
256
268
  :root:not([data-theme="light"]):not(.light) .sublime-surface--glass {
257
- background: rgba(255, 255, 255, 0.1);
258
- border-color: rgba(255, 255, 255, 0.2);
259
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
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));
260
272
  }
261
273
  }