@ryanhelsing/ry-ui 1.0.13 → 1.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 (16) hide show
  1. package/README.md +1 -0
  2. package/dist/components/ry-heading.d.ts +19 -0
  3. package/dist/components/ry-heading.d.ts.map +1 -0
  4. package/dist/components/ry-theme-panel.d.ts +1 -1
  5. package/dist/components/ry-theme-panel.d.ts.map +1 -1
  6. package/dist/core/ry-transform.d.ts.map +1 -1
  7. package/dist/css/ry-structure.css +40 -3
  8. package/dist/css/ry-theme.css +66 -1
  9. package/dist/css/ry-tokens.css +165 -100
  10. package/dist/css/ry-ui.css +271 -104
  11. package/dist/ry-ui.d.ts +1 -0
  12. package/dist/ry-ui.d.ts.map +1 -1
  13. package/dist/ry-ui.js +112 -92
  14. package/dist/ry-ui.js.map +1 -1
  15. package/dist/themes/ocean.css +22 -22
  16. package/package.json +3 -1
package/dist/themes/ocean.css CHANGED
@@ -6,39 +6,39 @@
6
6
 
7
7
  [data-ry-theme="ocean"] {
8
8
  /* Primary - ocean blues */
9
- --ry-color-primary: oklch(0.685 0.148 237.3);
10
- --ry-color-primary-hover: oklch(0.588 0.139 242);
11
- --ry-color-primary-active: oklch(0.5 0.119 242.8);
9
+ --ry-color-primary: light-dark(oklch(0.685 0.148 237.3), oklch(0.835 0.148 237.3));
10
+ --ry-color-primary-hover: light-dark(oklch(0.588 0.139 242), oklch(0.738 0.139 242.0));
11
+ --ry-color-primary-active: light-dark(oklch(0.5 0.119 242.8), oklch(0.650 0.119 242.8));
12
12
 
13
13
  /* Secondary - teal */
14
- --ry-color-secondary: oklch(0.715 0.126 215.2);
15
- --ry-color-secondary-hover: oklch(0.609 0.111 221.7);
16
- --ry-color-secondary-active: oklch(0.52 0.094 223.1);
14
+ --ry-color-secondary: light-dark(oklch(0.715 0.126 215.2), oklch(0.286 0.063 215.2));
15
+ --ry-color-secondary-hover: light-dark(oklch(0.609 0.111 221.7), oklch(0.317 0.056 221.7));
16
+ --ry-color-secondary-active: light-dark(oklch(0.52 0.094 223.1), oklch(0.344 0.047 223.1));
17
17
 
18
18
  /* Text */
19
- --ry-color-text: oklch(0.391 0.085 240.9);
20
- --ry-color-text-muted: oklch(0.554 0.041 257.4);
21
- --ry-color-text-inverse: oklch(1 0 0);
19
+ --ry-color-text: light-dark(oklch(0.391 0.085 240.9), oklch(0.911 0.085 240.9));
20
+ --ry-color-text-muted: light-dark(oklch(0.554 0.041 257.4), oklch(0.684 0.029 257.4));
21
+ --ry-color-text-inverse: light-dark(oklch(1 0 0), oklch(0.16 0.04 240));
22
22
 
23
- /* Background - light blues */
24
- --ry-color-bg: oklch(0.977 0.013 236.8);
25
- --ry-color-bg-subtle: oklch(0.951 0.025 236.9);
26
- --ry-color-bg-muted: oklch(0.901 0.056 230.9);
23
+ /* Background - light blues / dark deep blues */
24
+ --ry-color-bg: light-dark(oklch(0.977 0.013 236.8), oklch(0.16 0.04 240));
25
+ --ry-color-bg-subtle: light-dark(oklch(0.951 0.025 236.9), oklch(0.19 0.05 238));
26
+ --ry-color-bg-muted: light-dark(oklch(0.901 0.056 230.9), oklch(0.23 0.06 235));
27
27
 
28
28
  /* Border */
29
- --ry-color-border: oklch(0.828 0.101 230.3);
30
- --ry-color-border-strong: oklch(0.753 0.139 232.7);
29
+ --ry-color-border: light-dark(oklch(0.828 0.101 230.3), oklch(0.203 0.061 230.3));
30
+ --ry-color-border-strong: light-dark(oklch(0.753 0.139 232.7), oklch(0.248 0.083 232.7));
31
31
 
32
32
  /* Shadows with blue tint */
33
- --ry-shadow-sm: 0 1px 2px 0 oklch(0.685 0.148 237.3 / 0.1);
34
- --ry-shadow-md: 0 4px 6px -1px oklch(0.685 0.148 237.3 / 0.15);
35
- --ry-shadow-lg: 0 10px 15px -3px oklch(0.685 0.148 237.3 / 0.15);
36
- --ry-shadow-xl: 0 20px 25px -5px oklch(0.685 0.148 237.3 / 0.2);
33
+ --ry-shadow-sm: light-dark(0 1px 2px 0 oklch(0.685 0.148 237.3 / 0.1), 0 1px 2px 0 oklch(0.352 0.148 237.3 / 0.1));
34
+ --ry-shadow-md: light-dark(0 4px 6px -1px oklch(0.685 0.148 237.3 / 0.15), 0 4px 6px -1px oklch(0.352 0.148 237.3 / 0.15));
35
+ --ry-shadow-lg: light-dark(0 10px 15px -3px oklch(0.685 0.148 237.3 / 0.15), 0 10px 15px -3px oklch(0.352 0.148 237.3 / 0.15));
36
+ --ry-shadow-xl: light-dark(0 20px 25px -5px oklch(0.685 0.148 237.3 / 0.2), 0 20px 25px -5px oklch(0.352 0.148 237.3 / 0.2));
37
37
 
38
38
  /* Focus */
39
- --ry-focus-ring: 0 0 0 3px oklch(0.685 0.148 237.3 / 0.5);
39
+ --ry-focus-ring: light-dark(0 0 0 3px oklch(0.685 0.148 237.3 / 0.5), 0 0 0 3px oklch(0.352 0.148 237.3 / 0.5));
40
40
 
41
41
  /* Alerts */
42
- --ry-color-info-bg: oklch(0.951 0.025 236.9);
43
- --ry-color-info-text: oklch(0.5 0.119 242.8);
42
+ --ry-color-info-bg: light-dark(oklch(0.951 0.025 236.9), oklch(0.175 0.010 236.9));
43
+ --ry-color-info-text: light-dark(oklch(0.5 0.119 242.8), oklch(0.900 0.119 242.8));
44
44
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ryanhelsing/ry-ui",
3
- "version": "1.0.13",
3
+ "version": "1.0.14",
4
4
  "description": "Framework-agnostic, Light DOM web components. CSS is the source of truth.",
5
5
  "type": "module",
6
6
  "main": "./dist/ry-ui.js",
@@ -29,11 +29,13 @@
29
29
  "build:css": "mkdir -p dist/css && node -e \"const fs=require('fs'); const files=['src/css/ry-tokens.css','src/css/ry-structure.css','src/css/ry-theme.css']; const out=files.map(f=>fs.readFileSync(f,'utf8')).join('\\n'); fs.writeFileSync('dist/css/ry-ui.css',out);\" && cp src/css/ry-tokens.css src/css/ry-structure.css src/css/ry-theme.css dist/css/ && mkdir -p dist/themes && cp src/themes/*.css dist/themes/",
30
30
  "preview": "vite preview",
31
31
  "typecheck": "tsc --noEmit",
32
+ "darkify": "node scripts/theme-darkify.mjs",
32
33
  "prepack": "cp README.md .readme-backup && cp CDN_README.md README.md",
33
34
  "postpack": "mv .readme-backup README.md",
34
35
  "release": "npm run build && git add -A && git diff-index --quiet HEAD || git commit -m 'new build' && npm version patch && npm publish --access public"
35
36
  },
36
37
  "devDependencies": {
38
+ "playwright": "^1.58.2",
37
39
  "typescript": "^5.7.2",
38
40
  "vite": "^6.0.7",
39
41
  "vite-plugin-dts": "^4.4.0"