display updates

This commit is contained in:
Arnaud Delcasse
2025-12-18 09:44:23 +01:00
parent 702cbf67f1
commit 3f209fe461
9 changed files with 274 additions and 55 deletions

View File

@@ -13,7 +13,9 @@
--color-orange-50: oklch(0.98 0.016 73.684);
--color-orange-200: oklch(0.901 0.076 70.697);
--color-yellow-50: oklch(0.987 0.026 102.212);
--color-green-50: oklch(0.982 0.018 155.826);
--color-green-100: oklch(0.962 0.044 156.743);
--color-green-200: oklch(0.925 0.084 155.995);
--color-green-600: oklch(0.627 0.194 149.214);
--color-green-800: oklch(0.448 0.119 151.328);
--color-blue-50: oklch(0.97 0.014 254.604);
@@ -487,6 +489,9 @@
.mx-auto {
margin-inline: auto;
}
.-my-1 {
margin-block: calc(var(--spacing) * -1);
}
.-my-1\.5 {
margin-block: calc(var(--spacing) * -1.5);
}
@@ -511,6 +516,9 @@
.-mt-4 {
margin-top: calc(var(--spacing) * -4);
}
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
.mt-0\.5 {
margin-top: calc(var(--spacing) * 0.5);
}
@@ -538,6 +546,9 @@
.mt-10 {
margin-top: calc(var(--spacing) * 10);
}
.-mr-1 {
margin-right: calc(var(--spacing) * -1);
}
.-mr-1\.5 {
margin-right: calc(var(--spacing) * -1.5);
}
@@ -710,6 +721,9 @@
.h-3 {
height: calc(var(--spacing) * 3);
}
.h-3\.5 {
height: calc(var(--spacing) * 3.5);
}
.h-4 {
height: calc(var(--spacing) * 4);
}
@@ -743,6 +757,9 @@
.max-h-60 {
max-height: calc(var(--spacing) * 60);
}
.max-h-96 {
max-height: calc(var(--spacing) * 96);
}
.max-h-none {
max-height: none;
}
@@ -758,9 +775,15 @@
.min-h-screen {
min-height: 100vh;
}
.w-0 {
width: calc(var(--spacing) * 0);
}
.w-0\.5 {
width: calc(var(--spacing) * 0.5);
}
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\/2 {
width: calc(1/2 * 100%);
}
@@ -776,6 +799,9 @@
.w-3 {
width: calc(var(--spacing) * 3);
}
.w-3\.5 {
width: calc(var(--spacing) * 3.5);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
@@ -1747,6 +1773,12 @@
.border-co-blue {
border-color: var(--color-co-blue);
}
.border-co-green {
border-color: var(--color-co-green);
}
.border-co-green\/30 {
border-color: color-mix(in oklab, var(--color-co-green) 30%, transparent);
}
.border-co-lightblue {
border-color: var(--color-co-lightblue);
}
@@ -1762,6 +1794,9 @@
.border-gray-300 {
border-color: var(--color-gray-300);
}
.border-green-200 {
border-color: var(--color-green-200);
}
.border-indigo-500 {
border-color: var(--color-indigo-500);
}
@@ -1804,9 +1839,18 @@
.bg-co-blue {
background-color: var(--color-co-blue);
}
.bg-co-blue\/5 {
background-color: color-mix(in oklab, var(--color-co-blue) 5%, transparent);
}
.bg-co-green {
background-color: var(--color-co-green);
}
.bg-co-green\/10 {
background-color: color-mix(in oklab, var(--color-co-green) 10%, transparent);
}
.bg-co-green\/20 {
background-color: color-mix(in oklab, var(--color-co-green) 20%, transparent);
}
.bg-co-lightblue {
background-color: var(--color-co-lightblue);
}
@@ -1840,6 +1884,9 @@
.bg-gray-900 {
background-color: var(--color-gray-900);
}
.bg-green-50 {
background-color: var(--color-green-50);
}
.bg-green-100 {
background-color: var(--color-green-100);
}
@@ -1870,6 +1917,9 @@
.bg-white {
background-color: var(--color-white);
}
.bg-white\/20 {
background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
}
.bg-yellow-50 {
background-color: var(--color-yellow-50);
}
@@ -1881,6 +1931,10 @@
--tw-gradient-position: in oklab;
background-image: conic-gradient(var(--tw-gradient-stops));
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.bg-radial {
--tw-gradient-position: in oklab;
background-image: radial-gradient(var(--tw-gradient-stops));
@@ -1891,6 +1945,14 @@
.via-none {
--tw-gradient-via-stops: initial;
}
.from-co-blue {
--tw-gradient-from: var(--color-co-blue);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-blue-600 {
--tw-gradient-to: var(--color-blue-600);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.box-decoration-clone {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
@@ -2096,6 +2158,9 @@
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.py-0 {
padding-block: calc(var(--spacing) * 0);
}
.py-0\.5 {
padding-block: calc(var(--spacing) * 0.5);
}
@@ -2108,6 +2173,9 @@
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-2\.5 {
padding-block: calc(var(--spacing) * 2.5);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
@@ -2392,6 +2460,9 @@
.\[color\:red\]\/50\! {
color: color-mix(in oklab, red 50%, transparent) !important;
}
.text-blue-100 {
color: var(--color-blue-100);
}
.text-blue-800 {
color: var(--color-blue-800);
}
@@ -2443,6 +2514,9 @@
.text-white {
color: var(--color-white);
}
.text-white\/70 {
color: color-mix(in oklab, var(--color-white) 70%, transparent);
}
.capitalize {
text-transform: capitalize;
}
@@ -3040,6 +3114,13 @@
}
}
}
.hover\:border-gray-400 {
&:hover {
@media (hover: hover) {
border-color: var(--color-gray-400);
}
}
}
.hover\:bg-blue-700 {
&:hover {
@media (hover: hover) {
@@ -3054,6 +3135,13 @@
}
}
}
.hover\:bg-co-blue\/90 {
&:hover {
@media (hover: hover) {
background-color: color-mix(in oklab, var(--color-co-blue) 90%, transparent);
}
}
}
.hover\:bg-co-red {
&:hover {
@media (hover: hover) {
@@ -3110,6 +3198,20 @@
}
}
}
.hover\:text-co-green\/80 {
&:hover {
@media (hover: hover) {
color: color-mix(in oklab, var(--color-co-green) 80%, transparent);
}
}
}
.hover\:text-co-red\/80 {
&:hover {
@media (hover: hover) {
color: color-mix(in oklab, var(--color-co-red) 80%, transparent);
}
}
}
.hover\:text-gray-500 {
&:hover {
@media (hover: hover) {
@@ -3138,6 +3240,13 @@
}
}
}
.hover\:text-green-800 {
&:hover {
@media (hover: hover) {
color: var(--color-green-800);
}
}
}
.hover\:text-inherit {
&:hover {
@media (hover: hover) {
@@ -3234,6 +3343,11 @@
--tw-ring-color: var(--color-co-blue);
}
}
.focus\:ring-co-blue\/20 {
&:focus {
--tw-ring-color: color-mix(in oklab, var(--color-co-blue) 20%, transparent);
}
}
.focus\:ring-co-red {
&:focus {
--tw-ring-color: var(--color-co-red);
@@ -4066,6 +4180,48 @@
inherits: false;
initial-value: 0;
}
@property --tw-gradient-position {
syntax: "*";
inherits: false;
}
@property --tw-gradient-from {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-via {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-to {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-stops {
syntax: "*";
inherits: false;
}
@property --tw-gradient-via-stops {
syntax: "*";
inherits: false;
}
@property --tw-gradient-from-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-via-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 50%;
}
@property --tw-gradient-to-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}
@property --tw-leading {
syntax: "*";
inherits: false;