Avatar, Badge, Checkbox, Chips, Pagination components (#10)

This commit is contained in:
Geometrically
2023-03-01 17:31:48 -07:00
committed by GitHub
parent 76c0432f96
commit d5785e87e8
32 changed files with 1112 additions and 53 deletions

View File

@@ -17,7 +17,8 @@ html {
--radius-max: 999999999px;
}
.light-mode, .light {
.light-mode,
.light {
--color-bg: #e5e7eb;
--color-raised-bg: #ffffff;
--color-button-bg: hsl(220, 13%, 91%);
@@ -34,9 +35,24 @@ html {
--color-gray: #595b61;
--color-brand: var(--color-green);
--color-brand-highlight: rgba(0, 175, 92, 0.25);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
--shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;
}
.dark-mode, .dark {
.dark-mode,
.dark {
--color-bg: #16181c;
--color-raised-bg: #26292f;
--color-button-bg: hsl(222, 13%, 30%);
@@ -53,6 +69,18 @@ html {
--color-gray: #9fa4b3;
--color-brand: var(--color-green);
--color-brand-highlight: rgba(27, 217, 106, 0.25);
--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);
--shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05);
--shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25);
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;
}
.oled-mode {