Add comprehensive component library and demo application
Added extensive component library with feedback components (empty state, loading spinner, skeleton loader), enhanced form components (autocomplete, date picker, file upload, form field, time picker), navigation components (pagination), and overlay components (backdrop, drawer, modal, overlay container). Updated demo application with comprehensive showcase components and enhanced styling throughout the project. Excluded font files from repository to reduce size. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
81
projects/demo-ui-essentials/src/scss/_variables.scss
Normal file
81
projects/demo-ui-essentials/src/scss/_variables.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
// ==========================================================================
|
||||
// SKYUI PROJECT VARIABLES
|
||||
// ==========================================================================
|
||||
// Project-specific variable overrides that build upon the shared-ui token system
|
||||
// Import order: base tokens → semantic tokens → project overrides
|
||||
// NOTE: Semantic tokens are imported in styles.scss and available here
|
||||
// ==========================================================================
|
||||
|
||||
// ==========================================================================
|
||||
// FONT FAMILY OVERRIDES
|
||||
// ==========================================================================
|
||||
// Override base font families to use Comfortaa
|
||||
$base-typography-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
$base-typography-font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
|
||||
@import '../../../shared-ui/src/styles/semantic';
|
||||
|
||||
// These overrides will cascade through all semantic typography tokens
|
||||
// that use $base-typography-font-family-sans and $base-typography-font-family-display
|
||||
|
||||
// ==========================================================================
|
||||
// PROJECT-SPECIFIC OVERRIDES
|
||||
// ==========================================================================
|
||||
// Custom values that override semantic tokens for SkyUI project needs
|
||||
// Use semantic tokens as base values to maintain design system consistency
|
||||
|
||||
// BRAND CUSTOMIZATION
|
||||
// Override brand colors while maintaining semantic structure
|
||||
$skyui-brand-primary: $semantic-color-brand-primary !default;
|
||||
$skyui-brand-secondary: $semantic-color-brand-secondary !default;
|
||||
$skyui-brand-accent: $semantic-color-brand-tertiary !default;
|
||||
|
||||
// SURFACE CUSTOMIZATION
|
||||
// Project-specific surface treatments
|
||||
$skyui-surface-elevated: $semantic-color-surface-elevated !default;
|
||||
$skyui-surface-sunken: $semantic-color-surface-sunken !default;
|
||||
$skyui-surface-interactive: $semantic-color-surface-interactive !default;
|
||||
|
||||
// TYPOGRAPHY SCALE ADJUSTMENTS
|
||||
// Semantic typography tokens can be overridden for project-specific needs
|
||||
$skyui-heading-display: $semantic-typography-heading-display !default;
|
||||
$skyui-heading-h1: $semantic-typography-heading-h1 !default;
|
||||
$skyui-heading-h2: $semantic-typography-heading-h2 !default;
|
||||
$skyui-body-large: $semantic-typography-body-large !default;
|
||||
$skyui-body-medium: $semantic-typography-body-medium !default;
|
||||
|
||||
// SPACING CUSTOMIZATION
|
||||
// Build on semantic spacing tokens
|
||||
$skyui-space-component: $semantic-spacing-component-md !default;
|
||||
$skyui-space-layout: $semantic-spacing-layout-lg !default;
|
||||
$skyui-space-section: $semantic-spacing-section-xl !default;
|
||||
|
||||
// INTERACTIVE ELEMENTS
|
||||
// Button and form element customizations
|
||||
$skyui-interactive-primary: $semantic-color-interactive-primary !default;
|
||||
$skyui-interactive-secondary: $semantic-color-interactive-secondary !default;
|
||||
$skyui-border-radius-component: $semantic-border-radius-md !default;
|
||||
$skyui-border-radius-container: $semantic-border-radius-lg !default;
|
||||
|
||||
// ELEVATION & SHADOWS
|
||||
// Project-specific shadow treatments
|
||||
$skyui-shadow-elevated: $semantic-shadow-elevated !default;
|
||||
$skyui-shadow-floating: $semantic-shadow-floating !default;
|
||||
|
||||
// ==========================================================================
|
||||
// COMPONENT-SPECIFIC OVERRIDES
|
||||
// ==========================================================================
|
||||
// Variables for specific component customizations
|
||||
|
||||
// Dashboard specific
|
||||
$skyui-dashboard-grid-gap: $semantic-spacing-layout-md !default;
|
||||
$skyui-dashboard-card-padding: $semantic-spacing-component-lg !default;
|
||||
|
||||
// Navigation specific
|
||||
$skyui-nav-height: 64px !default;
|
||||
$skyui-sidebar-width: 280px !default;
|
||||
$skyui-sidebar-collapsed-width: 72px !default;
|
||||
|
||||
// Form specific
|
||||
$skyui-input-border-radius: $semantic-border-radius-sm !default;
|
||||
$skyui-input-padding: $semantic-spacing-component-sm !default;
|
||||
380
projects/demo-ui-essentials/src/scss/overrides/_colors.scss
Normal file
380
projects/demo-ui-essentials/src/scss/overrides/_colors.scss
Normal file
@@ -0,0 +1,380 @@
|
||||
// ==========================================================================
|
||||
// SKYUI COLOR OVERRIDES
|
||||
// ==========================================================================
|
||||
// Project-specific color customizations built on semantic color tokens
|
||||
// Extends the shared design system with SkyUI-specific color patterns
|
||||
// ==========================================================================
|
||||
|
||||
// ==========================================================================
|
||||
// THEME COLOR UTILITIES
|
||||
// ==========================================================================
|
||||
// Utility classes for applying semantic colors consistently
|
||||
|
||||
.skyui-color {
|
||||
// Brand color utilities
|
||||
&--brand-primary {
|
||||
color: $semantic-color-brand-primary;
|
||||
}
|
||||
|
||||
&--brand-secondary {
|
||||
color: $semantic-color-brand-secondary;
|
||||
}
|
||||
|
||||
&--brand-accent {
|
||||
color: $semantic-color-brand-accent;
|
||||
}
|
||||
|
||||
// Text color utilities
|
||||
&--text-primary {
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
|
||||
&--text-secondary {
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
|
||||
&--text-tertiary {
|
||||
color: $semantic-color-text-tertiary;
|
||||
}
|
||||
|
||||
&--text-inverse {
|
||||
color: $semantic-color-text-inverse;
|
||||
}
|
||||
|
||||
// Feedback colors
|
||||
&--success {
|
||||
color: $semantic-color-success;
|
||||
}
|
||||
|
||||
&--warning {
|
||||
color: $semantic-color-warning;
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: $semantic-color-danger;
|
||||
}
|
||||
|
||||
&--info {
|
||||
color: $semantic-color-info;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// BACKGROUND COLOR UTILITIES
|
||||
// ==========================================================================
|
||||
// Background color utilities using semantic tokens
|
||||
|
||||
.skyui-bg {
|
||||
// Surface backgrounds
|
||||
&--surface-primary {
|
||||
background-color: $semantic-color-surface-primary;
|
||||
}
|
||||
|
||||
&--surface-secondary {
|
||||
background-color: $semantic-color-surface-secondary;
|
||||
}
|
||||
|
||||
&--surface-elevated {
|
||||
background-color: $semantic-color-surface-elevated;
|
||||
}
|
||||
|
||||
&--surface-sunken {
|
||||
background-color: $semantic-color-surface-sunken;
|
||||
}
|
||||
|
||||
&--surface-interactive {
|
||||
background-color: $semantic-color-surface-interactive;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-surface-interactive-hover, $semantic-color-surface-interactive);
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
// Brand backgrounds
|
||||
&--brand-primary {
|
||||
background-color: $semantic-color-brand-primary;
|
||||
color: $semantic-color-on-brand-primary;
|
||||
}
|
||||
|
||||
&--brand-secondary {
|
||||
background-color: $semantic-color-brand-secondary;
|
||||
color: $semantic-color-on-brand-secondary;
|
||||
}
|
||||
|
||||
// Container backgrounds
|
||||
&--container-primary {
|
||||
background-color: $semantic-color-container-primary;
|
||||
color: $semantic-color-on-container-primary;
|
||||
}
|
||||
|
||||
&--container-secondary {
|
||||
background-color: $semantic-color-container-secondary;
|
||||
color: $semantic-color-on-container-secondary;
|
||||
}
|
||||
|
||||
// Feedback backgrounds
|
||||
&--success {
|
||||
background-color: var(--color-success-light, $semantic-color-success);
|
||||
filter: brightness(1.4) saturate(0.6);
|
||||
color: var(--color-success-dark, $semantic-color-success);
|
||||
border: 1px solid var(--color-success-border, $semantic-color-success);
|
||||
}
|
||||
|
||||
&--warning {
|
||||
background-color: var(--color-warning-light, $semantic-color-warning);
|
||||
filter: brightness(1.4) saturate(0.6);
|
||||
color: var(--color-warning-dark, $semantic-color-warning);
|
||||
border: 1px solid var(--color-warning-border, $semantic-color-warning);
|
||||
}
|
||||
|
||||
&--danger {
|
||||
background-color: var(--color-danger-light, $semantic-color-danger);
|
||||
filter: brightness(1.4) saturate(0.6);
|
||||
color: var(--color-danger-dark, $semantic-color-danger);
|
||||
border: 1px solid var(--color-danger-border, $semantic-color-danger);
|
||||
}
|
||||
|
||||
&--info {
|
||||
background-color: var(--color-info-light, $semantic-color-info);
|
||||
filter: brightness(1.4) saturate(0.6);
|
||||
color: var(--color-info-dark, $semantic-color-info);
|
||||
border: 1px solid var(--color-info-border, $semantic-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// BORDER COLOR UTILITIES
|
||||
// ==========================================================================
|
||||
// Border color utilities using semantic border tokens
|
||||
|
||||
.skyui-border {
|
||||
// Standard borders
|
||||
&--primary {
|
||||
border-color: $semantic-color-border-primary;
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
border-color: $semantic-color-border-secondary;
|
||||
}
|
||||
|
||||
&--focus {
|
||||
border-color: $semantic-color-border-focus;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&--error {
|
||||
border-color: $semantic-color-border-error;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
border-color: $semantic-color-border-disabled;
|
||||
}
|
||||
|
||||
// Border styles
|
||||
&--solid {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
&--dashed {
|
||||
border-style: dashed;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
&--thick {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// INTERACTIVE STATE COLORS
|
||||
// ==========================================================================
|
||||
// Color variations for interactive elements
|
||||
|
||||
.skyui-interactive {
|
||||
// Primary interactive states
|
||||
&--primary {
|
||||
color: $semantic-color-interactive-primary;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-hover, $semantic-color-interactive-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-primary-active, $semantic-color-interactive-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $semantic-color-interactive-primary;
|
||||
outline: 2px solid $semantic-color-focus-ring;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary interactive states
|
||||
&--secondary {
|
||||
color: $semantic-color-interactive-secondary;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-secondary-hover, $semantic-color-interactive-secondary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-secondary-active, $semantic-color-interactive-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
// Tertiary interactive states
|
||||
&--tertiary {
|
||||
color: $semantic-color-interactive-tertiary;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-tertiary-hover, $semantic-color-interactive-tertiary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-tertiary-active, $semantic-color-interactive-tertiary);
|
||||
}
|
||||
}
|
||||
|
||||
// Neutral interactive states
|
||||
&--neutral {
|
||||
color: $semantic-color-text-secondary;
|
||||
|
||||
&:hover {
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// COMPONENT-SPECIFIC COLORS
|
||||
// ==========================================================================
|
||||
// Color patterns for specific SkyUI components
|
||||
|
||||
// Dashboard specific colors
|
||||
.skyui-dashboard {
|
||||
&__card {
|
||||
background-color: $semantic-color-surface-elevated;
|
||||
border: 1px solid $semantic-color-border-secondary;
|
||||
box-shadow: $semantic-shadow-elevated;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $semantic-shadow-floating;
|
||||
}
|
||||
}
|
||||
|
||||
&__metric {
|
||||
&--positive {
|
||||
color: $semantic-color-success;
|
||||
}
|
||||
|
||||
&--negative {
|
||||
color: $semantic-color-danger;
|
||||
}
|
||||
|
||||
&--neutral {
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation specific colors
|
||||
.skyui-navigation {
|
||||
&__item {
|
||||
color: $semantic-color-text-secondary;
|
||||
|
||||
&:hover {
|
||||
color: $semantic-color-text-primary;
|
||||
background-color: $semantic-color-surface-interactive;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $semantic-color-brand-primary;
|
||||
background-color: var(--color-brand-primary-light, $semantic-color-brand-primary);
|
||||
font-weight: $base-typography-font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
&__divider {
|
||||
background-color: $semantic-color-border-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Form specific colors
|
||||
.skyui-form {
|
||||
&__input {
|
||||
background-color: $semantic-color-surface-primary;
|
||||
border-color: $semantic-color-border-secondary;
|
||||
color: $semantic-color-text-primary;
|
||||
|
||||
&:focus {
|
||||
border-color: $semantic-color-border-focus;
|
||||
box-shadow: 0 0 0 3px $semantic-color-focus-ring;
|
||||
}
|
||||
|
||||
&.error {
|
||||
border-color: $semantic-color-border-error;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: $semantic-color-surface-disabled;
|
||||
border-color: $semantic-color-border-disabled;
|
||||
color: $semantic-color-text-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
color: $semantic-color-text-primary;
|
||||
|
||||
&.required {
|
||||
&::after {
|
||||
color: $semantic-color-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// STATUS AND NOTIFICATION COLORS
|
||||
// ==========================================================================
|
||||
// Color patterns for status indicators and notifications
|
||||
|
||||
.skyui-status {
|
||||
&--online {
|
||||
color: $semantic-color-success;
|
||||
|
||||
&::before {
|
||||
content: '●';
|
||||
margin-right: $semantic-spacing-component-2xs;
|
||||
}
|
||||
}
|
||||
|
||||
&--offline {
|
||||
color: $semantic-color-danger;
|
||||
|
||||
&::before {
|
||||
content: '●';
|
||||
margin-right: $semantic-spacing-component-2xs;
|
||||
}
|
||||
}
|
||||
|
||||
&--pending {
|
||||
color: $semantic-color-warning;
|
||||
|
||||
&::before {
|
||||
content: '●';
|
||||
margin-right: $semantic-spacing-component-2xs;
|
||||
}
|
||||
}
|
||||
|
||||
&--inactive {
|
||||
color: $semantic-color-text-tertiary;
|
||||
|
||||
&::before {
|
||||
content: '●';
|
||||
margin-right: $semantic-spacing-component-2xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
12
projects/demo-ui-essentials/src/scss/overrides/_index.scss
Normal file
12
projects/demo-ui-essentials/src/scss/overrides/_index.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// ==========================================================================
|
||||
// SKYUI OVERRIDES INDEX
|
||||
// ==========================================================================
|
||||
// Centralized import for all SkyUI project overrides
|
||||
// Import order maintains proper cascade and dependency resolution
|
||||
// ==========================================================================
|
||||
|
||||
// Typography overrides - semantic typography token extensions
|
||||
@import 'typography';
|
||||
|
||||
// Color overrides - semantic color token extensions
|
||||
@import 'colors';
|
||||
256
projects/demo-ui-essentials/src/scss/overrides/_typography.scss
Normal file
256
projects/demo-ui-essentials/src/scss/overrides/_typography.scss
Normal file
@@ -0,0 +1,256 @@
|
||||
// ==========================================================================
|
||||
// SKYUI TYPOGRAPHY OVERRIDES
|
||||
// ==========================================================================
|
||||
// Project-specific typography customizations built on semantic typography tokens
|
||||
// Extends the shared design system with SkyUI-specific typography patterns
|
||||
// ==========================================================================
|
||||
|
||||
// Typography utility mixins that use semantic tokens
|
||||
@mixin apply-typography($typography-map) {
|
||||
font-family: map-get($typography-map, font-family);
|
||||
font-size: map-get($typography-map, font-size);
|
||||
font-weight: map-get($typography-map, font-weight);
|
||||
line-height: map-get($typography-map, line-height);
|
||||
letter-spacing: map-get($typography-map, letter-spacing);
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// HEADING STYLES
|
||||
// ==========================================================================
|
||||
// Custom heading treatments that build on semantic typography
|
||||
|
||||
.skyui-heading {
|
||||
// Display heading for hero sections
|
||||
&--display {
|
||||
@include apply-typography($semantic-typography-heading-display);
|
||||
color: $semantic-color-text-primary;
|
||||
|
||||
// Project-specific enhancements
|
||||
text-align: center;
|
||||
margin-bottom: $semantic-spacing-component-xl;
|
||||
|
||||
@media (max-width: $base-breakpoint-md) {
|
||||
font-size: $base-typography-font-size-2xl;
|
||||
}
|
||||
}
|
||||
|
||||
// Primary headings
|
||||
&--h1 {
|
||||
@include apply-typography($semantic-typography-heading-h1);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-lg;
|
||||
|
||||
// SkyUI specific styling
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -#{$semantic-spacing-component-xs};
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: $semantic-color-brand-primary;
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary headings
|
||||
&--h2 {
|
||||
@include apply-typography($semantic-typography-heading-h2);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
margin-top: $semantic-spacing-component-xl;
|
||||
}
|
||||
|
||||
// Tertiary headings
|
||||
&--h3 {
|
||||
@include apply-typography($semantic-typography-heading-h3);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
margin-top: $semantic-spacing-component-lg;
|
||||
}
|
||||
|
||||
// Quaternary headings
|
||||
&--h4 {
|
||||
@include apply-typography($semantic-typography-heading-h4);
|
||||
color: $semantic-color-text-secondary;
|
||||
margin-bottom: $semantic-spacing-component-xs;
|
||||
margin-top: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// BODY TEXT STYLES
|
||||
// ==========================================================================
|
||||
// Content text styles using semantic typography tokens
|
||||
|
||||
.skyui-text {
|
||||
// Large body text for important content
|
||||
&--large {
|
||||
@include apply-typography($semantic-typography-body-large);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
}
|
||||
|
||||
// Standard body text
|
||||
&--medium {
|
||||
@include apply-typography($semantic-typography-body-medium);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-sm;
|
||||
}
|
||||
|
||||
// Small body text for captions, etc.
|
||||
&--small {
|
||||
@include apply-typography($semantic-typography-body-small);
|
||||
color: $semantic-color-text-secondary;
|
||||
margin-bottom: $semantic-spacing-component-xs;
|
||||
}
|
||||
|
||||
// Caption text
|
||||
&--caption {
|
||||
@include apply-typography($semantic-typography-caption);
|
||||
color: $semantic-color-text-tertiary;
|
||||
}
|
||||
|
||||
// Muted/secondary text
|
||||
&--muted {
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
|
||||
// Emphasized text
|
||||
&--emphasis {
|
||||
color: $semantic-color-brand-primary;
|
||||
font-weight: $base-typography-font-weight-medium;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// INTERACTIVE TEXT STYLES
|
||||
// ==========================================================================
|
||||
// Text styles for buttons, links, and interactive elements
|
||||
|
||||
.skyui-interactive-text {
|
||||
// Button text styles
|
||||
&--button-large {
|
||||
@include apply-typography($semantic-typography-button-large);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&--button-medium {
|
||||
@include apply-typography($semantic-typography-button-medium);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&--button-small {
|
||||
@include apply-typography($semantic-typography-button-small);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Link styles
|
||||
&--link {
|
||||
@include apply-typography($semantic-typography-body-medium);
|
||||
color: $semantic-color-interactive-primary;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-hover, $semantic-color-interactive-primary);
|
||||
filter: brightness(0.9);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $semantic-color-border-focus;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation text
|
||||
&--nav-primary {
|
||||
@include apply-typography($semantic-typography-nav-primary);
|
||||
color: $semantic-color-text-primary;
|
||||
|
||||
&.active {
|
||||
color: $semantic-color-brand-primary;
|
||||
font-weight: $base-typography-font-weight-semibold;
|
||||
}
|
||||
}
|
||||
|
||||
&--nav-secondary {
|
||||
@include apply-typography($semantic-typography-nav-secondary);
|
||||
color: $semantic-color-text-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// FORM TEXT STYLES
|
||||
// ==========================================================================
|
||||
// Text styles for form elements using semantic tokens
|
||||
|
||||
.skyui-form-text {
|
||||
// Labels
|
||||
&--label {
|
||||
@include apply-typography($semantic-typography-label);
|
||||
color: $semantic-color-text-primary;
|
||||
margin-bottom: $semantic-spacing-component-xs;
|
||||
display: block;
|
||||
|
||||
&.required::after {
|
||||
content: ' *';
|
||||
color: $semantic-color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
// Input text
|
||||
&--input {
|
||||
@include apply-typography($semantic-typography-input);
|
||||
color: $semantic-color-text-primary;
|
||||
|
||||
&::placeholder {
|
||||
@include apply-typography($semantic-typography-placeholder);
|
||||
color: $semantic-color-text-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
// Help text
|
||||
&--help {
|
||||
@include apply-typography($semantic-typography-caption);
|
||||
color: $semantic-color-text-secondary;
|
||||
margin-top: $semantic-spacing-component-xs;
|
||||
}
|
||||
|
||||
// Error text
|
||||
&--error {
|
||||
@include apply-typography($semantic-typography-caption);
|
||||
color: $semantic-color-danger;
|
||||
margin-top: $semantic-spacing-component-xs;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// CODE TEXT STYLES
|
||||
// ==========================================================================
|
||||
// Code and monospace text styles
|
||||
|
||||
.skyui-code {
|
||||
// Inline code
|
||||
&--inline {
|
||||
@include apply-typography($semantic-typography-code-inline);
|
||||
background-color: $semantic-color-surface-secondary;
|
||||
color: $semantic-color-text-primary;
|
||||
padding: $semantic-spacing-component-2xs $semantic-spacing-component-xs;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
border: 1px solid $semantic-color-border-secondary;
|
||||
}
|
||||
|
||||
// Code block
|
||||
&--block {
|
||||
@include apply-typography($semantic-typography-code-block);
|
||||
background-color: $semantic-color-surface-sunken;
|
||||
color: $semantic-color-text-primary;
|
||||
padding: $semantic-spacing-component-md;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
border: 1px solid $semantic-color-border-secondary;
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user