diff --git a/demo/partials/forms.html b/demo/partials/forms.html index d24d679..68737f9 100644 --- a/demo/partials/forms.html +++ b/demo/partials/forms.html @@ -28,6 +28,55 @@ +
+
+ +
Looks good
+
+ +
+ +
Check before publishing
+
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+
+ Fieldset +
+
+ +
+
+ +
+
+
+
+ +
+ +
+ +
+ +
+
diff --git a/demo/partials/typography.html b/demo/partials/typography.html index af903e7..1b3a084 100644 --- a/demo/partials/typography.html +++ b/demo/partials/typography.html @@ -10,9 +10,15 @@

Heading H2

Heading H3

Heading H4

+
Heading H5
+
Heading H6
+ System label +

+ Lead text выделяет вводный абзац, описание страницы или важный контекст перед набором действий. +

Основной текст интерфейса. Используется для контента.

@@ -22,12 +28,29 @@

Приглушённый текст, подсказки.

+

+ Caption text для технических подписей, footnote и compact metadata. +

- - console.log("IBM Plex Mono"); - +

+ Состояния текста: + success, + warning, + danger, + info. +

+

+ Inline code npm run build и keyboard hint esc. +

+
+ +
+
+ Интерфейс должен оставаться читаемым даже в плотных технических сценариях. + GNexus UI Kit +
@@ -36,8 +59,11 @@ 
<h1 class="contrast">Dashboard</h1>
+<span class="eyebrow">System label</span>
+<p class="text-lead">Вводный текст страницы.</p>
 <p class="text-primary">Основной текст интерфейса.</p>
 <p class="text-muted">Приглушённая подсказка.</p>
-<code class="code">console.log("GNexus")</code>
+<code class="code">npm run build</code> +<span class="kbd">esc</span> diff --git a/src/scss/_demo-layout.scss b/src/scss/_demo-layout.scss index 4ff5a95..f8a07ce 100644 --- a/src/scss/_demo-layout.scss +++ b/src/scss/_demo-layout.scss @@ -15,10 +15,29 @@ .docs-sidebar { position: sticky; top: $space-5; + max-height: calc(100vh - #{$space-10}); + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-width: thin; + scrollbar-color: $color-secondary $surface-panel; + + &::-webkit-scrollbar { + width: 8px; + } + + &::-webkit-scrollbar-track { + background: $surface-panel; + } + + &::-webkit-scrollbar-thumb { + background: $color-secondary; + } @include media_down("xl") { position: relative; top: 0; + max-height: none; + overflow-y: visible; } .docs-sidebar-title { diff --git a/src/scss/components/_forms.scss b/src/scss/components/_forms.scss index a0ecf8b..59dad21 100644 --- a/src/scss/components/_forms.scss +++ b/src/scss/components/_forms.scss @@ -57,6 +57,20 @@ background-color: transparent; } + &:disabled { + color: $color-text-dark; + border-color: $border-color-muted; + background: $surface-panel; + cursor: not-allowed; + opacity: 0.72; + } + + &[readonly] { + color: $color-text-medium; + border-color: $border-color-muted; + background: rgba($color-text-light, 0.03); + } + &::placeholder { color: $color-text-dark; } @@ -130,6 +144,26 @@ color: $color-warning; } } + + &.success { + .input:not(:focus) { + border-color: $color-success; + } + + & + .input-info { + color: $color-success; + } + } + + &.warning { + .input:not(:focus) { + border-color: $color-warning; + } + + & + .input-info { + color: $color-warning; + } + } } .input-info { @@ -147,6 +181,122 @@ } } +.form-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: $space-4; + width: 100%; + max-width: 760px; +} + +.fieldset { + width: 100%; + max-width: 760px; + margin: 0; + padding: $space-5; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + background: $surface-panel-muted; +} + +.legend { + padding: $space-1 $space-2; + color: $color-black; + background: $color-primary; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + line-height: $line-height-base; + text-transform: uppercase; +} + +.file-upload { + display: inline-flex; + align-items: center; + gap: $space-2; + min-height: $control-height-md; + padding: $space-2 $space-3; + border: $border-width-base solid $color-secondary; + border-left-width: $border-width-accent; + color: $color-secondary; + background: $surface-panel-muted; + font-size: $font-size-sm; + font-weight: $font-weight-bold; + text-transform: uppercase; + cursor: pointer; + transition-duration: $motion-base; + transition-timing-function: $motion-ease; + transition-property: color, background, border-color; + + input[type="file"] { + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + white-space: nowrap; + } + + @include hover_touch { + color: $color-black; + background: $color-secondary; + } + + &:focus-within { + @include focus_ring; + } +} + +.range { + width: 100%; + max-width: 600px; + accent-color: $color-secondary; + + input[type="range"] { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: $control-height-md; + margin: 0; + background: transparent; + cursor: pointer; + } + + input[type="range"]::-webkit-slider-runnable-track { + height: $border-width-accent; + background: $surface-panel-strong; + border: $border-width-base solid $border-color-muted; + } + + input[type="range"]::-webkit-slider-thumb { + width: $control-choice-size; + height: $control-height-sm; + margin-top: calc(-#{$control-height-sm} / 2); + border: $border-width-base solid $color-secondary; + background: $color-secondary; + -webkit-appearance: none; + } + + input[type="range"]::-moz-range-track { + height: $border-width-accent; + background: $surface-panel-strong; + border: $border-width-base solid $border-color-muted; + } + + input[type="range"]::-moz-range-thumb { + width: $control-choice-size; + height: $control-height-sm; + border: $border-width-base solid $color-secondary; + border-radius: 0; + background: $color-secondary; + } +} + +@include media_down("md") { + .form-grid { + grid-template-columns: 1fr; + } +} + .radio { display: inline-flex; flex-direction: row; diff --git a/src/scss/components/_typography.scss b/src/scss/components/_typography.scss index 2de7edd..e37ed85 100644 --- a/src/scss/components/_typography.scss +++ b/src/scss/components/_typography.scss @@ -138,6 +138,14 @@ line-height: $line-height-relaxed; } +.text-lead { + max-width: 760px; + color: $color-text-light; + font-size: $font-size-lg; + font-weight: $font-weight-medium; + line-height: $line-height-relaxed; +} + .text-muted { font-size: $font-size-sm; color: $color-text-dark; @@ -157,6 +165,42 @@ font-style: italic; } +.text-success { + color: $color-success; +} + +.text-warning { + color: $color-warning; +} + +.text-danger, +.text-error { + color: $color-error; +} + +.text-info { + color: $color-info; +} + +.eyebrow { + display: inline-flex; + width: max-content; + max-width: 100%; + padding: $space-1 $space-2; + color: $color-black; + background: $color-secondary; + font-size: $font-size-xs; + font-weight: $font-weight-bold; + line-height: $line-height-base; + text-transform: uppercase; +} + +.caption { + color: $color-text-dark; + font-size: $font-size-xs; + line-height: $line-height-normal; +} + /* ========================= CODE / MONO ========================= */ @@ -190,6 +234,50 @@ -moz-tab-size: 2; } +.code { + display: inline-flex; + padding: 0 $space-1; + color: $color-secondary; + border: $border-width-base solid rgba($color-secondary, 0.24); +} + +.kbd { + display: inline-flex; + align-items: center; + min-height: 24px; + padding: 0 $space-2; + border: $border-width-base solid $border-color-muted; + border-bottom-color: $color-secondary; + color: $color-text-light; + background: $surface-panel-muted; + font-family: $font-family-code; + font-size: $font-size-xs; + font-weight: $font-weight-bold; + line-height: $line-height-base; + text-transform: uppercase; +} + +.quote { + max-width: 760px; + margin: 0; + padding: $space-4; + border: $border-width-base solid $border-color-muted; + border-left-width: $border-width-accent; + color: $color-text-medium; + background: $surface-panel-muted; + font-size: $font-size-base; + line-height: $line-height-relaxed; + + cite { + display: block; + margin-top: $space-3; + color: $color-secondary; + font-size: $font-size-sm; + font-style: normal; + text-transform: uppercase; + } +} + /* ========================= LINKS ========================= */