studio-variable/geoproject-app
5
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

fonts & colors

Browse source
This commit is contained in:
Julie Blanc 2025-12-09 14:05:53 +01:00
parent 790eb7414e
commit 678698b55d
45 changed files with 792 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

11
public/assets/css/src/_buttons.scss
View file

@ -1,20 +1,21 @@
button {
cursor: pointer;
border: 1px solid var(--color-browngray-300);
color: var(--color-browngray-300);
border: 1px solid var(--color-interface-300);
color: var(--color-interface-300);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
&.active {
border: 1px solid #000;
color: #000;
border: 1px solid var(--color-interface-700);
color: var(--color-interface-700);
background-color: var(--color-interface-100);
}
&.tab {
&.active {
background-color: #000;
background-color: var(--color-txt);
color: #fff;
border: none;
}

162
public/assets/css/src/_fonts.scss Normal file
View file

@ -0,0 +1,162 @@
// DM Sans - Variable font (recommended)
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans[opsz,wght].woff2') format('woff2-variations');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2') format('woff2-variations');
font-weight: 100 1000;
font-style: italic;
font-display: swap;
}
// DM Sans - Static weights (fallback)
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DM Sans';
src: url('/assets/fonts/DMSans/DMSans-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}
// Inconsolata - Monospace font
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inconsolata';
src: url('/assets/fonts/Inconsolata/Inconsolata-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
font-display: swap;
}

12
public/assets/css/src/_forms.scss
View file

@ -1,9 +1,19 @@
select,
input[type="text"],
input[type="number"] {
background-color: var(--color-browngray-300);
background-color: white;
// border-radius: 4px;
min-height: 20px;
border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100);
font-family: var(--sans-serif);
}
.field--view-only {
opacity: 0.3;
}

23
public/assets/css/src/_text.scss
View file

@ -1,15 +1,10 @@
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
select,
figcaption,
label {
font-family: sans-serif;
body {
font-family: var(--sans-serif);
color: var(--color-txt);
}
// code,
// pre,
// .monospace {
// font-family: 'Inconsolata', monospace;
// }

77
public/assets/css/src/_variables.scss
View file

@ -1,9 +1,79 @@
:root {
--color-panel-bg: #e8e6e5;
--color-browngray-050: #f5f3f0;
--color-browngray-200: #d0c4ba;
--color-browngray-300: #b5a9a1;
--color-interface-050: #f5f5f5;
--color-interface-100: #e2e6ed;
--color-interface-200: #d7dce8;
--color-interface-300: #c0c4d1;
--color-interface-400: #bec4d4;
--color-interface-900: #3e414c;
// MARRON
--color-interface-050: #fcf7f4;
--color-interface-100: #f5eae4;
--color-interface-200: #e9d4c8;
--color-interface-300: #d8b7a6;
--color-interface-400: #c39986;
--color-interface-500: #ad826f;
--color-interface-600: #916b5b;
--color-interface-700: #755548;
--color-interface-800: #5c443a;
--color-interface-900: #46342b;
// BRONZE SUBTIL
--color-interface-050: #f5f0ed;
--color-interface-050: #f8f5f4;
--color-interface-100: #efe9e6;
--color-interface-200: #e0d5d0;
--color-interface-300: #cabbb5;
--color-interface-400: #b2a29c;
--color-interface-500: #998985;
--color-interface-600: #7f716e;
--color-interface-700: #675b58;
--color-interface-800: #5b4f4c;
--color-interface-900: #483c39;
// CHAMPAGNE
// --color-interface-050: #f9f6f4;
// --color-interface-100: #f2ebe6;
// --color-interface-200: #e6d8cf;
// --color-interface-300: #d4c2b7;
// --color-interface-400: #c2ac9d;
// --color-interface-500: #ac9383;
// --color-interface-600: #927a6a;
// --color-interface-700: #776356;
// --color-interface-800: #5e4e45;
// --color-interface-900: #473a32;
// GREY
// --color-interface-050: #f7f6f4;
// --color-interface-100: #eceae6;
// --color-interface-200: #dedbd6;
// --color-interface-300: #c9c5be;
// --color-interface-400: #b4afa7;
// --color-interface-500: #9d978f;
// --color-interface-600: #86817a;
// --color-interface-700: #6e6a63;
// --color-interface-800: #55534d;
// --color-interface-900: #3e3c37;
--color-txt: var(--color-interface-800);
--color-panel-bg: var(--color-interface-050);
--color-page-highlight: #ff8a50;
--color-purple: #7136ff;
@ -12,4 +82,7 @@
--space-xs: 0.5rem;
--curve: cubic-bezier(0.86, 0, 0.07, 1);
--sans-serif: 'DM Sans', sans-serif;
--mono: 'Inconsolata', monospace;
}

207
public/assets/css/style.css
View file

@ -1,3 +1,143 @@
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
font-weight: 100 1000;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2") format("woff2-variations");
font-weight: 100 1000;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "DM Sans";
src: url("/assets/fonts/DMSans/DMSans-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Thin.woff2") format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2") format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Light.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inconsolata";
src: url("/assets/fonts/Inconsolata/Inconsolata-Black.woff2") format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
}
body,
html {
padding: 0;
@ -26,31 +166,49 @@ button {
}
:root {
--color-panel-bg: #e8e6e5;
--color-browngray-050: #f5f3f0;
--color-browngray-200: #d0c4ba;
--color-browngray-300: #b5a9a1;
--color-interface-050: #f5f5f5;
--color-interface-100: #e2e6ed;
--color-interface-200: #d7dce8;
--color-interface-300: #c0c4d1;
--color-interface-400: #bec4d4;
--color-interface-900: #3e414c;
--color-interface-050: #fcf7f4;
--color-interface-100: #f5eae4;
--color-interface-200: #e9d4c8;
--color-interface-300: #d8b7a6;
--color-interface-400: #c39986;
--color-interface-500: #ad826f;
--color-interface-600: #916b5b;
--color-interface-700: #755548;
--color-interface-800: #5c443a;
--color-interface-900: #46342b;
--color-interface-050: #f5f0ed;
--color-interface-050: #f8f5f4;
--color-interface-100: #efe9e6;
--color-interface-200: #e0d5d0;
--color-interface-300: #cabbb5;
--color-interface-400: #b2a29c;
--color-interface-500: #998985;
--color-interface-600: #7f716e;
--color-interface-700: #675b58;
--color-interface-800: #5b4f4c;
--color-interface-900: #483c39;
--color-txt: var(--color-interface-800);
--color-panel-bg: var(--color-interface-050);
--color-page-highlight: #ff8a50;
--color-purple: #7136ff;
--border-radius: 0.2rem;
--space-xs: 0.5rem;
--curve: cubic-bezier(0.86, 0, 0.07, 1);
--sans-serif: "DM Sans", sans-serif;
--mono: "Inconsolata", monospace;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
input,
select,
figcaption,
label {
font-family: sans-serif;
body {
font-family: var(--sans-serif);
color: var(--color-txt);
}
/* PagedJS print styles */
@ -75,7 +233,11 @@ h2 {
select,
input[type=text],
input[type=number] {
background-color: var(--color-browngray-300);
background-color: white;
min-height: 20px;
border: 1px solid var(--color-interface-200);
background-color: var(--color-interface-100);
font-family: var(--sans-serif);
}
.field--view-only {
@ -183,18 +345,19 @@ input[type=number] {
button {
cursor: pointer;
border: 1px solid var(--color-browngray-300);
color: var(--color-browngray-300);
border: 1px solid var(--color-interface-300);
color: var(--color-interface-300);
background-color: var(--color-panel-bg);
border-radius: var(--border-radius);
padding: 0.1rem 0.3rem;
}
button.active {
border: 1px solid #000;
color: #000;
border: 1px solid var(--color-interface-700);
color: var(--color-interface-700);
background-color: var(--color-interface-100);
}
button.tab.active {
background-color: #000;
background-color: var(--color-txt);
color: #fff;
border: none;
}

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

1
public/assets/css/style.scss
View file

@ -1,3 +1,4 @@
@import "src/_fonts.scss";
@import "src/_reset.scss";
@import "src/_variables.scss";
@import "src/_text.scss";