c803831f60
Implement complete semantic layer for all design tokens including typography, spacing, motion, colors, borders, shadows, z-index, opacity, and glass effects. Each semantic token maps base design tokens to contextual usage patterns for improved maintainability and developer experience. Features: - Complete semantic typography system with font weights, sizes, line heights, and letter spacing - Comprehensive spacing tokens for components, layouts, and interactions - Full motion system with durations, easing, transitions, and hover transforms - Semantic color system with individual access to all Material Design 3 colors - Border tokens with widths, radius, and styles for all use cases - Shadow system including standard and AI-themed shadows - Z-index layering system for proper stacking context - Opacity tokens for transparency and visibility states - Glass morphism tokens with blur, opacity, and theming support All semantic tokens provide direct access to base token values while offering meaningful contextual aliases for common UI patterns. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
101 lines
3.1 KiB
SCSS
101 lines
3.1 KiB
SCSS
$cooperhewitt-font-path: "/fonts/cooperhewitt/" !default;
|
|
|
|
/*** Cooper Hewitt ***/
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Bold';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-Bold.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Bold Italic';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-BoldItalic.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Book';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-Book.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Book Italic';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-BookItalic.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Heavy';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-Heavy.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Heavy Italic';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-HeavyItalic.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Light';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-Light.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Light Italic';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-LightItalic.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Medium';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-Medium.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Medium Italic';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-MediumItalic.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Semibold';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-Semibold.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Semibold Italic';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-SemiboldItalic.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Thin';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-Thin.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Cooper Hewitt Thin Italic';
|
|
src: url('#{$cooperhewitt-font-path}CooperHewitt-ThinItalic.woff') format('woff'); /* Super Modern Browsers */
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|