@tenonhq/sass-theme
Advanced tools
SASS theme library containing color variables, typography, buttons, links, inputs, calendar, tables, navigation, cards, progress, modal, skeleton loading, header, and advanced list components from Tenon's Figma design system
SASS theme library containing color variables, typography, and component styles extracted from Tenon's Figma design system.
npm install @tenonhq/sass-theme
// Import the entire theme
@import "@tenonhq/sass-theme/src/index";
// Or import specific parts
@import "@tenonhq/sass-theme/src/scss/tokens/colors";
@import "@tenonhq/sass-theme/src/scss/tokens/semantic-colors";
@import "@tenonhq/sass-theme/src/scss/mixins/color-utilities";
// Direct variable usage
.my-component {
background-color: $color-primary-500;
color: $text-primary;
border: 1px solid $border-primary;
}
// Using CSS custom properties
.my-component {
background-color: var(--color-primary-500);
color: var(--text-primary);
border: 1px solid var(--border-primary);
}
// Access colors via functions
.my-button {
background-color: primary(500); // Returns $color-primary-500
&:hover {
background-color: primary(700);
}
}
// Access any palette
.status-badge {
&.success {
background-color: success(100);
color: success(700);
}
}
// Brand interactive states
.brand-button {
@include brand-interactive();
}
// Status colors
.alert {
@include status-color("warning");
}
// Focus states
.focusable {
@include focus-ring($color-primary-500, 3px);
}
<!-- Background colors -->
<div class="bg-primary-500">Primary background</div>
<div class="bg-neutral-100">Neutral background</div>
<div class="bg-success">Success background</div>
<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-error">Error text</p>
<!-- Border colors -->
<div class="border-primary-500">Primary border</div>
<div class="border-warning">Warning border</div>
The theme includes a complete typography system with display and text styles:
// Display styles
@include display-large; // 28px, for main headings
@include display-medium; // 24px, for section headings
@include display-small; // 22px, for subsection headings
// Text styles
@include text-xl-medium; // 18px, medium weight
@include text-l-regular; // 16px, regular weight
@include text-l-semibold; // 16px, semibold weight
@include text-m-regular; // 14px, regular weight
@include text-m-medium; // 14px, medium weight
@include text-m-semibold; // 14px, semibold weight
@include text-s-regular; // 12px, regular weight
@include text-s-semibold; // 12px, semibold weight
@include text-xs-semibold; // 10px, semibold weight
Pre-built button mixins for all variants:
// Button variants
@include button-primary-yellow;
@include button-primary-green;
@include button-secondary;
@include button-outline;
@include button-outline-yellow;
@include button-destructive;
@include button-no-outline;
@include button-no-outline-destructive;
// Button sizes
@include button-large; // 14px font, 13px 14px padding
@include button-medium; // 12px font, 7px 12px padding
@include button-small; // 12px font, 5px 8px padding
@include button-xsmall; // 10px font, 4px 6px padding
Consistent link styles with proper states:
// Link variants
@include link-default; // Default link style
@include link-destructive; // Destructive/danger link
@include link-external; // External link with icon
// Link sizes
@include link-small; // 12px
@include link-medium; // 14px
@include link-large; // 16px
Complete input component system with multiple variants and states:
// Input types
@include text-input; // Text input fields
@include select-input; // Select dropdowns
@include textarea-input; // Textarea fields
@include comment-box; // Special comment box style
@include search-input; // Search input with icon
// Input sizes
@include input-small; // 32px height
@include input-medium; // 40px height (default)
@include input-large; // 48px height
@include input-xl; // 56px height
// Input group with label and helper text
@include input-group;
All input components support the following states:
<!-- Text input -->
<input type="text" class="input input-medium" placeholder="Enter text">
<!-- Select dropdown -->
<select class="select select-large">
<option>Option 1</option>
<option>Option 2</option>
</select>
<!-- Textarea -->
<textarea class="textarea textarea-large" placeholder="Enter description"></textarea>
<!-- Comment box -->
<textarea class="comment-box" placeholder="Add a comment"></textarea>
<!-- Search input -->
<input type="search" class="search-input" placeholder="Search...">
<!-- Input group with label and helper text -->
<div class="input-group">
<label>Email Address<span class="required">*</span></label>
<input type="email" class="input" placeholder="user@example.com">
<span class="helper-text">We'll never share your email</span>
</div>
<!-- Error state -->
<input type="text" class="input error" aria-invalid="true">
<span class="error-message">This field is required</span>
$color-primary-50: #F0FCCE$color-primary-100: #E0F897$color-primary-300: #CCF352$color-primary-500: #B9E13B$color-primary-700: #A1C62C$color-primary-900: #628200$color-secondary-50: #32B57F$color-secondary-300: #098D57$color-secondary-500: #00663C$color-secondary-700: #025432$color-secondary-900: #013F25$color-earthy-50: #FCFBF9 (Paper White)$color-earthy-100: #FBF8F3$color-earthy-200: #F5F2EA (Office Wall)$color-earthy-300: #F0EBE1 (Paper)$color-earthy-500: #DCD4C0 (Sepia)$color-earthy-700: #BBA27F (Woods)$color-earthy-800: #987E59$color-earthy-900: #584121$color-earthy-950: #3A2A14$color-neutral-25: #FFFEFD (Distant Sky)$color-neutral-50: #F5F9F5 (Distant Home)$color-neutral-100: #ECF3EF (Light Text)$color-neutral-200: #D2DAD5$color-neutral-300: #9CAAA1$color-neutral-400: #6A8173$color-neutral-500: #506458 (Glass Gray)$color-neutral-600: #3B5445$color-neutral-700: #24402F$color-neutral-800: #162F20 (Deep Text)$color-neutral-900: #072D18 (Deep)The theme provides semantic color mappings for common UI purposes:
$background-primary: Main background color$background-secondary: Secondary background$background-brand: Brand color background$background-success/warning/error: Status backgrounds$text-primary: Main text color$text-secondary: Secondary text$text-disabled: Disabled state text$text-success/warning/error: Status text colors$border-primary: Main border color$border-secondary: Secondary borders$border-success/warning/error: Status borders$state-hover: Hover state overlay$state-active: Active state$state-focus: Focus indicator$state-selected: Selected state background$state-disabled: Disabled state# Build compressed CSS
npm run build
# Watch for changes
npm run watch
The theme includes comprehensive calendar and date picker components.
<!-- Basic calendar input -->
<div class="calendar-input">
<input type="text" class="calendar-input-field" placeholder="Select date" readonly>
<div class="calendar-icon">
<svg viewBox="0 0 16 16" fill="currentColor">
<path d="M5 3V1a1 1 0 0 0-2 0v2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1a1 1 0 0 0-2 0v2H5zM2 7h12v6H2V7z"/>
</svg>
</div>
</div>
<!-- Calendar input with value -->
<div class="calendar-input">
<input type="text" class="calendar-input-field has-value" value="Dec 15, 2024" readonly>
</div>
<!-- Disabled calendar input -->
<div class="calendar-input">
<input type="text" class="calendar-input-field" placeholder="Select date" readonly disabled>
</div>
<!-- Error state calendar input -->
<div class="calendar-input">
<input type="text" class="calendar-input-field error" value="Invalid date" readonly>
</div>
<div class="calendar">
<div class="calendar-header">
<button class="calendar-nav-btn">‹</button>
<div class="calendar-month-year">December 2024</div>
<button class="calendar-nav-btn">›</button>
</div>
<div class="calendar-grid">
<!-- Weekday headers -->
<div class="calendar-weekday">S</div>
<div class="calendar-weekday">M</div>
<div class="calendar-weekday">T</div>
<div class="calendar-weekday">W</div>
<div class="calendar-weekday">T</div>
<div class="calendar-weekday">F</div>
<div class="calendar-weekday weekend">S</div>
<!-- Calendar days -->
<div class="calendar-day">1</div>
<div class="calendar-day selected">15</div>
<div class="calendar-day today">25</div>
<div class="calendar-day disabled">30</div>
<div class="calendar-day other-month">1</div>
</div>
<div class="calendar-footer">
<div class="calendar-actions">
<button class="calendar-today">Today</button>
<button class="calendar-clear">Clear</button>
</div>
</div>
</div>
<div class="calendar">
<!-- ... calendar grid ... -->
<div class="calendar-footer">
<div class="calendar-time">
<input type="text" class="time-input" value="10" placeholder="HH">
<span>:</span>
<input type="text" class="time-input" value="30" placeholder="MM">
</div>
<div class="calendar-actions">
<button class="calendar-today">Now</button>
<button class="calendar-clear">Clear</button>
</div>
</div>
</div>
<div class="date-range-picker">
<div class="calendar-container">
<div class="calendar">
<!-- Calendar with range selection -->
<div class="calendar-grid">
<div class="calendar-day selected range-start">10</div>
<div class="calendar-day in-range">11</div>
<div class="calendar-day in-range">12</div>
<div class="calendar-day selected range-end">13</div>
</div>
</div>
</div>
</div>
<div class="time-picker">
<div class="time-option">12:00 AM</div>
<div class="time-option">12:30 AM</div>
<div class="time-option selected">10:00 AM</div>
<div class="time-option">10:30 AM</div>
<div class="time-option disabled">11:00 PM</div>
</div>
<!-- Inline calendar (no dropdown shadow) -->
<div class="calendar calendar-inline">
<!-- ... calendar content ... -->
</div>
<!-- Dark theme calendar -->
<div class="calendar calendar-dark">
<!-- ... calendar content ... -->
</div>
.calendar-day.selected - Selected date.calendar-day.today - Current date (with indicator dot).calendar-day.disabled - Disabled/unselectable date.calendar-day.other-month - Days from adjacent months.calendar-day.weekend - Weekend days (different text color).calendar-day.in-range - Days within a selected range.calendar-day.range-start - First day of range selection.calendar-day.range-end - Last day of range selection.calendar-input-field.has-value - Input field with selected date.calendar-input-field.error - Input field in error stateISC
FAQs
SASS theme library containing color variables, typography, buttons, links, inputs, calendar, tables, navigation, cards, progress, modal, skeleton loading, header, and advanced list components from Tenon's Figma design system
The npm package @tenonhq/sass-theme receives a total of 2 weekly downloads. As such, @tenonhq/sass-theme popularity was classified as not popular.
We found that @tenonhq/sass-theme demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.