Skip to content

Commit 7a95e42

Browse files
committed
chore: added minimal set of void elements, made sure pico compiles
1 parent 241e3db commit 7a95e42

File tree

255 files changed

+6655
-5606
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

255 files changed

+6655
-5606
lines changed

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ Thumbs.db
3232

3333
# Pico
3434
.pico
35+
/tests

bin/console

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ $application->command('merge:specs', function ($input, OutputInterface $output)
1515
return (new MergeSpecifications())(null, $input, $output);
1616
})->descriptions('Merges the PicoCSS specifications into the HTML5 specifications from Extended HTMLDocument');
1717

18-
// $application->command('make:sass', function ($input, OutputInterface $output) {
19-
// return (new CreateSassForHtmlElements())($input, $output);
20-
// })->descriptions('Creates SASS files for all HTML elements based on the compiled PHP Element classes');
18+
$application->command('make:sass', function ($input, OutputInterface $output) {
19+
return (new CreateSassForHtmlElements())($input, $output);
20+
})->descriptions('Creates SASS files for all HTML elements based on the compiled PHP Element classes');
2121

2222
$application->run();

css/pico.amber.css

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -754,56 +754,6 @@ mark{
754754
::selection{
755755
background-color:var(--pico-text-selection-color);
756756
}
757-
:where(a:not([role=button])),
758-
[role=link]{
759-
--pico-color:var(--pico-primary);
760-
--pico-background-color:transparent;
761-
--pico-underline:var(--pico-primary-underline);
762-
outline:none;
763-
background-color:var(--pico-background-color);
764-
color:var(--pico-color);
765-
-webkit-text-decoration:var(--pico-text-decoration);
766-
text-decoration:var(--pico-text-decoration);
767-
text-decoration-color:var(--pico-underline);
768-
text-underline-offset:0.125em;
769-
transition:background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
770-
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
771-
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
772-
}
773-
:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
774-
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
775-
--pico-color:var(--pico-primary-hover);
776-
--pico-underline:var(--pico-primary-hover-underline);
777-
--pico-text-decoration:underline;
778-
}
779-
:where(a:not([role=button])):focus-visible,
780-
[role=link]:focus-visible{
781-
box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
782-
}
783-
:where(a:not([role=button])).secondary,
784-
[role=link].secondary{
785-
--pico-color:var(--pico-secondary);
786-
--pico-underline:var(--pico-secondary-underline);
787-
}
788-
:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
789-
[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
790-
--pico-color:var(--pico-secondary-hover);
791-
--pico-underline:var(--pico-secondary-hover-underline);
792-
}
793-
:where(a:not([role=button])).contrast,
794-
[role=link].contrast{
795-
--pico-color:var(--pico-contrast);
796-
--pico-underline:var(--pico-contrast-underline);
797-
}
798-
:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
799-
[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
800-
--pico-color:var(--pico-contrast-hover);
801-
--pico-underline:var(--pico-contrast-hover-underline);
802-
}
803-
804-
a[role=button]{
805-
display:inline-block;
806-
}
807757
button{
808758
margin:0;
809759
overflow:visible;
@@ -2454,14 +2404,6 @@ progress::-moz-progress-bar{
24542404
position:absolute;
24552405
}
24562406

2457-
a,
2458-
area,
2459-
button,
2460-
input,
2461-
label,
2462-
select,
2463-
summary,
2464-
textarea,
24652407
[tabindex]{
24662408
-ms-touch-action:manipulation;
24672409
}
@@ -2700,7 +2642,17 @@ ol{
27002642
font-style:normal;
27012643
font-weight:var(--pico-font-weight);
27022644
}
2703-
p,pre,table{
2645+
p,pre{
2646+
margin-top:0;
2647+
margin-bottom:var(--pico-typography-spacing-vertical);
2648+
color:var(--pico-color);
2649+
font-style:normal;
2650+
font-weight:var(--pico-font-weight);
2651+
}
2652+
summary{
2653+
-ms-touch-action:manipulation;
2654+
}
2655+
table{
27042656
margin-top:0;
27052657
margin-bottom:var(--pico-typography-spacing-vertical);
27062658
color:var(--pico-color);
@@ -2734,6 +2686,59 @@ address{
27342686
font-style:normal;
27352687
font-weight:var(--pico-font-weight);
27362688
}
2689+
:where(a:not([role=button])),
2690+
[role=link]{
2691+
--pico-color:var(--pico-primary);
2692+
--pico-background-color:transparent;
2693+
--pico-underline:var(--pico-primary-underline);
2694+
outline:none;
2695+
background-color:var(--pico-background-color);
2696+
color:var(--pico-color);
2697+
-webkit-text-decoration:var(--pico-text-decoration);
2698+
text-decoration:var(--pico-text-decoration);
2699+
text-decoration-color:var(--pico-underline);
2700+
text-underline-offset:0.125em;
2701+
transition:background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
2702+
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
2703+
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
2704+
}
2705+
:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
2706+
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
2707+
--pico-color:var(--pico-primary-hover);
2708+
--pico-underline:var(--pico-primary-hover-underline);
2709+
--pico-text-decoration:underline;
2710+
}
2711+
:where(a:not([role=button])):focus-visible,
2712+
[role=link]:focus-visible{
2713+
box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
2714+
}
2715+
:where(a:not([role=button])).secondary,
2716+
[role=link].secondary{
2717+
--pico-color:var(--pico-secondary);
2718+
--pico-underline:var(--pico-secondary-underline);
2719+
}
2720+
:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
2721+
[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
2722+
--pico-color:var(--pico-secondary-hover);
2723+
--pico-underline:var(--pico-secondary-hover-underline);
2724+
}
2725+
:where(a:not([role=button])).contrast,
2726+
[role=link].contrast{
2727+
--pico-color:var(--pico-contrast);
2728+
--pico-underline:var(--pico-contrast-underline);
2729+
}
2730+
:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
2731+
[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
2732+
--pico-color:var(--pico-contrast-hover);
2733+
--pico-underline:var(--pico-contrast-hover-underline);
2734+
}
2735+
2736+
a[role=button]{
2737+
display:inline-block;
2738+
}
2739+
a,button,input,label,select{
2740+
-ms-touch-action:manipulation;
2741+
}
27372742
:where(input, select, textarea, fieldset, .grid) + small{
27382743
display:block;
27392744
width:100%;
@@ -2746,4 +2751,7 @@ address{
27462751
}
27472752
:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small{
27482753
color:var(--pico-del-color);
2754+
}
2755+
textarea,area{
2756+
-ms-touch-action:manipulation;
27492757
}

css/pico.amber.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.blue.css

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -754,56 +754,6 @@ mark{
754754
::selection{
755755
background-color:var(--pico-text-selection-color);
756756
}
757-
:where(a:not([role=button])),
758-
[role=link]{
759-
--pico-color:var(--pico-primary);
760-
--pico-background-color:transparent;
761-
--pico-underline:var(--pico-primary-underline);
762-
outline:none;
763-
background-color:var(--pico-background-color);
764-
color:var(--pico-color);
765-
-webkit-text-decoration:var(--pico-text-decoration);
766-
text-decoration:var(--pico-text-decoration);
767-
text-decoration-color:var(--pico-underline);
768-
text-underline-offset:0.125em;
769-
transition:background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
770-
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
771-
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
772-
}
773-
:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
774-
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
775-
--pico-color:var(--pico-primary-hover);
776-
--pico-underline:var(--pico-primary-hover-underline);
777-
--pico-text-decoration:underline;
778-
}
779-
:where(a:not([role=button])):focus-visible,
780-
[role=link]:focus-visible{
781-
box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
782-
}
783-
:where(a:not([role=button])).secondary,
784-
[role=link].secondary{
785-
--pico-color:var(--pico-secondary);
786-
--pico-underline:var(--pico-secondary-underline);
787-
}
788-
:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
789-
[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
790-
--pico-color:var(--pico-secondary-hover);
791-
--pico-underline:var(--pico-secondary-hover-underline);
792-
}
793-
:where(a:not([role=button])).contrast,
794-
[role=link].contrast{
795-
--pico-color:var(--pico-contrast);
796-
--pico-underline:var(--pico-contrast-underline);
797-
}
798-
:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
799-
[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
800-
--pico-color:var(--pico-contrast-hover);
801-
--pico-underline:var(--pico-contrast-hover-underline);
802-
}
803-
804-
a[role=button]{
805-
display:inline-block;
806-
}
807757
button{
808758
margin:0;
809759
overflow:visible;
@@ -2454,14 +2404,6 @@ progress::-moz-progress-bar{
24542404
position:absolute;
24552405
}
24562406

2457-
a,
2458-
area,
2459-
button,
2460-
input,
2461-
label,
2462-
select,
2463-
summary,
2464-
textarea,
24652407
[tabindex]{
24662408
-ms-touch-action:manipulation;
24672409
}
@@ -2700,7 +2642,17 @@ ol{
27002642
font-style:normal;
27012643
font-weight:var(--pico-font-weight);
27022644
}
2703-
p,pre,table{
2645+
p,pre{
2646+
margin-top:0;
2647+
margin-bottom:var(--pico-typography-spacing-vertical);
2648+
color:var(--pico-color);
2649+
font-style:normal;
2650+
font-weight:var(--pico-font-weight);
2651+
}
2652+
summary{
2653+
-ms-touch-action:manipulation;
2654+
}
2655+
table{
27042656
margin-top:0;
27052657
margin-bottom:var(--pico-typography-spacing-vertical);
27062658
color:var(--pico-color);
@@ -2734,6 +2686,59 @@ address{
27342686
font-style:normal;
27352687
font-weight:var(--pico-font-weight);
27362688
}
2689+
:where(a:not([role=button])),
2690+
[role=link]{
2691+
--pico-color:var(--pico-primary);
2692+
--pico-background-color:transparent;
2693+
--pico-underline:var(--pico-primary-underline);
2694+
outline:none;
2695+
background-color:var(--pico-background-color);
2696+
color:var(--pico-color);
2697+
-webkit-text-decoration:var(--pico-text-decoration);
2698+
text-decoration:var(--pico-text-decoration);
2699+
text-decoration-color:var(--pico-underline);
2700+
text-underline-offset:0.125em;
2701+
transition:background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
2702+
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
2703+
transition:background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
2704+
}
2705+
:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
2706+
[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
2707+
--pico-color:var(--pico-primary-hover);
2708+
--pico-underline:var(--pico-primary-hover-underline);
2709+
--pico-text-decoration:underline;
2710+
}
2711+
:where(a:not([role=button])):focus-visible,
2712+
[role=link]:focus-visible{
2713+
box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
2714+
}
2715+
:where(a:not([role=button])).secondary,
2716+
[role=link].secondary{
2717+
--pico-color:var(--pico-secondary);
2718+
--pico-underline:var(--pico-secondary-underline);
2719+
}
2720+
:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
2721+
[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
2722+
--pico-color:var(--pico-secondary-hover);
2723+
--pico-underline:var(--pico-secondary-hover-underline);
2724+
}
2725+
:where(a:not([role=button])).contrast,
2726+
[role=link].contrast{
2727+
--pico-color:var(--pico-contrast);
2728+
--pico-underline:var(--pico-contrast-underline);
2729+
}
2730+
:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
2731+
[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus){
2732+
--pico-color:var(--pico-contrast-hover);
2733+
--pico-underline:var(--pico-contrast-hover-underline);
2734+
}
2735+
2736+
a[role=button]{
2737+
display:inline-block;
2738+
}
2739+
a,button,input,label,select{
2740+
-ms-touch-action:manipulation;
2741+
}
27372742
:where(input, select, textarea, fieldset, .grid) + small{
27382743
display:block;
27392744
width:100%;
@@ -2746,4 +2751,7 @@ address{
27462751
}
27472752
:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small{
27482753
color:var(--pico-del-color);
2754+
}
2755+
textarea,area{
2756+
-ms-touch-action:manipulation;
27492757
}

css/pico.blue.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)