shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Migrate site controls to Nebula design system
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-29 09:16:58 +02:00
parent e3d0925eb1
commit 817e21567b
127 changed files with 5380 additions and 2363 deletions
Download patch file Download diff file Expand all files Collapse all files

1091
website/src/styles/design-system/_attributes.scss Normal file
View file

File diff suppressed because it is too large Load diff

1693
website/src/styles/design-system/_controls.scss Normal file
View file

File diff suppressed because it is too large Load diff

116
website/src/styles/design-system/_interactive-controls.scss Normal file
View file

@ -0,0 +1,116 @@
// Rôle : complète le catalogue dev avec les helpers de présentation non publics.
@use "controls";
.design-system-page {
.nds-control-row,
.nds-field {
display: grid;
gap: 6px;
min-width: 0;
}
.nds-field {
width: 100%;
}
.nds-label,
.nds-checkbox-label {
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-weight: 900;
text-transform: uppercase;
}
.design-system-spec-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
}
.design-system-spec-list div {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 4px;
padding: 3px 6px;
border: 1px solid rgba(165, 180, 252, 0.1);
border-radius: var(--radius-sm);
background: rgba(5, 7, 17, 0.28);
color: var(--color-text-muted);
font-size: 0.68rem;
font-weight: 800;
}
.design-system-spec-list dt,
.design-system-spec-list dd {
margin: 0;
}
.design-system-spec-list dt {
color: var(--color-accent-gold);
}
.nds-checkbox-label {
display: inline-flex;
align-items: center;
gap: 8px;
text-transform: none;
}
.nds-date-picker-preview {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 3px;
width: min(300px, 100%);
padding: 4px;
border: 1px solid rgba(150, 165, 205, 0.16);
border-radius: var(--radius-sm);
background: rgba(8, 11, 24, 0.98);
}
.nds-date-picker-preview button {
@include controls.date-picker-button;
}
.nds-date-picker-preview button:hover,
.nds-date-picker-preview button.active {
@include controls.date-picker-button-hover;
}
.nds-date-picker-preview button.is-outside {
opacity: 0.32;
}
.nds-date-picker-preview-day {
display: grid;
min-height: 22px;
place-items: center;
color: var(--color-text-muted);
font-size: 0.66rem;
font-weight: 900;
text-transform: uppercase;
}
.nds-scrollbox-content-wide {
display: inline-flex;
width: max-content;
min-width: 1280px;
gap: 10px;
}
.nds-scrollbox-content-wide span {
display: inline-flex;
min-width: 170px;
min-height: 42px;
align-items: center;
justify-content: center;
padding: 0 12px;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(21, 26, 48, 0.58);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: 800;
}
}