opui-css 3.1.1 → 3.2.1

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 (9) hide show
  1. package/README.md +6 -0
  2. package/dist/theme-one.css +22 -7
  3. package/dist/theme-two.css +18 -5
  4. package/package.json +35 -4
  5. package/src/themes/theme-one/components/button.css +19 -5
  6. package/src/themes/theme-one/components/list.css +3 -2
  7. package/src/themes/theme-two/components/button.css +15 -3
  8. package/src/themes/theme-two/components/list.css +3 -2
  9. package/dist/op.css +0 -72
package/README.md CHANGED
@@ -43,3 +43,9 @@ pnpm clean
43
43
  ### Theme Building
44
44
 
45
45
  The build system automatically processes all themes in the `src/themes/` folder out to `/dist`.
46
+
47
+ ## Documentation
48
+
49
+ ```
50
+ pnpm docs:dev
51
+ ```
package/dist/theme-one.css CHANGED
@@ -531,9 +531,12 @@
531
531
  }
532
532
 
533
533
  @media (prefers-reduced-motion: no-preference) {
534
- transition: background-color 0.2s var(--ease-out-3),
535
- box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
536
- color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
534
+ transition:
535
+ background-color 0.2s var(--ease-out-3),
536
+ box-shadow 0.2s var(--ease-out-3),
537
+ border-color 0.2s var(--ease-out-3),
538
+ color 0.2s var(--ease-out-3),
539
+ outline-offset 0.05s var(--ease-1);
537
540
 
538
541
  /* Ripple effect */
539
542
  background-position: center;
@@ -589,6 +592,15 @@
589
592
  }
590
593
  }
591
594
 
595
+ /* Keyboard input */
596
+ :is(kbd) {
597
+ background-color: inherit;
598
+ border-color: currentColor;
599
+ color: inherit;
600
+ font-size: 0.85em;
601
+ line-height: 1.2;
602
+ }
603
+
592
604
  /* Sizes */
593
605
  &.small {
594
606
  --_min-height: 1.875rem;
@@ -704,8 +716,10 @@
704
716
  );
705
717
  --_text-color: var(--color-8);
706
718
 
707
- box-shadow: 0px 3px 1px -2px oklch(0 0 0 / 20%),
708
- 0px 2px 2px 0px oklch(0 0 0 / 14%), 0px 1px 5px 0px oklch(0 0 0 / 12%);
719
+ box-shadow:
720
+ 0px 3px 1px -2px oklch(0 0 0 / 20%),
721
+ 0px 2px 2px 0px oklch(0 0 0 / 14%),
722
+ 0px 1px 5px 0px oklch(0 0 0 / 12%);
709
723
 
710
724
  &:where(:not([disabled])) {
711
725
  &:where(:not(:active):hover) {
@@ -2668,6 +2682,7 @@ Lists meant to be used stand-alone or as part of Select elements
2668
2682
  */
2669
2683
  :where(.list) {
2670
2684
  --_bg-color: light-dark(var(--gray-1), var(--gray-15));
2685
+ --_bg-color-hover: light-dark(var(--gray-2), var(--gray-14));
2671
2686
 
2672
2687
  background-color: var(--_bg-color);
2673
2688
  list-style: none;
@@ -2806,7 +2821,7 @@ Lists meant to be used stand-alone or as part of Select elements
2806
2821
  z-index: 0;
2807
2822
 
2808
2823
  &:hover {
2809
- background-color: light-dark(var(--gray-2), var(--gray-14));
2824
+ background-color: var(--_bg-color-hover);
2810
2825
  }
2811
2826
 
2812
2827
  &:checked {
@@ -2846,7 +2861,7 @@ Lists meant to be used stand-alone or as part of Select elements
2846
2861
  }
2847
2862
 
2848
2863
  &:hover {
2849
- background-color: light-dark(var(--gray-2), var(--gray-14));
2864
+ background-color: var(--_bg-color-hover);
2850
2865
  }
2851
2866
 
2852
2867
  /*** Remove ripple effect when trailing button is clicked */
package/dist/theme-two.css CHANGED
@@ -526,9 +526,12 @@
526
526
  }
527
527
 
528
528
  @media (prefers-reduced-motion: no-preference) {
529
- transition: background-color 0.2s var(--ease-out-3),
530
- box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
531
- color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
529
+ transition:
530
+ background-color 0.2s var(--ease-out-3),
531
+ box-shadow 0.2s var(--ease-out-3),
532
+ border-color 0.2s var(--ease-out-3),
533
+ color 0.2s var(--ease-out-3),
534
+ outline-offset 0.05s var(--ease-1);
532
535
 
533
536
  /* Ripple effect */
534
537
  background-position: center;
@@ -584,6 +587,15 @@
584
587
  }
585
588
  }
586
589
 
590
+ /* Keyboard input */
591
+ :is(kbd) {
592
+ background-color: inherit;
593
+ border-color: currentColor;
594
+ color: inherit;
595
+ font-size: 0.85em;
596
+ line-height: 1.2;
597
+ }
598
+
587
599
  /* Sizes */
588
600
  &.small {
589
601
  --_min-height: 1.875rem;
@@ -2601,6 +2613,7 @@ Lists meant to be used stand-alone or as part of Select elements
2601
2613
  */
2602
2614
  :where(.list) {
2603
2615
  --_bg-color: light-dark(var(--gray-1), var(--gray-15));
2616
+ --_bg-color-hover: light-dark(var(--gray-2), var(--gray-14));
2604
2617
 
2605
2618
  background-color: var(--_bg-color);
2606
2619
  list-style: none;
@@ -2739,7 +2752,7 @@ Lists meant to be used stand-alone or as part of Select elements
2739
2752
  z-index: 0;
2740
2753
 
2741
2754
  &:hover {
2742
- background-color: light-dark(var(--gray-2), var(--gray-14));
2755
+ background-color: var(--_bg-color-hover);
2743
2756
  }
2744
2757
 
2745
2758
  &:checked {
@@ -2779,7 +2792,7 @@ Lists meant to be used stand-alone or as part of Select elements
2779
2792
  }
2780
2793
 
2781
2794
  &:hover {
2782
- background-color: light-dark(var(--gray-2), var(--gray-14));
2795
+ background-color: var(--_bg-color-hover);
2783
2796
  }
2784
2797
 
2785
2798
  /*** Remove ripple effect when trailing button is clicked */
package/package.json CHANGED
@@ -1,8 +1,9 @@
1
1
  {
2
2
  "name": "opui-css",
3
- "version": "3.1.1",
3
+ "version": "3.2.1",
4
4
  "private": false,
5
5
  "license": "MIT",
6
+ "type": "module",
6
7
  "files": [
7
8
  "dist",
8
9
  "src"
@@ -19,18 +20,48 @@
19
20
  "publishConfig": {
20
21
  "access": "public"
21
22
  },
23
+ "dependencies": {
24
+ "@docsearch/css": "^4.3.2",
25
+ "@docsearch/js": "^4.3.2",
26
+ "@shikijs/core": "^3.19.0",
27
+ "@shikijs/transformers": "^3.19.0",
28
+ "@types/markdown-it": "^14.1.2",
29
+ "@vitejs/plugin-vue": "^6.0.2",
30
+ "@vue/devtools-api": "^8.0.5",
31
+ "@vue/shared": "^3.5.25",
32
+ "@vueuse/core": "^14.1.0",
33
+ "@vueuse/integrations": "^14.1.0",
34
+ "baseline-status": "^1.1.0",
35
+ "focus-trap": "^7.6.6",
36
+ "mark.js": "^8.11.1",
37
+ "minisearch": "^7.2.0",
38
+ "opui-blocks": "^0.2.0",
39
+ "shiki": "^3.19.0",
40
+ "vue": "^3.5.25"
41
+ },
22
42
  "devDependencies": {
23
- "nodemon": "^3.1.10",
43
+ "@types/node": "^24.10.3",
44
+ "date-fns": "^4.1.0",
45
+ "gray-matter": "^4.0.3",
46
+ "nodemon": "^3.1.11",
24
47
  "open-props": "2.0.0-beta.5",
25
48
  "postcss": "^8.5.6",
26
49
  "postcss-cli": "^11.0.1",
50
+ "postcss-custom-media": "^11.0.6",
27
51
  "postcss-import": "^16.1.1",
28
- "shx": "^0.4.0"
52
+ "prettier": "^3.7.4",
53
+ "shx": "^0.4.0",
54
+ "typescript": "^5.9.3",
55
+ "vite": "^7.2.7",
56
+ "vitepress": "^1.6.4",
57
+ "vue-tsc": "^3.1.8"
29
58
  },
30
59
  "scripts": {
31
60
  "build:themes": "node scripts/build-themes.js",
32
61
  "build": "pnpm run clean && pnpm run build:themes && postcss src/open-props.css -o dist/op.css",
33
62
  "clean": "pnpm exec shx rm -rf dist",
34
- "dev": "nodemon --watch src --ext css --delay 500ms --verbose --exec \"pnpm build:themes\""
63
+ "docs:dev": "vitepress dev docs",
64
+ "docs:build": "vitepress build docs",
65
+ "docs:preview": "vitepress preview docs"
35
66
  }
36
67
  }
package/src/themes/theme-one/components/button.css CHANGED
@@ -33,9 +33,12 @@
33
33
  }
34
34
 
35
35
  @media (prefers-reduced-motion: no-preference) {
36
- transition: background-color 0.2s var(--ease-out-3),
37
- box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
38
- color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
36
+ transition:
37
+ background-color 0.2s var(--ease-out-3),
38
+ box-shadow 0.2s var(--ease-out-3),
39
+ border-color 0.2s var(--ease-out-3),
40
+ color 0.2s var(--ease-out-3),
41
+ outline-offset 0.05s var(--ease-1);
39
42
 
40
43
  /* Ripple effect */
41
44
  background-position: center;
@@ -91,6 +94,15 @@
91
94
  }
92
95
  }
93
96
 
97
+ /* Keyboard input */
98
+ :is(kbd) {
99
+ background-color: inherit;
100
+ border-color: currentColor;
101
+ color: inherit;
102
+ font-size: 0.85em;
103
+ line-height: 1.2;
104
+ }
105
+
94
106
  /* Sizes */
95
107
  &.small {
96
108
  --_min-height: 1.875rem;
@@ -206,8 +218,10 @@
206
218
  );
207
219
  --_text-color: var(--color-8);
208
220
 
209
- box-shadow: 0px 3px 1px -2px oklch(0 0 0 / 20%),
210
- 0px 2px 2px 0px oklch(0 0 0 / 14%), 0px 1px 5px 0px oklch(0 0 0 / 12%);
221
+ box-shadow:
222
+ 0px 3px 1px -2px oklch(0 0 0 / 20%),
223
+ 0px 2px 2px 0px oklch(0 0 0 / 14%),
224
+ 0px 1px 5px 0px oklch(0 0 0 / 12%);
211
225
 
212
226
  &:where(:not([disabled])) {
213
227
  &:where(:not(:active):hover) {
package/src/themes/theme-one/components/list.css CHANGED
@@ -8,6 +8,7 @@ Lists meant to be used stand-alone or as part of Select elements
8
8
  */
9
9
  :where(.list) {
10
10
  --_bg-color: light-dark(var(--gray-1), var(--gray-15));
11
+ --_bg-color-hover: light-dark(var(--gray-2), var(--gray-14));
11
12
 
12
13
  background-color: var(--_bg-color);
13
14
  list-style: none;
@@ -146,7 +147,7 @@ Lists meant to be used stand-alone or as part of Select elements
146
147
  z-index: 0;
147
148
 
148
149
  &:hover {
149
- background-color: light-dark(var(--gray-2), var(--gray-14));
150
+ background-color: var(--_bg-color-hover);
150
151
  }
151
152
 
152
153
  &:checked {
@@ -186,7 +187,7 @@ Lists meant to be used stand-alone or as part of Select elements
186
187
  }
187
188
 
188
189
  &:hover {
189
- background-color: light-dark(var(--gray-2), var(--gray-14));
190
+ background-color: var(--_bg-color-hover);
190
191
  }
191
192
 
192
193
  /*** Remove ripple effect when trailing button is clicked */
package/src/themes/theme-two/components/button.css CHANGED
@@ -33,9 +33,12 @@
33
33
  }
34
34
 
35
35
  @media (prefers-reduced-motion: no-preference) {
36
- transition: background-color 0.2s var(--ease-out-3),
37
- box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
38
- color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);
36
+ transition:
37
+ background-color 0.2s var(--ease-out-3),
38
+ box-shadow 0.2s var(--ease-out-3),
39
+ border-color 0.2s var(--ease-out-3),
40
+ color 0.2s var(--ease-out-3),
41
+ outline-offset 0.05s var(--ease-1);
39
42
 
40
43
  /* Ripple effect */
41
44
  background-position: center;
@@ -91,6 +94,15 @@
91
94
  }
92
95
  }
93
96
 
97
+ /* Keyboard input */
98
+ :is(kbd) {
99
+ background-color: inherit;
100
+ border-color: currentColor;
101
+ color: inherit;
102
+ font-size: 0.85em;
103
+ line-height: 1.2;
104
+ }
105
+
94
106
  /* Sizes */
95
107
  &.small {
96
108
  --_min-height: 1.875rem;
package/src/themes/theme-two/components/list.css CHANGED
@@ -8,6 +8,7 @@ Lists meant to be used stand-alone or as part of Select elements
8
8
  */
9
9
  :where(.list) {
10
10
  --_bg-color: light-dark(var(--gray-1), var(--gray-15));
11
+ --_bg-color-hover: light-dark(var(--gray-2), var(--gray-14));
11
12
 
12
13
  background-color: var(--_bg-color);
13
14
  list-style: none;
@@ -146,7 +147,7 @@ Lists meant to be used stand-alone or as part of Select elements
146
147
  z-index: 0;
147
148
 
148
149
  &:hover {
149
- background-color: light-dark(var(--gray-2), var(--gray-14));
150
+ background-color: var(--_bg-color-hover);
150
151
  }
151
152
 
152
153
  &:checked {
@@ -186,7 +187,7 @@ Lists meant to be used stand-alone or as part of Select elements
186
187
  }
187
188
 
188
189
  &:hover {
189
- background-color: light-dark(var(--gray-2), var(--gray-14));
190
+ background-color: var(--_bg-color-hover);
190
191
  }
191
192
 
192
193
  /*** Remove ripple effect when trailing button is clicked */
package/dist/op.css DELETED
@@ -1,72 +0,0 @@
1
- /*
2
- * Open Props
3
- * Import as many props as you need here.
4
- * https://unpkg.com/browse/open-props@2.0.0-beta.5/css
5
- */
6
- @custom-media --motionOK (prefers-reduced-motion: no-preference);
7
- @custom-media --motionNotOK (prefers-reduced-motion: reduce);
8
- @custom-media --opacityOK (prefers-reduced-transparency: no-preference);
9
- @custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
10
- @custom-media --useDataOK (prefers-reduced-data: no-preference);
11
- @custom-media --useDataNotOK (prefers-reduced-data: reduce);
12
- @custom-media --OSdark (prefers-color-scheme: dark);
13
- @custom-media --OSlight (prefers-color-scheme: light);
14
- @custom-media --highContrast (prefers-contrast: more);
15
- @custom-media --lowContrast (prefers-contrast: less);
16
- @custom-media --portrait (orientation: portrait);
17
- @custom-media --landscape (orientation: landscape);
18
- @custom-media --HDcolor (dynamic-range: high);
19
- @custom-media --touch (hover: none) and (pointer: coarse);
20
- @custom-media --stylus (hover: none) and (pointer: fine);
21
- @custom-media --pointer (hover) and (pointer: coarse);
22
- @custom-media --mouse (hover) and (pointer: fine);
23
- @custom-media --xxs-only (0px <= width <= 240px);
24
- @custom-media --xxs-n-above (width >= 240px);
25
- @custom-media --xxs-n-below (width < 240px);
26
- @custom-media --xxs-phone (--xxs-only) and (--portrait);
27
- @custom-media --xs-only (240px <= width <= 360px);
28
- @custom-media --xs-n-above (width >= 360px);
29
- @custom-media --xs-n-below (width < 360px);
30
- @custom-media --xs-phone (--xs-only) and (--portrait);
31
- @custom-media --sm-only (360px <= width <= 480px);
32
- @custom-media --sm-n-above (width >= 480px);
33
- @custom-media --sm-n-below (width < 480px);
34
- @custom-media --sm-phone (--sm-only) and (--portrait);
35
- @custom-media --md-only (480px <= width <= 768px);
36
- @custom-media --md-n-above (width >= 768px);
37
- @custom-media --md-n-below (width < 768px);
38
- @custom-media --md-phone (--md-only) and (--portrait);
39
- @custom-media --lg-only (768px <= width <= 1024px);
40
- @custom-media --lg-n-above (width >= 1024px);
41
- @custom-media --lg-n-below (width < 1024px);
42
- @custom-media --lg-phone (--lg-only) and (--portrait);
43
- @custom-media --xl-only (1024px <= width <= 1440px);
44
- @custom-media --xl-n-above (width >= 1440px);
45
- @custom-media --xl-n-below (width < 1440px);
46
- @custom-media --xxl-only (1440px <= width <= 1920px);
47
- @custom-media --xxl-n-above (width >= 1920px);
48
- @custom-media --xxl-n-below (width < 1920px);
49
- @layer openprops{
50
- :where(:root){--font-sans:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;--font-serif:ui-serif,serif;--font-mono:Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;--font-weight-1:100;--font-weight-2:200;--font-weight-3:300;--font-weight-4:400;--font-weight-5:500;--font-weight-6:600;--font-weight-7:700;--font-weight-8:800;--font-weight-9:900;--font-size-00:.5rem;--font-size-0:.75rem;--font-size-1:1rem;--font-size-2:1.1rem;--font-size-3:1.25rem;--font-size-4:1.5rem;--font-size-5:2rem;--font-size-6:2.5rem;--font-size-7:3rem;--font-size-8:3.5rem;--font-size-fluid-0:clamp(.75rem,2vw,1rem);--font-size-fluid-1:clamp(1rem,4vw,1.5rem);--font-size-fluid-2:clamp(1.5rem,6vw,2.5rem);--font-size-fluid-3:clamp(2rem,9vw,3.5rem);--size-000:-.5rem;--size-00:-.25rem;--size-1:.25rem;--size-2:.5rem;--size-3:1rem;--size-4:1.25rem;--size-5:1.5rem;--size-6:1.75rem;--size-7:2rem;--size-8:3rem;--size-9:4rem;--size-10:5rem;--size-11:7.5rem;--size-12:10rem;--size-13:15rem;--size-14:20rem;--size-15:30rem;--size-fluid-1:clamp(.5rem,1vw,1rem);--size-fluid-2:clamp(1rem,2vw,1.5rem);--size-fluid-3:clamp(1.5rem,3vw,2rem);--size-fluid-4:clamp(2rem,4vw,3rem);--size-fluid-5:clamp(4rem,5vw,5rem);--size-fluid-6:clamp(5rem,7vw,7.5rem);--size-fluid-7:clamp(7.5rem,10vw,10rem);--size-fluid-8:clamp(10rem,20vw,15rem);--size-fluid-9:clamp(15rem,30vw,20rem);--size-fluid-10:clamp(20rem,40vw,30rem);--size-header-1:20ch;--size-header-2:25ch;--size-header-3:35ch;--size-content-1:20ch;--size-content-2:45ch;--size-content-3:60ch;--ratio-square:1;--ratio-landscape:4/3;--ratio-portrait:3/4;--ratio-widescreen:16/9;--ratio-ultrawide:18/5;--ratio-golden:1.618/1;--layer-1:1;--layer-2:2;--layer-3:3;--layer-4:4;--layer-5:5;--layer-bottom:var(--layer-1);--layer-top:var(--layer-5);--layer-important:2147480000;--border-size-1:1px;--border-size-2:2px;--border-size-3:5px;--border-size-4:10px;--border-size-5:25px;--radius-1:2px;--radius-2:5px;--radius-3:1rem;--radius-4:2rem;--radius-5:4rem;--radius-6:8rem;--radius-round:100000px;--radius-blob-1:30% 70% 70% 30%/53% 30% 70% 47%;--radius-blob-2:53% 47% 34% 66%/63% 46% 54% 37%;--radius-blob-3:37% 63% 56% 44%/49% 56% 44% 51%;--radius-blob-4:63% 37% 37% 63%/43% 37% 63% 57%;--radius-blob-5:49% 51% 48% 52%/57% 44% 56% 43%;--radius-conditional-1:clamp(0px,calc(100vw - 100%)*100000,var(--radius-1));--radius-conditional-2:clamp(0px,calc(100vw - 100%)*100000,var(--radius-2));--radius-conditional-3:clamp(0px,calc(100vw - 100%)*100000,var(--radius-3));--radius-conditional-4:clamp(0px,calc(100vw - 100%)*100000,var(--radius-4));--radius-conditional-5:clamp(0px,calc(100vw - 100%)*100000,var(--radius-5));--radius-conditional-6:clamp(0px,calc(100vw - 100%)*100000,var(--radius-6))}*{--shadow-strength:1%;--shadow-chroma:3%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff,inset 0 .5px 0 0 #0001;--shadow-1:0 1px 2px -1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--shadow-2:0 3px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 14px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%));--shadow-3:0 -1px 3px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 2px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 5px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 4px 12px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 12px 15px -5px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-4:0 -2px 5px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 1px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 2px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 9px 9px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 16px 16px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%));--shadow-5:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 2px 1px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 5px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 10px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 20px 20px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 40px 40px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--shadow-6:0 -1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 7%));--inner-shadow-0:inset 0 0 0 1px oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%));--inner-shadow-1:inset 0 1px 2px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-2:inset 0 1px 4px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-3:inset 0 2px 8px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight);--inner-shadow-4:inset 0 2px 14px 0 oklch(var(--shadow-color)/calc(var(--shadow-strength) + 9%)),var(--inner-shadow-highlight)}@media (prefers-color-scheme:dark){*{--shadow-strength:25%;--shadow-chroma:10%;--shadow-hue:var(--shadow-tint,var(--palette-hue));--shadow-color:15% var(--shadow-chroma)var(--shadow-hue);--inner-shadow-highlight:inset 0 -.5px 0 0 #fff1,inset 0 .5px 0 0 #0007}}:where(:root){--ease-1:cubic-bezier(.25,0,.5,1);--ease-2:cubic-bezier(.25,0,.4,1);--ease-3:cubic-bezier(.25,0,.3,1);--ease-4:cubic-bezier(.25,0,.2,1);--ease-5:cubic-bezier(.25,0,.1,1);--ease-in-1:cubic-bezier(.25,0,1,1);--ease-in-2:cubic-bezier(.5,0,1,1);--ease-in-3:cubic-bezier(.7,0,1,1);--ease-in-4:cubic-bezier(.9,0,1,1);--ease-in-5:cubic-bezier(1,0,1,1);--ease-out-1:cubic-bezier(0,0,.75,1);--ease-out-2:cubic-bezier(0,0,.5,1);--ease-out-3:cubic-bezier(0,0,.3,1);--ease-out-4:cubic-bezier(0,0,.1,1);--ease-out-5:cubic-bezier(0,0,0,1);--ease-in-out-1:cubic-bezier(.1,0,.9,1);--ease-in-out-2:cubic-bezier(.3,0,.7,1);--ease-in-out-3:cubic-bezier(.5,0,.5,1);--ease-in-out-4:cubic-bezier(.7,0,.3,1);--ease-in-out-5:cubic-bezier(.9,0,.1,1);--ease-elastic-out-1:cubic-bezier(.5,.75,.75,1.25);--ease-elastic-out-2:cubic-bezier(.5,1,.75,1.25);--ease-elastic-out-3:cubic-bezier(.5,1.25,.75,1.25);--ease-elastic-out-4:cubic-bezier(.5,1.5,.75,1.25);--ease-elastic-out-5:cubic-bezier(.5,1.75,.75,1.25);--ease-elastic-in-1:cubic-bezier(.5,-.25,.75,1);--ease-elastic-in-2:cubic-bezier(.5,-.5,.75,1);--ease-elastic-in-3:cubic-bezier(.5,-.75,.75,1);--ease-elastic-in-4:cubic-bezier(.5,-1,.75,1);--ease-elastic-in-5:cubic-bezier(.5,-1.25,.75,1);--ease-elastic-in-out-1:cubic-bezier(.5,-.1,.1,1.5);--ease-elastic-in-out-2:cubic-bezier(.5,-.3,.1,1.5);--ease-elastic-in-out-3:cubic-bezier(.5,-.5,.1,1.5);--ease-elastic-in-out-4:cubic-bezier(.5,-.7,.1,1.5);--ease-elastic-in-out-5:cubic-bezier(.5,-.9,.1,1.5);--ease-step-1:steps(2);--ease-step-2:steps(3);--ease-step-3:steps(4);--ease-step-4:steps(7);--ease-step-5:steps(10);--ease-spring-1:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);--ease-spring-2:linear(0,.007,.029 2.2%,.118 4.7%,.625 14.4%,.826 19%,.902,.962,1.008 26.1%,1.041 28.7%,1.064 32.1%,1.07 36%,1.061 40.5%,1.015 53.4%,.999 61.6%,.995 71.2%,1);--ease-spring-3:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);--ease-spring-4:linear(0,.009,.037 1.7%,.153 3.6%,.776 10.3%,1.001,1.142 16%,1.185,1.209 19%,1.215 19.9% 20.8%,1.199,1.165 25%,1.056 30.3%,1.008 33%,.973,.955 39.2%,.953 41.1%,.957 43.3%,.998 53.3%,1.009 59.1% 63.7%,.998 78.9%,1);--ease-spring-5:linear(0,.01,.04 1.6%,.161 3.3%,.816 9.4%,1.046,1.189 14.4%,1.231,1.254 17%,1.259,1.257 18.6%,1.236,1.194 22.3%,1.057 27%,.999 29.4%,.955 32.1%,.942,.935 34.9%,.933,.939 38.4%,1 47.3%,1.011,1.017 52.6%,1.016 56.4%,1 65.2%,.996 70.2%,1.001 87.2%,1);--ease-bounce-1:linear(0,.004,.016,.035,.063,.098,.141,.191,.25,.316,.391 36.8%,.563,.766,1 58.8%,.946,.908 69.1%,.895,.885,.879,.878,.879,.885,.895,.908 89.7%,.946,1);--ease-bounce-2:linear(0,.004,.016,.035,.063,.098,.141 15.1%,.25,.391,.562,.765,1,.892 45.2%,.849,.815,.788,.769,.757,.753,.757,.769,.788,.815,.85,.892 75.2%,1 80.2%,.973,.954,.943,.939,.943,.954,.973,1);--ease-bounce-3:linear(0,.004,.016,.035,.062,.098,.141 11.4%,.25,.39,.562,.764,1 30.3%,.847 34.8%,.787,.737,.699,.672,.655,.65,.656,.672,.699,.738,.787,.847 61.7%,1 66.2%,.946,.908,.885 74.2%,.879,.878,.879,.885 79.5%,.908,.946,1 87.4%,.981,.968,.96,.957,.96,.968,.981,1);--ease-bounce-4:linear(0,.004,.016 3%,.062,.141,.25,.391,.562 18.2%,1 24.3%,.81,.676 32.3%,.629,.595,.575,.568,.575,.595,.629,.676 48.2%,.811,1 56.2%,.918,.86,.825,.814,.825,.86,.918,1 77.2%,.94 80.6%,.925,.92,.925,.94 87.5%,1 90.9%,.974,.965,.974,1);--ease-bounce-5:linear(0,.004,.016 2.5%,.063,.141,.25 10.1%,.562,1 20.2%,.783,.627,.534 30.9%,.511,.503,.511,.534 38%,.627,.782,1 48.7%,.892,.815,.769 56.3%,.757,.753,.757,.769 61.3%,.815,.892,1 68.8%,.908 72.4%,.885,.878,.885,.908 79.4%,1 83%,.954 85.5%,.943,.939,.943,.954 90.5%,1 93%,.977,.97,.977,1)}:where(:root){--palette-hue:250;--palette-hue-rotate-by:0;--palette-chroma:.15}*{--color-1:oklch(98% calc(.03*var(--palette-chroma,1))calc(var(--palette-hue) + (0*var(--palette-hue-rotate-by))));--color-2:oklch(97% calc(.06*var(--palette-chroma,1))calc(var(--palette-hue) + (1*var(--palette-hue-rotate-by))));--color-3:oklch(93% calc(.1*var(--palette-chroma,1))calc(var(--palette-hue) + (2*var(--palette-hue-rotate-by))));--color-4:oklch(84% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (3*var(--palette-hue-rotate-by))));--color-5:oklch(80% calc(.16*var(--palette-chroma,1))calc(var(--palette-hue) + (4*var(--palette-hue-rotate-by))));--color-6:oklch(71% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (5*var(--palette-hue-rotate-by))));--color-7:oklch(66% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (6*var(--palette-hue-rotate-by))));--color-8:oklch(58% calc(.21*var(--palette-chroma,1))calc(var(--palette-hue) + (7*var(--palette-hue-rotate-by))));--color-9:oklch(53% calc(.2*var(--palette-chroma,1))calc(var(--palette-hue) + (8*var(--palette-hue-rotate-by))));--color-10:oklch(49% calc(.19*var(--palette-chroma,1))calc(var(--palette-hue) + (9*var(--palette-hue-rotate-by))));--color-11:oklch(42% calc(.17*var(--palette-chroma,1))calc(var(--palette-hue) + (10*var(--palette-hue-rotate-by))));--color-12:oklch(35% calc(.15*var(--palette-chroma,1))calc(var(--palette-hue) + (11*var(--palette-hue-rotate-by))));--color-13:oklch(27% calc(.12*var(--palette-chroma,1))calc(var(--palette-hue) + (12*var(--palette-hue-rotate-by))));--color-14:oklch(20% calc(.09*var(--palette-chroma,1))calc(var(--palette-hue) + (13*var(--palette-hue-rotate-by))));--color-15:oklch(16% calc(.07*var(--palette-chroma,1))calc(var(--palette-hue) + (14*var(--palette-hue-rotate-by))));--color-16:oklch(10% calc(.05*var(--palette-chroma,1))calc(var(--palette-hue) + (15*var(--palette-hue-rotate-by))))}}
51
- @layer openprops{
52
- :where(:root) {
53
- --size-xxs: 240px;
54
- --size-xs: 360px;
55
- --size-sm: 480px;
56
- --size-md: 768px;
57
- --size-lg: 1024px;
58
- --size-xl: 1440px;
59
- --size-xxl: 1920px;
60
- }}
61
- @layer openprops{
62
- :where(:root) {
63
- --font-lineheight-00: 0.95;
64
- --font-lineheight-0: 1.1;
65
- --font-lineheight-1: 1.25;
66
- --font-lineheight-2: 1.375;
67
- --font-lineheight-3: 1.5;
68
- --font-lineheight-4: 1.75;
69
- --font-lineheight-5: 2;
70
- }}
71
- @layer openprops{
72
- :where(:root){--oklch-red:25;--oklch-pink:350;--oklch-purple:310;--oklch-violet:290;--oklch-indigo:270;--oklch-blue:240;--oklch-cyan:210;--oklch-teal:185;--oklch-green:145;--oklch-lime:125;--oklch-yellow:100;--oklch-orange:75}}