131 lines
3.1 KiB
CSS
131 lines
3.1 KiB
CSS
/**
|
|
* Theme Variable Usage Examples
|
|
*
|
|
* This file demonstrates how to refactor existing CSS to use theme variables.
|
|
* Copy these patterns when updating component styles.
|
|
*/
|
|
|
|
/* ============================================
|
|
BEFORE: Hardcoded values
|
|
============================================ */
|
|
.button-old {
|
|
background: #007bff;
|
|
color: white;
|
|
padding: 0.6em 1.2em;
|
|
border-radius: 4px;
|
|
border: none;
|
|
font-size: 1em;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.button-old:hover {
|
|
background: #0056b3;
|
|
}
|
|
|
|
/* ============================================
|
|
AFTER: Using theme variables
|
|
============================================ */
|
|
.button-new {
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
padding: var(--button-padding-y) var(--button-padding-x);
|
|
border-radius: var(--button-border-radius);
|
|
border: none;
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--button-font-weight);
|
|
transition: var(--transition-base);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-new:hover {
|
|
background: var(--color-primary-hover);
|
|
}
|
|
|
|
/* ============================================
|
|
MORE EXAMPLES
|
|
============================================ */
|
|
|
|
/* Input Field */
|
|
.input-field {
|
|
padding: var(--input-padding-y) var(--input-padding-x);
|
|
border: var(--border-width-thin) solid var(--input-border-color);
|
|
border-radius: var(--input-border-radius);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
transition: var(--transition-base);
|
|
}
|
|
|
|
.input-field:focus {
|
|
outline: none;
|
|
border-color: var(--input-focus-border-color);
|
|
box-shadow: var(--input-focus-shadow);
|
|
}
|
|
|
|
/* Card Component */
|
|
.card {
|
|
background: var(--card-bg);
|
|
padding: var(--card-padding);
|
|
border-radius: var(--card-border-radius);
|
|
box-shadow: var(--card-shadow);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Modal */
|
|
.modal-overlay {
|
|
background: var(--modal-backdrop-bg);
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: var(--z-modal);
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--modal-bg);
|
|
padding: var(--modal-padding);
|
|
border-radius: var(--modal-border-radius);
|
|
max-width: var(--modal-max-width);
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
/* Text Styles */
|
|
.heading-primary {
|
|
font-size: var(--font-size-2xl);
|
|
font-weight: var(--font-weight-bold);
|
|
color: var(--color-text-primary);
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
/* Spacing Examples */
|
|
.section {
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.field-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Border Examples */
|
|
.divider {
|
|
border-bottom: var(--border-width-thin) solid var(--color-border-light);
|
|
margin: var(--spacing-lg) 0;
|
|
}
|
|
|
|
/* ============================================
|
|
BENEFITS OF USING THEME VARIABLES
|
|
============================================
|
|
|
|
1. Consistency: All components use the same colors/spacing
|
|
2. Maintainability: Change once, update everywhere
|
|
3. Theme switching: Easy to implement dark mode
|
|
4. Scalability: Add new colors/sizes without touching components
|
|
5. Documentation: Variable names are self-documenting
|
|
|
|
*/
|