Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 unkn0wn
|
b2f4cfe393 | ||
|
unkn0wn
|
3e4d609d6c | ||
|
unkn0wn
|
455acd9552 | ||
|
unkn0wn
|
50e7618232 | ||
|
unkn0wn
|
c4eb4cc507 | ||
|
unkn0wn
|
08a6e82760 | ||
|
unkn0wn
|
2e36ac3b3e | ||
|
unkn0wn
|
46020db913 | ||
|
unkn0wn
|
bacbde56ad | ||
|
unkn0wn
|
f8f2e23573 |
@@ -0,0 +1,42 @@
|
||||
# Attribution
|
||||
|
||||
This file lists all third-party icons used within Nova Design System (NDS) that are not proprietary to the project, as referenced in `LICENSE.md` (section 4.1).
|
||||
|
||||
All third-party icons used in NDS currently originate from **[Iconify](https://iconify.design/)**, specifically from the **[Lucide](https://lucide.dev/)** icon set (Iconify prefix: `lucide`, license: ISC — no attribution required, commercial use allowed).
|
||||
|
||||
Any icon **not listed in this file** is an icon created specifically for NDS and falls under section 4.2 of `LICENSE.md` instead.
|
||||
|
||||
## Icon List
|
||||
|
||||
| Icon (used in NDS) | Source | Icon Set / Link |
|
||||
|---|---|---|
|
||||
| `Arrow2Icon` (Chevron) | Iconify | Lucide — [chevron-down](https://icon-sets.iconify.design/lucide/chevron-down/) |
|
||||
| `BinIcon` | Iconify | Lucide — [trash-2](https://icon-sets.iconify.design/lucide/trash-2/) |
|
||||
| `BurgerIcon` | Iconify | Lucide — [menu](https://icon-sets.iconify.design/lucide/menu/) |
|
||||
| `CalendarIcon` | Iconify | Lucide — [calendar](https://icon-sets.iconify.design/lucide/calendar/) |
|
||||
| `CheckIcon` | Iconify | Lucide — [check](https://icon-sets.iconify.design/lucide/check/) |
|
||||
| `CloseIcon` | Iconify | Lucide — [x](https://icon-sets.iconify.design/lucide/x/) |
|
||||
| `CodeIcon` | Iconify | Lucide — [code](https://icon-sets.iconify.design/lucide/code/) |
|
||||
| `CubeIcon` | Iconify | Lucide — [box](https://icon-sets.iconify.design/lucide/box/) |
|
||||
| `DownloadIcon` | Iconify | Lucide — [download](https://icon-sets.iconify.design/lucide/download/) |
|
||||
| `FilterIcon` | Iconify | Lucide — [filter](https://icon-sets.iconify.design/lucide/filter/) |
|
||||
| `HelpIcon` | Iconify | Lucide — [circle-help](https://icon-sets.iconify.design/lucide/circle-help/) |
|
||||
| `HomeIcon` | Iconify | Lucide — [house](https://icon-sets.iconify.design/lucide/house/) |
|
||||
| `LinkIcon` | Iconify | Lucide — [link](https://icon-sets.iconify.design/lucide/link/) |
|
||||
| `MinusIcon` | Iconify | Lucide — [minus](https://icon-sets.iconify.design/lucide/minus/) |
|
||||
| `MoreIcon` | Iconify | Lucide — [ellipsis](https://icon-sets.iconify.design/lucide/ellipsis/) |
|
||||
| `OverviewIcon` | Iconify | Lucide — [layout-dashboard](https://icon-sets.iconify.design/lucide/layout-dashboard/) |
|
||||
| `PlusIcon` | Iconify | Lucide — [plus](https://icon-sets.iconify.design/lucide/plus/) |
|
||||
| `ProfileIcon` | Iconify | Lucide — [user](https://icon-sets.iconify.design/lucide/user/) |
|
||||
| `SearchIcon` | Iconify | Lucide — [search](https://icon-sets.iconify.design/lucide/search/) |
|
||||
| `SettingsIcon` | Iconify | Lucide — [settings](https://icon-sets.iconify.design/lucide/settings/) |
|
||||
| `ShareIcon` | Iconify | Lucide — [share-2](https://icon-sets.iconify.design/lucide/share-2/) |
|
||||
| `ShieldIcon` | Iconify | Lucide — [shield](https://icon-sets.iconify.design/lucide/shield/) |
|
||||
| `SortIcon` | Iconify | Lucide — [arrow-up-down](https://icon-sets.iconify.design/lucide/arrow-up-down/) |
|
||||
| `StatsIcon` | Iconify | Lucide — [bar-chart-3](https://icon-sets.iconify.design/lucide/bar-chart-3/) |
|
||||
| `UploadIcon` | Iconify | Lucide — [upload](https://icon-sets.iconify.design/lucide/upload/) |
|
||||
|
||||
## Notes
|
||||
|
||||
- The Lucide icon set is released under the ISC license, which permits commercial use without requiring attribution. This file is maintained anyway for transparency and traceability.
|
||||
- This file must be kept up to date whenever a new third-party icon is added to NDS.
|
||||
@@ -0,0 +1,63 @@
|
||||
# LICENSE - Nova Design System (NDS)
|
||||
|
||||
Copyright (c) 2026 Unkn0wn
|
||||
|
||||
## 1. Ownership and Scope
|
||||
Nova Design System (NDS), including its source code, components, documentation, and visual assets such as icons and layout logic, is the property of its creator.
|
||||
This license applies to both the public and private versions of the repository.
|
||||
|
||||
## 2. Usage Rights and Restrictions
|
||||
|
||||
### 2.1 General Use
|
||||
NDS may be used freely and without limitation in personal, internal, and commercial projects — including projects developed for paying clients, such as the design or development of a website, application, or service.
|
||||
|
||||
You may study the project and draw inspiration from it, but direct copying of the core logic, styles, or components outside of using the library as intended is prohibited unless explicitly authorized.
|
||||
|
||||
### 2.2 Billing and Resale Restriction
|
||||
You may not charge or invoice anyone specifically **for the use of NDS itself**. This includes, but is not limited to:
|
||||
- selling NDS as a standalone product or component library,
|
||||
- sublicensing or redistributing NDS to third parties,
|
||||
- adding a distinct line item, fee, or surcharge tied to "using NDS" on a client invoice,
|
||||
- building a product or service (e.g. a SaaS) whose core purpose or monetized value is to give paying users access to NDS's components or their usage.
|
||||
|
||||
This restriction does **not** prevent you from billing normally for a broader deliverable (e.g. a website, application, or platform) simply because NDS was used as part of the underlying toolkit. In that case, NDS is a tool used to produce the deliverable, not the product being sold.
|
||||
|
||||
**Example — SaaS:** if you build a SaaS and NDS is merely used internally to build its interface (the same way any UI library would be), this is authorized. If, however, the SaaS's purpose or value proposition is to give users access to NDS's components or their usage (e.g. a website-builder that resells NDS components to its own customers), this is prohibited.
|
||||
|
||||
**Exception:** if a client explicitly requests that NDS specifically be used in their project, you may bill for that work as part of the agreed engagement, since the choice to use NDS was made knowingly by the client.
|
||||
|
||||
Only the original creator may authorize the sale, sublicensing, or commercial redistribution of NDS as a standalone product. Contributors do not have the authority to grant such rights to third parties.
|
||||
|
||||
## 3. Modifications and Contributions
|
||||
All modifications to the library must go through the official Gitea workflow on the project's self-hosted instance, including Issues and Pull Requests.
|
||||
|
||||
Any authorized modification or derivative work of NDS must remain under this same license.
|
||||
Re-licensing modified versions under a different license is prohibited.
|
||||
|
||||
## 4. Assets and Iconography
|
||||
|
||||
### 4.1 Third-Party Icons
|
||||
Some icons used within NDS are not proprietary to NDS and originate from public or third-party sources (e.g. Iconify). These icons remain governed by their own original license and attribution requirements, independently of this license.
|
||||
|
||||
A full list of these third-party icons, including their name, source (e.g. Iconify), and a link to their origin, is maintained in the `ATTRIBUTION.md` file at the root of the repository. Any icon not listed in `ATTRIBUTION.md` is presumed to fall under section 4.2.
|
||||
|
||||
### 4.2 Icons Created for NDS
|
||||
Icons specifically created for NDS may be used outside of the NDS project, subject to the following conditions:
|
||||
- they may not be sold or resold, whether individually, in a set, or as part of another icon library or product,
|
||||
- their origin must be explicitly credited wherever they are used (e.g. "Icon from Nova Design System (NDS)" with a link to the project), in a clear and visible manner.
|
||||
|
||||
## 5. Disclaimer of Warranty and Liability
|
||||
This library is provided on an **"as is"** basis, without warranty of any kind.
|
||||
|
||||
If a bug or issue is found, it should be reported through the official repository.
|
||||
The creator may choose to fix reported issues but is under no obligation to do so within any specific timeframe.
|
||||
|
||||
Under no circumstances shall the creator be held liable for any loss of data, damages, service interruption, legal issue, or other consequence resulting from the use or inability to use the library.
|
||||
|
||||
## 6. Termination
|
||||
Failure to comply with this license results in immediate termination of any right to use the library.
|
||||
The creator reserves the right to take action in case of intellectual property infringement or unauthorized use.
|
||||
|
||||
---
|
||||
|
||||
For authorization requests, please open an Issue on the official repository or contact the creator directly.
|
||||
-47
@@ -1,47 +0,0 @@
|
||||
# LICENSE - Nova Design System (NDS)
|
||||
|
||||
Copyright (c) 2026 Unkn0wn
|
||||
|
||||
## 1. Ownership and Scope
|
||||
Nova Design System (NDS), including its source code, components, documentation, and visual assets such as icons and layout logic, is the property of its creator.
|
||||
This license applies to both the public and private versions of the repository.
|
||||
|
||||
## 2. Usage Rights and Restrictions
|
||||
|
||||
### 2.1 Personal and Internal Use
|
||||
Use of NDS for personal projects and internal projects is permitted.
|
||||
You may study the project and draw inspiration from it, but direct copying of the core logic, styles, or components is prohibited unless explicitly authorized.
|
||||
|
||||
### 2.2 Commercial Products and Services
|
||||
Any use of NDS in a commercial product or service requires explicit written authorization from the original creator.
|
||||
Only the original creator may grant that authorization.
|
||||
Contributors do not have the authority to grant usage rights to third parties.
|
||||
|
||||
Selling a website, application, service, or product that uses NDS is prohibited unless a specific commercial agreement has been granted by the creator.
|
||||
|
||||
## 3. Modifications and Contributions
|
||||
All modifications to the library must go through the official GitHub workflow, including Issues and Pull Requests.
|
||||
|
||||
Any authorized modification or derivative work of NDS must remain under this same license.
|
||||
Re-licensing modified versions under a different license is prohibited.
|
||||
|
||||
## 4. Assets and Iconography
|
||||
Icons and visual assets introduced into NDS remain part of the project.
|
||||
Unless explicitly authorized, these assets may only be used through the NDS library itself.
|
||||
External reuse, extraction, redistribution, or standalone use of these assets is prohibited.
|
||||
|
||||
## 5. Disclaimer of Warranty and Liability
|
||||
This library is provided on an **"as is"** basis, without warranty of any kind.
|
||||
|
||||
If a bug or issue is found, it should be reported through the official repository.
|
||||
The creator may choose to fix reported issues but is under no obligation to do so within any specific timeframe.
|
||||
|
||||
Under no circumstances shall the creator be held liable for any loss of data, damages, service interruption, legal issue, or other consequence resulting from the use or inability to use the library.
|
||||
|
||||
## 6. Termination
|
||||
Failure to comply with this license results in immediate termination of any right to use the library.
|
||||
The creator reserves the right to take action in case of intellectual property infringement or unauthorized use.
|
||||
|
||||
---
|
||||
|
||||
For authorization requests, please open an Issue on the official repository or contact the creator directly.
|
||||
Generated
+1351
-236
File diff suppressed because it is too large
Load Diff
+3
-3
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@unkn0wndo3s/nova-design-system",
|
||||
"type": "module",
|
||||
"version": "0.06.0",
|
||||
"version": "0.06.1",
|
||||
"main": "./src/index.ts",
|
||||
"description": "Nova Design System — Astro component library",
|
||||
"engines": {
|
||||
@@ -21,9 +21,9 @@
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^6.3.8"
|
||||
"astro": "^7.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.99.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,32 @@
|
||||
@use '../../styles/tokens/typography' as *;
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border-radius: var(--nds-radius-full);
|
||||
overflow: hidden;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
background-color: var(--nds-primary-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--nds-border);
|
||||
&__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include text-base;
|
||||
color: var(--nds-color-on-primary);
|
||||
background-color: var(--nds-disabled);
|
||||
@include text-label;
|
||||
color: var(--nds-primary);
|
||||
object-fit: cover;
|
||||
}
|
||||
&__fallback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--nds-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,64 @@
|
||||
@use '../../styles/tokens/typography' as *;
|
||||
@use "../../styles/tokens/typography" as *;
|
||||
|
||||
.textField {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--nds-spacing-xs);
|
||||
gap: var(--nds-spacing-2xs);
|
||||
& label {
|
||||
@include text-label;
|
||||
color: var(--nds-text);
|
||||
}
|
||||
&__input,
|
||||
&__textarea {
|
||||
background-color: var(--nds-color-background);
|
||||
border: var(--nds-border-width-thin) solid var(--nds-text);
|
||||
border-radius: var(--nds-radius-sm);
|
||||
padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
|
||||
background-color: var(--nds-surface);
|
||||
border: var(--nds-border-width-thin) solid var(--nds-border-strong);
|
||||
border-radius: var(--nds-radius-md);
|
||||
padding: 0 var(--nds-spacing-sm);
|
||||
@include text-base;
|
||||
color: var(--nds-text);
|
||||
min-height: 50px;
|
||||
max-width: 100%;
|
||||
transition:
|
||||
border-color 130ms ease,
|
||||
box-shadow 130ms ease;
|
||||
&::placeholder {
|
||||
color: var(--nds-neutral);
|
||||
}
|
||||
&:hover {
|
||||
border-color: var(--nds-neutral);
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--nds-primary);
|
||||
box-shadow: 0 0 0 3px var(--nds-ring);
|
||||
}
|
||||
&:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
&__input {
|
||||
height: 38px;
|
||||
}
|
||||
&__textarea {
|
||||
min-height: 84px;
|
||||
padding: var(--nds-spacing-sm);
|
||||
resize: vertical;
|
||||
line-height: 1.5;
|
||||
}
|
||||
&__charCount {
|
||||
@include text-sm;
|
||||
color: var(--nds-text-muted);
|
||||
text-align: left;
|
||||
color: var(--nds-neutral);
|
||||
text-align: right;
|
||||
}
|
||||
&__input {
|
||||
background-color: var(--nds-color-background);
|
||||
border: var(--nds-border-width-thin) solid var(--nds-text);
|
||||
border-radius: var(--nds-radius-sm);
|
||||
padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
|
||||
@include text-base;
|
||||
color: var(--nds-text);
|
||||
&__error {
|
||||
@include text-sm;
|
||||
color: var(--nds-error-medium);
|
||||
}
|
||||
}
|
||||
&--invalid &__input,
|
||||
&--invalid &__textarea {
|
||||
border-color: var(--nds-error-medium);
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px
|
||||
color-mix(in srgb, var(--nds-error-medium) 35%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,7 +90,6 @@ const initialChecked = true;
|
||||
<LoadingBar type="known" percentage={75} width="500px" />
|
||||
<LoadingBar type="unknown" width="500px" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2>List Item</h2>
|
||||
|
||||
@@ -1,56 +1,85 @@
|
||||
@mixin _light {
|
||||
// ── Brand ──
|
||||
--nds-text: #050A0A;
|
||||
--nds-neutral: #7C8282;
|
||||
--nds-neutral: #5E6E6E; // refined: warmer, AA on background
|
||||
--nds-disabled: #C2D4D4;
|
||||
--nds-background: #F4FBFB;
|
||||
--nds-primary: #43C9D0;
|
||||
--nds-primary: #1FA6AD; // refined: AA contrast for text/borders
|
||||
--nds-secondary: #71EAEA;
|
||||
--nds-accent: #05D1D1;
|
||||
|
||||
--nds-success-high: #3B6D11;
|
||||
--nds-success-medium: #639922;
|
||||
--nds-success-low: #EAF3DE;
|
||||
|
||||
// ── Semantic surfaces & borders ──
|
||||
--nds-surface: #FFFFFF;
|
||||
--nds-surface-2: #E9F4F4;
|
||||
--nds-surface-hover: #EEF8F8;
|
||||
--nds-border: #DCEAEA;
|
||||
--nds-border-strong: #C2D4D4;
|
||||
|
||||
// ── On-color & soft tints ──
|
||||
--nds-on-primary: #FFFFFF;
|
||||
--nds-primary-soft: #DBF3F4;
|
||||
--nds-ring: color-mix(in srgb, var(--nds-primary) 45%, transparent);
|
||||
|
||||
// ── Status ──
|
||||
--nds-success-high: #3B6D11;
|
||||
--nds-success-medium: #5C9120;
|
||||
--nds-success-low: #EAF3DE;
|
||||
--nds-error-high: #A32D2D;
|
||||
--nds-error-medium: #E24B4A;
|
||||
--nds-error-low: #FCEBEB;
|
||||
|
||||
--nds-warning-high: #854F0B;
|
||||
--nds-warning-medium: #BA7517;
|
||||
--nds-warning-low: #FAEEDA;
|
||||
|
||||
--nds-info-high: #185FA5;
|
||||
--nds-info-medium: #378ADD;
|
||||
--nds-info-low: #E6F1FB;
|
||||
|
||||
// ── Elevation ──
|
||||
--nds-shadow-sm: 0 1px 2px rgba(5, 20, 20, 0.06);
|
||||
--nds-shadow-md: 0 4px 14px rgba(5, 20, 20, 0.10);
|
||||
--nds-shadow-lg: 0 16px 40px rgba(5, 20, 20, 0.16);
|
||||
}
|
||||
|
||||
@mixin _dark {
|
||||
|
||||
--nds-text: #F5FAFA;
|
||||
--nds-neutral: #5A7878;
|
||||
--nds-disabled: #7C8282;
|
||||
// ── Brand ──
|
||||
--nds-text: #ECF5F5;
|
||||
--nds-neutral: #8AA0A0; // refined: lighter for AA on dark background
|
||||
--nds-disabled: #324242;
|
||||
--nds-background: #040B0B;
|
||||
--nds-primary: #2FB5BC;
|
||||
--nds-primary: #34C2C9; // refined: brighter on dark
|
||||
--nds-secondary: #288181;
|
||||
--nds-accent: #2EFAFA;
|
||||
|
||||
--nds-success-high: #97C459;
|
||||
// ── Semantic surfaces & borders ──
|
||||
--nds-surface: #0B1717;
|
||||
--nds-surface-2: #102020;
|
||||
--nds-surface-hover: #122525;
|
||||
--nds-border: #1E3030;
|
||||
--nds-border-strong: #2A4040;
|
||||
|
||||
// ── On-color & soft tints ──
|
||||
--nds-on-primary: #03191A;
|
||||
--nds-primary-soft: #0A2A2C;
|
||||
--nds-ring: color-mix(in srgb, var(--nds-primary) 50%, transparent);
|
||||
|
||||
// ── Status ──
|
||||
--nds-success-high: #B6DC84;
|
||||
--nds-success-medium: #97C459;
|
||||
--nds-success-low: #173404;
|
||||
|
||||
--nds-success-low: #17260A;
|
||||
--nds-error-high: #F09595;
|
||||
--nds-error-medium: #A32D2D;
|
||||
--nds-error-low: #501313;
|
||||
|
||||
--nds-warning-high: #EF9F27;
|
||||
--nds-warning-medium: #EF9F27;
|
||||
--nds-warning-low: #412402;
|
||||
|
||||
--nds-info-high: #85B7EB;
|
||||
--nds-info-medium: #85B7EB;
|
||||
--nds-info-low: #042C53;
|
||||
--nds-error-medium: #E05A59;
|
||||
--nds-error-low: #2E1212;
|
||||
--nds-warning-high: #EFB45A;
|
||||
--nds-warning-medium: #E0A23A;
|
||||
--nds-warning-low: #2A1D06;
|
||||
--nds-info-high: #9CC6F2;
|
||||
--nds-info-medium: #5BA0E6;
|
||||
--nds-info-low: #0A2236;
|
||||
|
||||
// ── Elevation ──
|
||||
--nds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
|
||||
--nds-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50);
|
||||
--nds-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.62);
|
||||
}
|
||||
|
||||
:root,
|
||||
|
||||
@@ -1,51 +1,93 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Intel%20One%20Mono:700|Intel%20One%20Mono:400');
|
||||
// ─── Nova typography ──────────────────────────────────────────────────────────
|
||||
// Display / headings: Intel One Mono (brand). UI / body: Geist (legibility).
|
||||
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Intel+One+Mono:wght@400;500;700&display=swap');
|
||||
|
||||
$font-mono: 'Intel One Mono', monospace;
|
||||
$font-mono: 'Intel One Mono', ui-monospace, monospace;
|
||||
$font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
|
||||
:root {
|
||||
--nds-font-mono: #{$font-mono};
|
||||
--nds-font-sans: #{$font-sans};
|
||||
}
|
||||
|
||||
// ── UI / body (Geist) ──
|
||||
@mixin text-sm {
|
||||
font-size: 0.600rem;
|
||||
font-family: $font-mono;
|
||||
font-family: $font-sans;
|
||||
font-size: 0.75rem; // 12px
|
||||
font-weight: 400;
|
||||
line-height: 1.45;
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
|
||||
@mixin text-base {
|
||||
font-size: 0.8rem;
|
||||
font-family: $font-mono;
|
||||
font-family: $font-sans;
|
||||
font-size: 0.875rem; // 14px
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@mixin text-label {
|
||||
font-size: 0.8rem;
|
||||
font-family: $font-mono;
|
||||
font-weight: 700;
|
||||
font-family: $font-sans;
|
||||
font-size: 0.8125rem; // 13px
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
@mixin text-lg {
|
||||
font-family: $font-sans;
|
||||
font-size: 1rem; // 16px
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// ── Display / headings (Intel One Mono) ──
|
||||
@mixin text-xl {
|
||||
font-size: 1.066rem;
|
||||
font-family: $font-mono;
|
||||
font-size: 1.125rem; // 18px
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
@mixin text-2xl {
|
||||
font-size: 1.421rem;
|
||||
font-family: $font-mono;
|
||||
font-size: 1.375rem; // 22px
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -0.015em;
|
||||
}
|
||||
|
||||
@mixin text-3xl {
|
||||
font-size: 1.894rem;
|
||||
font-family: $font-mono;
|
||||
font-size: 1.875rem; // 30px
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@mixin text-4xl {
|
||||
font-size: 2.525rem;
|
||||
font-family: $font-mono;
|
||||
font-size: 2.5rem; // 40px
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
@mixin text-5xl {
|
||||
font-size: 3.366rem;
|
||||
font-family: $font-mono;
|
||||
font-size: 3.25rem; // 52px
|
||||
font-weight: 700;
|
||||
}
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
// ── Eyebrow / section label ──
|
||||
@mixin text-eyebrow {
|
||||
font-family: $font-sans;
|
||||
font-size: 0.6875rem; // 11px
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user