diff --git a/src/assets/css/src/0.2.variables.css b/src/assets/css/src/0.2.variables.css index 1097e7b..b671e34 100755 --- a/src/assets/css/src/0.2.variables.css +++ b/src/assets/css/src/0.2.variables.css @@ -17,7 +17,10 @@ --color-grey-300: hsla(0, 0%, 74%, 1); --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */ --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */ - --color-black: hsla(0, 0%, 10%, 1); /* Black */ + --color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */ + --color-black-20: hsla(0, 0%, 10%, .2); /* Black 20 */ + --color-black-100: hsla(0, 0%, 10%, 1); /* Black 100 */ + --color-black: var(--color-black-100); /* Black */ --color-primary-10: hsla(177, 100%, 29%, .1); /* Focus 10% */ --color-primary-20: hsla(177, 100%, 29%, .2); /* Focus 20% */ --color-primary-40: hsla(177, 100%, 29%, .4); /* Focus 40% */ @@ -58,6 +61,7 @@ /* Tracking */ --tracking-wide: 0.01em; + --tracking-wider: 0.02em; /* Layout */ --gutter: 32px; @@ -70,12 +74,17 @@ /* Borders */ --rounded-xs: 1px; --rounded-sm: 4px; - --rounded-md: 12px; - --rounded-lg: 20px; + --rounded-md: 8px; + --rounded-lg: 12px; + --rounded-xl: 16px; + --rounded-2xl: 20px; --rounded-full: 9999px; --border-width: 1px; --border-color: var(--color-black); - --border: var(--border-width) solid var(--border-color); + --border: var(--border-width) solid var(--border-color); + + /* Shadows */ + --shadow: 0px 4px 20px 0px var(--color-black-10); /* Prose */ --max-width: 64ch; diff --git a/src/assets/css/src/3.utilities.border.css b/src/assets/css/src/3.utilities.border.css index a48c24e..bc6d241 100644 --- a/src/assets/css/src/3.utilities.border.css +++ b/src/assets/css/src/3.utilities.border.css @@ -14,4 +14,6 @@ .rounded-sm { border-radius: var(--rounded-sm) } .rounded-md { border-radius: var(--rounded-md) } .rounded-lg { border-radius: var(--rounded-lg) } -.rounded-full { border-radius: var(--rounded-gull) } \ No newline at end of file +.rounded-xl { border-radius: var(--rounded-xl) } +.rounded-2xl { border-radius: var(--rounded-2xl) } +.rounded-full { border-radius: var(--rounded-gull) } diff --git a/src/assets/css/src/3.utilities.icons.css b/src/assets/css/src/3.utilities.icons.css index b07ce3b..2a3897c 100644 --- a/src/assets/css/src/3.utilities.icons.css +++ b/src/assets/css/src/3.utilities.icons.css @@ -15,6 +15,7 @@ --icon-logout: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.125 15.125V17.625C13.125 17.9565 12.9933 18.2745 12.7589 18.5089C12.5245 18.7433 12.2065 18.875 11.875 18.875H3.125C2.79348 18.875 2.47554 18.7433 2.24112 18.5089C2.0067 18.2745 1.875 17.9565 1.875 17.625V3.875C1.875 3.54348 2.0067 3.22554 2.24112 2.99112C2.47554 2.7567 2.79348 2.625 3.125 2.625H11.875C12.2065 2.625 12.5245 2.7567 12.7589 2.99112C12.9933 3.22554 13.125 3.54348 13.125 3.875V6.375M9.375 10.75H18.125M18.125 10.75L15.625 8.25M18.125 10.75L15.625 13.25' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-summary: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='%235E6060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); --icon-favorite: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.8126L3.1 10.5626C-0.649996 6.81262 4.8625 -0.387383 10 5.43762C15.1375 -0.387383 20.625 6.83762 16.9 10.5626L10 16.8126Z' fill='currentColor'/%3E%3C/svg%3E%0A"); + --icon-chevron-single-down: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.875 6.0625L9.5625 13.75C9.61861 13.8098 9.68638 13.8574 9.76163 13.89C9.83688 13.9226 9.918 13.9394 10 13.9394C10.082 13.9394 10.1631 13.9226 10.2384 13.89C10.3136 13.8574 10.3814 13.8098 10.4375 13.75L18.125 6.0625' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } [data-icon] { @@ -54,3 +55,6 @@ [data-icon="favorite"] { --icon: var(--icon-favorite) } +[data-icon="chevron-single-down"] { + --icon: var(--icon-chevron-single-down) +}