opui-css 2.2.3 → 2.4.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.
- package/dist/op+ui.css +128 -128
- package/package.json +3 -4
package/dist/op+ui.css
CHANGED
|
@@ -1,96 +1,96 @@
|
|
|
1
|
-
@layer openprops, normalize, utils, theme, components.root, components.extended;
|
|
1
|
+
@layer openprops, normalize, utils, theme, components.root, components.extended;
|
|
2
2
|
/*
|
|
3
3
|
This main.css file represents whatever file you choose to use as an entry point for OPUI
|
|
4
4
|
Ideally it's the root/entry CSS file in your project.
|
|
5
|
-
*/
|
|
6
|
-
/* Open Props imports */
|
|
7
|
-
/*
|
|
8
|
-
* Open Props
|
|
9
|
-
* Import as many props as you need here.
|
|
10
|
-
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
11
|
-
*/
|
|
12
|
-
@custom-media --motionOK (prefers-reduced-motion: no-preference);
|
|
13
|
-
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
|
|
14
|
-
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
|
|
15
|
-
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
|
|
16
|
-
@custom-media --useDataOK (prefers-reduced-data: no-preference);
|
|
17
|
-
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
|
|
18
|
-
@custom-media --OSdark (prefers-color-scheme: dark);
|
|
19
|
-
@custom-media --OSlight (prefers-color-scheme: light);
|
|
20
|
-
@custom-media --highContrast (prefers-contrast: more);
|
|
21
|
-
@custom-media --lowContrast (prefers-contrast: less);
|
|
22
|
-
@custom-media --portrait (orientation: portrait);
|
|
23
|
-
@custom-media --landscape (orientation: landscape);
|
|
24
|
-
@custom-media --HDcolor (dynamic-range: high);
|
|
25
|
-
@custom-media --touch (hover: none) and (pointer: coarse);
|
|
26
|
-
@custom-media --stylus (hover: none) and (pointer: fine);
|
|
27
|
-
@custom-media --pointer (hover) and (pointer: coarse);
|
|
28
|
-
@custom-media --mouse (hover) and (pointer: fine);
|
|
29
|
-
@custom-media --xxs-only (0px <= width <= 240px);
|
|
30
|
-
@custom-media --xxs-n-above (width >= 240px);
|
|
31
|
-
@custom-media --xxs-n-below (width < 240px);
|
|
32
|
-
@custom-media --xxs-phone (--xxs-only) and (--portrait);
|
|
33
|
-
@custom-media --xs-only (240px <= width <= 360px);
|
|
34
|
-
@custom-media --xs-n-above (width >= 360px);
|
|
35
|
-
@custom-media --xs-n-below (width < 360px);
|
|
36
|
-
@custom-media --xs-phone (--xs-only) and (--portrait);
|
|
37
|
-
@custom-media --sm-only (360px <= width <= 480px);
|
|
38
|
-
@custom-media --sm-n-above (width >= 480px);
|
|
39
|
-
@custom-media --sm-n-below (width < 480px);
|
|
40
|
-
@custom-media --sm-phone (--sm-only) and (--portrait);
|
|
41
|
-
@custom-media --md-only (480px <= width <= 768px);
|
|
42
|
-
@custom-media --md-n-above (width >= 768px);
|
|
43
|
-
@custom-media --md-n-below (width < 768px);
|
|
44
|
-
@custom-media --md-phone (--md-only) and (--portrait);
|
|
45
|
-
@custom-media --lg-only (768px <= width <= 1024px);
|
|
46
|
-
@custom-media --lg-n-above (width >= 1024px);
|
|
47
|
-
@custom-media --lg-n-below (width < 1024px);
|
|
48
|
-
@custom-media --lg-phone (--lg-only) and (--portrait);
|
|
49
|
-
@custom-media --xl-only (1024px <= width <= 1440px);
|
|
50
|
-
@custom-media --xl-n-above (width >= 1440px);
|
|
51
|
-
@custom-media --xl-n-below (width < 1440px);
|
|
52
|
-
@custom-media --xxl-only (1440px <= width <= 1920px);
|
|
53
|
-
@custom-media --xxl-n-above (width >= 1920px);
|
|
54
|
-
@custom-media --xxl-n-below (width < 1920px);
|
|
55
|
-
@layer openprops{
|
|
56
|
-
: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))))}}
|
|
57
|
-
@layer openprops{
|
|
58
|
-
:where(:root) {
|
|
59
|
-
--size-xxs: 240px;
|
|
60
|
-
--size-xs: 360px;
|
|
61
|
-
--size-sm: 480px;
|
|
62
|
-
--size-md: 768px;
|
|
63
|
-
--size-lg: 1024px;
|
|
64
|
-
--size-xl: 1440px;
|
|
65
|
-
--size-xxl: 1920px;
|
|
66
|
-
}}
|
|
67
|
-
@layer openprops{
|
|
68
|
-
:where(:root) {
|
|
69
|
-
--font-lineheight-00: 0.95;
|
|
70
|
-
--font-lineheight-0: 1.1;
|
|
71
|
-
--font-lineheight-1: 1.25;
|
|
72
|
-
--font-lineheight-2: 1.375;
|
|
73
|
-
--font-lineheight-3: 1.5;
|
|
74
|
-
--font-lineheight-4: 1.75;
|
|
75
|
-
--font-lineheight-5: 2;
|
|
76
|
-
}}
|
|
77
|
-
@layer openprops{
|
|
78
|
-
:where(:root) {
|
|
79
|
-
--oklch-red: 25;
|
|
80
|
-
--oklch-pink: 350;
|
|
81
|
-
--oklch-purple: 310;
|
|
82
|
-
--oklch-violet: 290;
|
|
83
|
-
--oklch-indigo: 270;
|
|
84
|
-
--oklch-blue: 240;
|
|
85
|
-
--oklch-cyan: 210;
|
|
86
|
-
--oklch-teal: 185;
|
|
87
|
-
--oklch-green: 145;
|
|
88
|
-
--oklch-lime: 125;
|
|
89
|
-
--oklch-yellow: 100;
|
|
90
|
-
--oklch-orange: 75;
|
|
91
|
-
}}
|
|
92
|
-
/* OPUI Core */
|
|
93
|
-
/* Normalize */
|
|
5
|
+
*/
|
|
6
|
+
/* Open Props imports */
|
|
7
|
+
/*
|
|
8
|
+
* Open Props
|
|
9
|
+
* Import as many props as you need here.
|
|
10
|
+
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
11
|
+
*/
|
|
12
|
+
@custom-media --motionOK (prefers-reduced-motion: no-preference);
|
|
13
|
+
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
|
|
14
|
+
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
|
|
15
|
+
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);
|
|
16
|
+
@custom-media --useDataOK (prefers-reduced-data: no-preference);
|
|
17
|
+
@custom-media --useDataNotOK (prefers-reduced-data: reduce);
|
|
18
|
+
@custom-media --OSdark (prefers-color-scheme: dark);
|
|
19
|
+
@custom-media --OSlight (prefers-color-scheme: light);
|
|
20
|
+
@custom-media --highContrast (prefers-contrast: more);
|
|
21
|
+
@custom-media --lowContrast (prefers-contrast: less);
|
|
22
|
+
@custom-media --portrait (orientation: portrait);
|
|
23
|
+
@custom-media --landscape (orientation: landscape);
|
|
24
|
+
@custom-media --HDcolor (dynamic-range: high);
|
|
25
|
+
@custom-media --touch (hover: none) and (pointer: coarse);
|
|
26
|
+
@custom-media --stylus (hover: none) and (pointer: fine);
|
|
27
|
+
@custom-media --pointer (hover) and (pointer: coarse);
|
|
28
|
+
@custom-media --mouse (hover) and (pointer: fine);
|
|
29
|
+
@custom-media --xxs-only (0px <= width <= 240px);
|
|
30
|
+
@custom-media --xxs-n-above (width >= 240px);
|
|
31
|
+
@custom-media --xxs-n-below (width < 240px);
|
|
32
|
+
@custom-media --xxs-phone (--xxs-only) and (--portrait);
|
|
33
|
+
@custom-media --xs-only (240px <= width <= 360px);
|
|
34
|
+
@custom-media --xs-n-above (width >= 360px);
|
|
35
|
+
@custom-media --xs-n-below (width < 360px);
|
|
36
|
+
@custom-media --xs-phone (--xs-only) and (--portrait);
|
|
37
|
+
@custom-media --sm-only (360px <= width <= 480px);
|
|
38
|
+
@custom-media --sm-n-above (width >= 480px);
|
|
39
|
+
@custom-media --sm-n-below (width < 480px);
|
|
40
|
+
@custom-media --sm-phone (--sm-only) and (--portrait);
|
|
41
|
+
@custom-media --md-only (480px <= width <= 768px);
|
|
42
|
+
@custom-media --md-n-above (width >= 768px);
|
|
43
|
+
@custom-media --md-n-below (width < 768px);
|
|
44
|
+
@custom-media --md-phone (--md-only) and (--portrait);
|
|
45
|
+
@custom-media --lg-only (768px <= width <= 1024px);
|
|
46
|
+
@custom-media --lg-n-above (width >= 1024px);
|
|
47
|
+
@custom-media --lg-n-below (width < 1024px);
|
|
48
|
+
@custom-media --lg-phone (--lg-only) and (--portrait);
|
|
49
|
+
@custom-media --xl-only (1024px <= width <= 1440px);
|
|
50
|
+
@custom-media --xl-n-above (width >= 1440px);
|
|
51
|
+
@custom-media --xl-n-below (width < 1440px);
|
|
52
|
+
@custom-media --xxl-only (1440px <= width <= 1920px);
|
|
53
|
+
@custom-media --xxl-n-above (width >= 1920px);
|
|
54
|
+
@custom-media --xxl-n-below (width < 1920px);
|
|
55
|
+
@layer openprops{
|
|
56
|
+
: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))))}}
|
|
57
|
+
@layer openprops{
|
|
58
|
+
:where(:root) {
|
|
59
|
+
--size-xxs: 240px;
|
|
60
|
+
--size-xs: 360px;
|
|
61
|
+
--size-sm: 480px;
|
|
62
|
+
--size-md: 768px;
|
|
63
|
+
--size-lg: 1024px;
|
|
64
|
+
--size-xl: 1440px;
|
|
65
|
+
--size-xxl: 1920px;
|
|
66
|
+
}}
|
|
67
|
+
@layer openprops{
|
|
68
|
+
:where(:root) {
|
|
69
|
+
--font-lineheight-00: 0.95;
|
|
70
|
+
--font-lineheight-0: 1.1;
|
|
71
|
+
--font-lineheight-1: 1.25;
|
|
72
|
+
--font-lineheight-2: 1.375;
|
|
73
|
+
--font-lineheight-3: 1.5;
|
|
74
|
+
--font-lineheight-4: 1.75;
|
|
75
|
+
--font-lineheight-5: 2;
|
|
76
|
+
}}
|
|
77
|
+
@layer openprops{
|
|
78
|
+
:where(:root) {
|
|
79
|
+
--oklch-red: 25;
|
|
80
|
+
--oklch-pink: 350;
|
|
81
|
+
--oklch-purple: 310;
|
|
82
|
+
--oklch-violet: 290;
|
|
83
|
+
--oklch-indigo: 270;
|
|
84
|
+
--oklch-blue: 240;
|
|
85
|
+
--oklch-cyan: 210;
|
|
86
|
+
--oklch-teal: 185;
|
|
87
|
+
--oklch-green: 145;
|
|
88
|
+
--oklch-lime: 125;
|
|
89
|
+
--oklch-yellow: 100;
|
|
90
|
+
--oklch-orange: 75;
|
|
91
|
+
}}
|
|
92
|
+
/* OPUI Core */
|
|
93
|
+
/* Normalize */
|
|
94
94
|
@layer normalize {
|
|
95
95
|
*,
|
|
96
96
|
::before,
|
|
@@ -286,8 +286,8 @@ Ideally it's the root/entry CSS file in your project.
|
|
|
286
286
|
:target {
|
|
287
287
|
scroll-margin-block-start: 2rem;
|
|
288
288
|
}
|
|
289
|
-
}
|
|
290
|
-
/* Utils */
|
|
289
|
+
}
|
|
290
|
+
/* Utils */
|
|
291
291
|
@layer utils {
|
|
292
292
|
/*
|
|
293
293
|
Screen-reader only
|
|
@@ -347,12 +347,12 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
347
347
|
}
|
|
348
348
|
}
|
|
349
349
|
}
|
|
350
|
-
}
|
|
351
|
-
/* Components */
|
|
350
|
+
}
|
|
351
|
+
/* Components */
|
|
352
352
|
/*
|
|
353
353
|
* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
|
|
354
|
-
*/
|
|
355
|
-
/*** Root components (no dependencies) */
|
|
354
|
+
*/
|
|
355
|
+
/*** Root components (no dependencies) */
|
|
356
356
|
@layer components.root {
|
|
357
357
|
:where(.button) {
|
|
358
358
|
--_bg-color: transparent;
|
|
@@ -619,7 +619,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
619
619
|
cursor: pointer;
|
|
620
620
|
margin-inline-end: var(--size-relative-6);
|
|
621
621
|
}
|
|
622
|
-
}
|
|
622
|
+
}
|
|
623
623
|
@layer components.root {
|
|
624
624
|
:where(.icon-button) {
|
|
625
625
|
--_text-color: inherit;
|
|
@@ -659,7 +659,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
659
659
|
}
|
|
660
660
|
}
|
|
661
661
|
}
|
|
662
|
-
}
|
|
662
|
+
}
|
|
663
663
|
@layer components.root {
|
|
664
664
|
:where(nav.tabs) {
|
|
665
665
|
--_bg-color: transparent;
|
|
@@ -779,7 +779,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
779
779
|
}
|
|
780
780
|
}
|
|
781
781
|
}
|
|
782
|
-
}
|
|
782
|
+
}
|
|
783
783
|
@layer components.root {
|
|
784
784
|
:where([role="group"].toggle-button-group) {
|
|
785
785
|
--_border-radius: var(--radius-round);
|
|
@@ -918,7 +918,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
918
918
|
}
|
|
919
919
|
}
|
|
920
920
|
}
|
|
921
|
-
}
|
|
921
|
+
}
|
|
922
922
|
@layer components.root {
|
|
923
923
|
:where(.avatar) {
|
|
924
924
|
--_bg-color: var(--color-8);
|
|
@@ -986,7 +986,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
986
986
|
outline: 2px solid var(--surface-default);
|
|
987
987
|
}
|
|
988
988
|
}
|
|
989
|
-
}
|
|
989
|
+
}
|
|
990
990
|
@layer components.root {
|
|
991
991
|
:where(.badge) {
|
|
992
992
|
--_bg-color: var(--primary);
|
|
@@ -1087,7 +1087,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1087
1087
|
}
|
|
1088
1088
|
}
|
|
1089
1089
|
}
|
|
1090
|
-
}
|
|
1090
|
+
}
|
|
1091
1091
|
@layer components.root {
|
|
1092
1092
|
:where(.card) {
|
|
1093
1093
|
--_bg-color: transparent;
|
|
@@ -1169,7 +1169,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1169
1169
|
padding-inline: var(--size-1) var(--size-3);
|
|
1170
1170
|
}
|
|
1171
1171
|
}
|
|
1172
|
-
}
|
|
1172
|
+
}
|
|
1173
1173
|
@layer components.root {
|
|
1174
1174
|
:where(.chip) {
|
|
1175
1175
|
--_bg-color: var(--surface-tonal);
|
|
@@ -1304,7 +1304,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1304
1304
|
cursor: not-allowed;
|
|
1305
1305
|
}
|
|
1306
1306
|
}
|
|
1307
|
-
}
|
|
1307
|
+
}
|
|
1308
1308
|
@layer components.root {
|
|
1309
1309
|
:where(.definition-list) {
|
|
1310
1310
|
--_border-style: solid;
|
|
@@ -1369,14 +1369,14 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1369
1369
|
}
|
|
1370
1370
|
}
|
|
1371
1371
|
}
|
|
1372
|
-
}
|
|
1372
|
+
}
|
|
1373
1373
|
@layer components.root {
|
|
1374
1374
|
:where(hr) {
|
|
1375
1375
|
background-color: var(--border-color);
|
|
1376
1376
|
block-size: var(--border-size-1);
|
|
1377
1377
|
margin-block: var(--size-fluid-3);
|
|
1378
1378
|
}
|
|
1379
|
-
}
|
|
1379
|
+
}
|
|
1380
1380
|
@layer components.root {
|
|
1381
1381
|
:where(.link) {
|
|
1382
1382
|
color: var(--primary);
|
|
@@ -1397,7 +1397,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1397
1397
|
text-underline-offset: 2px;
|
|
1398
1398
|
}
|
|
1399
1399
|
}
|
|
1400
|
-
}
|
|
1400
|
+
}
|
|
1401
1401
|
@layer components.root {
|
|
1402
1402
|
:where(table) {
|
|
1403
1403
|
border-collapse: collapse;
|
|
@@ -1504,7 +1504,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1504
1504
|
}
|
|
1505
1505
|
}
|
|
1506
1506
|
}
|
|
1507
|
-
}
|
|
1507
|
+
}
|
|
1508
1508
|
@layer components.root {
|
|
1509
1509
|
:where(progress) {
|
|
1510
1510
|
--_accent-color: var(--primary);
|
|
@@ -1587,7 +1587,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1587
1587
|
right: -8%;
|
|
1588
1588
|
}
|
|
1589
1589
|
}
|
|
1590
|
-
}
|
|
1590
|
+
}
|
|
1591
1591
|
@layer components.root {
|
|
1592
1592
|
[aria-busy="true"]:not(
|
|
1593
1593
|
input,
|
|
@@ -1625,7 +1625,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1625
1625
|
transform: rotate(1turn);
|
|
1626
1626
|
}
|
|
1627
1627
|
}
|
|
1628
|
-
}
|
|
1628
|
+
}
|
|
1629
1629
|
@layer components.root {
|
|
1630
1630
|
label:where(.checkbox, .radio) {
|
|
1631
1631
|
align-items: center;
|
|
@@ -1748,7 +1748,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1748
1748
|
}
|
|
1749
1749
|
}
|
|
1750
1750
|
}
|
|
1751
|
-
}
|
|
1751
|
+
}
|
|
1752
1752
|
@layer components.root {
|
|
1753
1753
|
:where(.switch) {
|
|
1754
1754
|
--_accent-color: var(--primary);
|
|
@@ -1937,7 +1937,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
1937
1937
|
}
|
|
1938
1938
|
}
|
|
1939
1939
|
}
|
|
1940
|
-
}
|
|
1940
|
+
}
|
|
1941
1941
|
@layer components.root {
|
|
1942
1942
|
:where(.range > input[type="range"]) {
|
|
1943
1943
|
--thumb-bg: var(--primary);
|
|
@@ -2058,7 +2058,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
2058
2058
|
}
|
|
2059
2059
|
}
|
|
2060
2060
|
}
|
|
2061
|
-
}
|
|
2061
|
+
}
|
|
2062
2062
|
@layer components.root {
|
|
2063
2063
|
/* Base typography */
|
|
2064
2064
|
:where(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) {
|
|
@@ -2267,8 +2267,8 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
2267
2267
|
text-wrap: balance;
|
|
2268
2268
|
}
|
|
2269
2269
|
}
|
|
2270
|
-
}
|
|
2271
|
-
/*** Extended components (has dependencies) */
|
|
2270
|
+
}
|
|
2271
|
+
/*** Extended components (has dependencies) */
|
|
2272
2272
|
@layer components.extended {
|
|
2273
2273
|
:where([role="group"].button-group) {
|
|
2274
2274
|
--_border-radius: var(--button-border-radius);
|
|
@@ -2337,7 +2337,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
2337
2337
|
}
|
|
2338
2338
|
}
|
|
2339
2339
|
}
|
|
2340
|
-
}
|
|
2340
|
+
}
|
|
2341
2341
|
@layer components.extended {
|
|
2342
2342
|
:where(details) {
|
|
2343
2343
|
--_accordion-transition-time: 0.2s;
|
|
@@ -2509,7 +2509,7 @@ When you visibly want to hide an element but make it accessible for screen reade
|
|
|
2509
2509
|
}
|
|
2510
2510
|
}
|
|
2511
2511
|
}
|
|
2512
|
-
}
|
|
2512
|
+
}
|
|
2513
2513
|
@layer components.extended {
|
|
2514
2514
|
/*
|
|
2515
2515
|
Lists meant to be used stand-alone or as part of Select elements
|
|
@@ -2826,7 +2826,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
2826
2826
|
}
|
|
2827
2827
|
}
|
|
2828
2828
|
}
|
|
2829
|
-
}
|
|
2829
|
+
}
|
|
2830
2830
|
@layer components.extended {
|
|
2831
2831
|
:where(.alert) {
|
|
2832
2832
|
--_bg-color: var(--surface-tonal);
|
|
@@ -2911,7 +2911,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
2911
2911
|
}
|
|
2912
2912
|
}
|
|
2913
2913
|
}
|
|
2914
|
-
}
|
|
2914
|
+
}
|
|
2915
2915
|
@layer components.extended {
|
|
2916
2916
|
:where(dialog) {
|
|
2917
2917
|
margin-block-start: 15%; /* vertical alignment */
|
|
@@ -2970,7 +2970,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
2970
2970
|
:where(html:has(dialog[open])) {
|
|
2971
2971
|
overflow: hidden;
|
|
2972
2972
|
}
|
|
2973
|
-
}
|
|
2973
|
+
}
|
|
2974
2974
|
@layer components.extended {
|
|
2975
2975
|
:where(.snackbar) {
|
|
2976
2976
|
align-items: center;
|
|
@@ -3118,7 +3118,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
3118
3118
|
}
|
|
3119
3119
|
}
|
|
3120
3120
|
}
|
|
3121
|
-
}
|
|
3121
|
+
}
|
|
3122
3122
|
@layer components.extended {
|
|
3123
3123
|
/* Common styling for checkbox, radio and switch groups */
|
|
3124
3124
|
:where(fieldset.field-group) {
|
|
@@ -3201,7 +3201,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
3201
3201
|
}
|
|
3202
3202
|
}
|
|
3203
3203
|
}
|
|
3204
|
-
}
|
|
3204
|
+
}
|
|
3205
3205
|
@layer components.extended {
|
|
3206
3206
|
/*
|
|
3207
3207
|
- Common styling for input, textarea and select
|
|
@@ -3695,7 +3695,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
3695
3695
|
}
|
|
3696
3696
|
}
|
|
3697
3697
|
}
|
|
3698
|
-
}
|
|
3698
|
+
}
|
|
3699
3699
|
@layer components.extended {
|
|
3700
3700
|
:where(.field > select) {
|
|
3701
3701
|
position: relative;
|
|
@@ -3858,7 +3858,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
3858
3858
|
::picker(select) {
|
|
3859
3859
|
appearance: base-select;
|
|
3860
3860
|
}
|
|
3861
|
-
}
|
|
3861
|
+
}
|
|
3862
3862
|
@layer components.extended {
|
|
3863
3863
|
:where(
|
|
3864
3864
|
.field:has(
|
|
@@ -3915,7 +3915,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
3915
3915
|
translate: 0 -50%;
|
|
3916
3916
|
}
|
|
3917
3917
|
}
|
|
3918
|
-
}
|
|
3918
|
+
}
|
|
3919
3919
|
@layer components.extended {
|
|
3920
3920
|
:where(.field:has(textarea)) {
|
|
3921
3921
|
textarea {
|
|
@@ -3940,7 +3940,7 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
3940
3940
|
}
|
|
3941
3941
|
}
|
|
3942
3942
|
}
|
|
3943
|
-
}
|
|
3943
|
+
}
|
|
3944
3944
|
@layer components.extended {
|
|
3945
3945
|
@scope (.rich-text) to (.not-rich-text) {
|
|
3946
3946
|
a {
|
|
@@ -4150,6 +4150,6 @@ Lists meant to be used stand-alone or as part of Select elements
|
|
|
4150
4150
|
}
|
|
4151
4151
|
}
|
|
4152
4152
|
}
|
|
4153
|
-
}
|
|
4154
|
-
/* Theme (example) */
|
|
4153
|
+
}
|
|
4154
|
+
/* Theme (example) */
|
|
4155
4155
|
/* @import "./theme.css"; */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "opui-css",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -27,9 +27,8 @@
|
|
|
27
27
|
"shx": "^0.4.0"
|
|
28
28
|
},
|
|
29
29
|
"scripts": {
|
|
30
|
-
"build
|
|
30
|
+
"build": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css && postcss src/opui.css -o dist/ui.css && postcss src/open-props.css -o dist/op.css",
|
|
31
31
|
"clean": "pnpm exec shx rm -rf dist",
|
|
32
|
-
"dev
|
|
33
|
-
"build": "pnpm run build:css"
|
|
32
|
+
"dev": "pnpm run clean && pnpm exec shx mkdir -p dist && postcss src/main.css -o dist/op+ui.css -w & postcss src/opui.css -o dist/ui.css -w & postcss src/open-props.css -o dist/op.css -w"
|
|
34
33
|
}
|
|
35
34
|
}
|