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

Add Aniimo guides and link game cards to toolbox checklists
Some checks failed
Deploy Sokko G / deploy (push) Failing after 3s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-23 20:05:19 +02:00
parent f0797ccf14
commit 13434f72f6
278 changed files with 10025 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
// Rôle : assemble l'API publique NDS par classes de famille et attributs data-*.
@use "attributes/fields";
@use "attributes/ranges";
@use "attributes/buttons";
@use "attributes/steppers";
@use "attributes/switches";

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

@ -1,5 +1,6 @@
// Rôle : expose les mixins publics des contrôles interactifs.
@forward "controls/fields";
@forward "controls/ranges";
@forward "controls/buttons";
@forward "controls/steppers";
@forward "controls/switches";

46
website/src/styles/design-system/_surfaces.scss
View file

@ -29,3 +29,49 @@
@mixin card-cover-divider {
border-bottom: 1px solid rgba(246, 196, 83, 0.42);
}
@mixin flip-card-inner {
transform-style: preserve-3d;
transition: transform 420ms var(--ease-standard);
}
@mixin flip-card-indicator {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid rgba(165, 180, 252, 0.12);
border-radius: var(--radius-md);
background: rgba(7, 10, 24, 0.36);
color: var(--color-text-muted);
box-shadow: none;
opacity: 0.78;
transition:
border-color var(--duration-fast) var(--ease-standard),
background-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
opacity var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
@mixin flip-card-indicator-hover {
border-color: rgba(196, 181, 253, 0.22);
background: rgba(16, 20, 38, 0.52);
color: #c4b5fd;
opacity: 1;
box-shadow: 0 0 12px rgba(139, 92, 246, 0.1);
}
@mixin flip-card-face-hover {
@include card-surface-hover(
rgba(16, 20, 38, 0.95),
rgba(139, 92, 246, 0.76),
rgba(196, 181, 253, 0.58),
0 0 14px rgba(139, 92, 246, 0.14),
0 0 24px rgba(196, 181, 253, 0.08)
);
}

10
website/src/styles/design-system/attributes/_patterns.scss
View file

@ -99,9 +99,11 @@
}
.nds-chip[data-size="sm"] {
min-height: 34px;
padding: 5px 10px;
min-height: 30px;
padding: 4px 8px;
gap: 4px;
font-size: var(--font-size-xs);
> img, > .ui-icon { width: 16px; height: 16px; }
}
.nds-empty-state {
@ -128,6 +130,10 @@
@include controls.progress-pattern;
}
.nds-progress[data-size="sm"] {
@include controls.progress-pattern(sm);
}
.nds-progress > span,
.nds-progress-bar {
@include controls.progress-bar-pattern;

5
website/src/styles/design-system/attributes/_ranges.scss Normal file
View file

@ -0,0 +1,5 @@
// Rôle : expose la primitive publique nds-range en tailles md et sm.
@use "../controls";
.nds-range { @include controls.range-control; }
.nds-range[data-size="sm"] { @include controls.range-control(sm); }

2
website/src/styles/design-system/attributes/_states.scss
View file

@ -31,6 +31,7 @@
white-space: nowrap;
}
.nds-range:focus-visible,
.nds-input:focus-visible,
.nds-time:focus-visible,
.nds-select:focus-visible,
@ -49,6 +50,7 @@
outline-offset: 3px;
}
.nds-range:disabled,
.nds-button:disabled,
.nds-icon-button:disabled,
.nds-quantity-stepper button:disabled,

5
website/src/styles/design-system/controls/_patterns.scss
View file

@ -205,10 +205,11 @@
}
}
@mixin progress-pattern {
@mixin progress-pattern($size: md) {
display: block;
width: 100%;
height: 8px;
height: var(--space-2);
@if $size == sm { height: calc(var(--space-2) / 2); }
overflow: hidden;
border: 1px solid rgba(165, 180, 252, 0.1);
border-radius: var(--radius-pill);

48
website/src/styles/design-system/controls/_ranges.scss Normal file
View file

@ -0,0 +1,48 @@
// Rôle : définit les curseurs natifs NDS et leurs tailles sans modifier leur comportement clavier.
@mixin range-track {
height: 6px;
border: 1px solid var(--color-border-hover);
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
}
@mixin range-thumb($size) {
box-sizing: border-box;
width: $size;
height: $size;
border: 2px solid var(--color-accent-gold);
border-radius: 50%;
background: var(--color-primary);
}
@mixin range-control($size: md) {
$thumb: 20px;
$height: 44px;
@if $size == sm {
$thumb: 18px;
$height: 36px;
}
appearance: none;
display: block;
width: 100%;
min-width: 0;
height: $height;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
accent-color: var(--color-primary);
&::-webkit-slider-runnable-track { @include range-track; }
&::-moz-range-track { @include range-track; }
&::-webkit-slider-thumb {
@include range-thumb($thumb);
appearance: none;
margin-top: calc((4px - #{$thumb}) / 2);
}
&::-moz-range-thumb { @include range-thumb($thumb); }
&:hover:not(:disabled)::-webkit-slider-thumb { background: var(--color-primary-hover); }
&:hover:not(:disabled)::-moz-range-thumb { background: var(--color-primary-hover); }
}