opui-css 2.0.1 → 2.1.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 +5 -4
- package/dist/op.css +85 -0
- package/package.json +3 -3
- package/src/main.css +2 -10
- package/src/open-props.css +10 -0
package/dist/op+ui.css
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
@layer openprops, normalize, utils, theme, components.root, components.extended;
|
|
2
|
-
/*
|
|
3
|
-
|
|
4
|
-
*
|
|
5
|
-
*
|
|
2
|
+
/* Open Props imports */
|
|
3
|
+
/*
|
|
4
|
+
* Open Props
|
|
5
|
+
* Import as many props as you need here.
|
|
6
|
+
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
6
7
|
*/
|
|
7
8
|
@custom-media --motionOK (prefers-reduced-motion: no-preference);
|
|
8
9
|
@custom-media --motionNotOK (prefers-reduced-motion: reduce);
|
package/dist/op.css
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
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) {
|
|
73
|
+
--oklch-red: 25;
|
|
74
|
+
--oklch-pink: 350;
|
|
75
|
+
--oklch-purple: 310;
|
|
76
|
+
--oklch-violet: 290;
|
|
77
|
+
--oklch-indigo: 270;
|
|
78
|
+
--oklch-blue: 240;
|
|
79
|
+
--oklch-cyan: 210;
|
|
80
|
+
--oklch-teal: 185;
|
|
81
|
+
--oklch-green: 145;
|
|
82
|
+
--oklch-lime: 125;
|
|
83
|
+
--oklch-yellow: 100;
|
|
84
|
+
--oklch-orange: 75;
|
|
85
|
+
}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "opui-css",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"shx": "^0.4.0"
|
|
28
28
|
},
|
|
29
29
|
"scripts": {
|
|
30
|
-
"build:css": "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",
|
|
30
|
+
"build:css": "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:css": "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",
|
|
32
|
+
"dev:css": "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",
|
|
33
33
|
"build": "pnpm run build:css"
|
|
34
34
|
}
|
|
35
35
|
}
|
package/src/main.css
CHANGED
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
/*
|
|
2
|
-
|
|
3
|
-
* Import as many props as you need here.
|
|
4
|
-
* https://unpkg.com/browse/open-props@2.0.0-beta.5/css
|
|
5
|
-
*/
|
|
6
|
-
@import "open-props/css/media-queries.css";
|
|
7
|
-
@import "open-props/index.css" layer(openprops);
|
|
8
|
-
@import "open-props/css/sizes/media.css" layer(openprops);
|
|
9
|
-
@import "open-props/css/font/lineheight.css" layer(openprops);
|
|
10
|
-
@import "open-props/css/color/hues.oklch.css" layer(openprops);
|
|
1
|
+
/* Open Props imports */
|
|
2
|
+
@import "./open-props.css";
|
|
11
3
|
|
|
12
4
|
/* OPUI Core */
|
|
13
5
|
@import "./opui.css";
|
|
@@ -0,0 +1,10 @@
|
|
|
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
|
+
@import "open-props/css/media-queries.css";
|
|
7
|
+
@import "open-props/index.css" layer(openprops);
|
|
8
|
+
@import "open-props/css/sizes/media.css" layer(openprops);
|
|
9
|
+
@import "open-props/css/font/lineheight.css" layer(openprops);
|
|
10
|
+
@import "open-props/css/color/hues.oklch.css" layer(openprops);
|