studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Update CSS: add new --rounded, --shadow and --color-black and --icon-chevron-single-down variables

Browse source
This commit is contained in:
Timothée Goguely 2024-09-10 18:06:59 +02:00
parent 34863a9adc
commit e5e8e5770c
3 changed files with 20 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/assets/css/src/0.2.variables.css
View file

@ -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;

4
src/assets/css/src/3.utilities.border.css
View file

@ -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) }
.rounded-xl { border-radius: var(--rounded-xl) }
.rounded-2xl { border-radius: var(--rounded-2xl) }
.rounded-full { border-radius: var(--rounded-gull) }

4
src/assets/css/src/3.utilities.icons.css
View file

@ -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)
}