Skip to content

Commit 87c4ade

Browse files
EvgenyOrekhovEvgenyOrekhov
committed
0.10.0
1 parent 404c9c8 commit 87c4ade

File tree

8 files changed

+143
-46
lines changed

8 files changed

+143
-46
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ See form example: [Bootstrap](https://jsfiddle.net/z16aknfh/3/) vs
3838
## Quick Start
3939

4040
```html
41-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.13" />
41+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.10.0" />
4242
```
4343

4444
## Browser compatibility

‎dist/holiday.css‎

Lines changed: 135 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -774,53 +774,150 @@ picture {
774774
:root {
775775
color-scheme: light dark;
776776

777-
--border-color: #dbdbdb;
778-
--border-hover-color: #b5b5b5;
779-
--background-color: #fff;
780-
--highlighted-background-color: #f5f5f5;
781-
--text-color: #363636;
782-
--danger-color: #f14668;
783-
--danger-text-color: #fff;
784-
--danger-hover-color: #f03a5f;
785-
--success-color: #48c774;
786-
--success-text-color: #fff;
787-
--success-hover-color: #3ec46d;
788-
--danger-text-background-color: #fde0e6;
789-
--success-text-background-color: #effaf3;
777+
/* Sizes */
790778
--border-radius: 0.25rem;
791779
--border-width: 1px;
792-
--code-text-color: #f14668;
793-
--code-background-color: #f5f5f5;
794-
--link-color: #3273dc;
795-
--link-visited-color: #b86bff;
796-
--link-hover-color: #363636;
797-
--link-active-color: #363636;
780+
781+
/* Public light mode colors */
782+
--light-border-color: #dbdbdb;
783+
--light-border-hover-color: #b5b5b5;
784+
--light-background-color: #fff;
785+
--light-highlighted-background-color: #f5f5f5;
786+
--light-text-color: #363636;
787+
--light-danger-color: #f14668;
788+
--light-danger-text-color: #fff;
789+
--light-danger-hover-color: #f03a5f;
790+
--light-success-color: #48c774;
791+
--light-success-text-color: #fff;
792+
--light-success-hover-color: #3ec46d;
793+
--light-danger-text-background-color: #fde0e6;
794+
--light-success-text-background-color: #effaf3;
795+
--light-code-text-color: #f14668;
796+
--light-code-background-color: #f5f5f5;
797+
--light-link-color: #3273dc;
798+
--light-link-visited-color: #b86bff;
799+
--light-link-hover-color: #363636;
800+
--light-link-active-color: #363636;
801+
802+
/* Public dark mode colors */
803+
--dark-border-color: #5f6267;
804+
--dark-border-hover-color: #bcbebd;
805+
--dark-background-color: #202124;
806+
--dark-highlighted-background-color: #292b2e;
807+
--dark-text-color: #fff;
808+
--dark-danger-color: #770018;
809+
--dark-danger-text-color: #fff;
810+
--dark-danger-hover-color: #6b0015;
811+
--dark-success-color: #006624;
812+
--dark-success-text-color: #fff;
813+
--dark-success-hover-color: #006122;
814+
--dark-danger-text-background-color: #770018;
815+
--dark-success-text-background-color: #006624;
816+
--dark-code-text-color: #f1a0b0;
817+
--dark-code-background-color: #292b2e;
818+
--dark-link-color: #90b3ed;
819+
--dark-link-visited-color: #cb93ff;
820+
--dark-link-hover-color: #fff;
821+
--dark-link-active-color: #fff;
822+
823+
/* Internal color variables */
824+
--border-color: var(--light-border-color);
825+
--border-hover-color: var(--light-border-hover-color);
826+
--background-color: var(--light-background-color);
827+
--highlighted-background-color: var(--light-highlighted-background-color);
828+
--text-color: var(--light-text-color);
829+
--danger-color: var(--light-danger-color);
830+
--danger-text-color: var(--light-danger-text-color);
831+
--danger-hover-color: var(--light-danger-hover-color);
832+
--success-color: var(--light-success-color);
833+
--success-text-color: var(--light-success-text-color);
834+
--success-hover-color: var(--light-success-hover-color);
835+
--danger-text-background-color: var(--light-danger-text-background-color);
836+
--success-text-background-color: var(--light-success-text-background-color);
837+
--code-text-color: var(--light-code-text-color);
838+
--code-background-color: var(--light-code-background-color);
839+
--link-color: var(--light-link-color);
840+
--link-visited-color: var(--light-link-visited-color);
841+
--link-hover-color: var(--light-link-hover-color);
842+
--link-active-color: var(--light-link-active-color);
798843
}
799844

800845
@media (prefers-color-scheme: dark) {
801846
:root {
802-
--border-color: #5f6267;
803-
--border-hover-color: #bcbebd;
804-
--background-color: #202124;
805-
--highlighted-background-color: #292b2e;
806-
--text-color: #fff;
807-
--danger-color: #770018;
808-
--danger-text-color: #fff;
809-
--danger-hover-color: #6b0015;
810-
--success-color: #006624;
811-
--success-text-color: #fff;
812-
--success-hover-color: #006122;
813-
--danger-text-background-color: #770018;
814-
--success-text-background-color: #006624;
815-
--code-text-color: #f1a0b0;
816-
--code-background-color: #292b2e;
817-
--link-color: #90b3ed;
818-
--link-visited-color: #cb93ff;
819-
--link-hover-color: #fff;
820-
--link-active-color: #fff;
847+
--border-color: var(--dark-border-color);
848+
--border-hover-color: var(--dark-border-hover-color);
849+
--background-color: var(--dark-background-color);
850+
--highlighted-background-color: var(--dark-highlighted-background-color);
851+
--text-color: var(--dark-text-color);
852+
--danger-color: var(--dark-danger-color);
853+
--danger-text-color: var(--dark-danger-text-color);
854+
--danger-hover-color: var(--dark-danger-hover-color);
855+
--success-color: var(--dark-success-color);
856+
--success-text-color: var(--dark-success-text-color);
857+
--success-hover-color: var(--dark-success-hover-color);
858+
--danger-text-background-color: var(--dark-danger-text-background-color);
859+
--success-text-background-color: var(--dark-success-text-background-color);
860+
--code-text-color: var(--dark-code-text-color);
861+
--code-background-color: var(--dark-code-background-color);
862+
--link-color: var(--dark-link-color);
863+
--link-visited-color: var(--dark-link-visited-color);
864+
--link-hover-color: var(--dark-link-hover-color);
865+
--link-active-color: var(--dark-link-active-color);
821866
}
822867
}
823868

869+
/* stylelint-disable-next-line selector-max-class */
870+
.holiday-css-light {
871+
color-scheme: light;
872+
873+
/* Same colors as for `:root` */
874+
--border-color: var(--light-border-color);
875+
--border-hover-color: var(--light-border-hover-color);
876+
--background-color: var(--light-background-color);
877+
--highlighted-background-color: var(--light-highlighted-background-color);
878+
--text-color: var(--light-text-color);
879+
--danger-color: var(--light-danger-color);
880+
--danger-text-color: var(--light-danger-text-color);
881+
--danger-hover-color: var(--light-danger-hover-color);
882+
--success-color: var(--light-success-color);
883+
--success-text-color: var(--light-success-text-color);
884+
--success-hover-color: var(--light-success-hover-color);
885+
--danger-text-background-color: var(--light-danger-text-background-color);
886+
--success-text-background-color: var(--light-success-text-background-color);
887+
--code-text-color: var(--light-code-text-color);
888+
--code-background-color: var(--light-code-background-color);
889+
--link-color: var(--light-link-color);
890+
--link-visited-color: var(--light-link-visited-color);
891+
--link-hover-color: var(--light-link-hover-color);
892+
--link-active-color: var(--light-link-active-color);
893+
}
894+
895+
/* stylelint-disable-next-line selector-max-class */
896+
.holiday-css-dark {
897+
color-scheme: dark;
898+
899+
/* Same colors as for `@media (prefers-color-scheme: dark)` */
900+
--border-color: var(--dark-border-color);
901+
--border-hover-color: var(--dark-border-hover-color);
902+
--background-color: var(--dark-background-color);
903+
--highlighted-background-color: var(--dark-highlighted-background-color);
904+
--text-color: var(--dark-text-color);
905+
--danger-color: var(--dark-danger-color);
906+
--danger-text-color: var(--dark-danger-text-color);
907+
--danger-hover-color: var(--dark-danger-hover-color);
908+
--success-color: var(--dark-success-color);
909+
--success-text-color: var(--dark-success-text-color);
910+
--success-hover-color: var(--dark-success-hover-color);
911+
--danger-text-background-color: var(--dark-danger-text-background-color);
912+
--success-text-background-color: var(--dark-success-text-background-color);
913+
--code-text-color: var(--dark-code-text-color);
914+
--code-background-color: var(--dark-code-background-color);
915+
--link-color: var(--dark-link-color);
916+
--link-visited-color: var(--dark-link-visited-color);
917+
--link-hover-color: var(--dark-link-hover-color);
918+
--link-active-color: var(--dark-link-active-color);
919+
}
920+
824921
input {
825922
border-radius: var(--border-radius);
826923
}

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "holiday.css",
3-
"version": "0.9.13",
3+
"version": "0.10.0",
44
"description": "A classless CSS theme",
55
"main": "dist/holiday.css",
66
"style": "dist/holiday.css",

‎site/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Or you can use it as a base and build upon it.
2222
Just add this to your `<head>`:
2323

2424
```html
25-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.13" />
25+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.10.0" />
2626
```
2727

2828
## What makes holiday.css different

‎site/_includes/layout.liquid‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
99
<link
1010
rel="stylesheet"
11-
href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.13"
11+
href="https://cdn.jsdelivr.net/npm/holiday.css@0.10.0"
1212
/>
1313
<link
1414
rel="stylesheet"

‎site/template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link
99
rel="stylesheet"
10-
href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.13"
10+
href="https://cdn.jsdelivr.net/npm/holiday.css@0.10.0"
1111
/>
1212
</head>
1313

‎site/usage.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ layout: layout
88
Have an existing web page? Add this to your `<head>`:
99

1010
```html
11-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.9.13" />
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holiday.css@0.10.0" />
1212
```
1313

1414
Starting afresh? Use [Quickstart Template]({{ "/template/" | url }}).

0 commit comments

Comments
 (0)