Skip to content

Commit

Permalink
chore: added new fonts (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@azuradara
azuradara authored Jan 8, 2025
1 parent ec4a611 commit 0c748f9
Show file tree
Hide file tree
Showing 9 changed files with 5,431 additions and 6,392 deletions.
1 change: 1 addition & 0 deletions packages/celeste-tokens/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
},
"devDependencies": {
"@tokens-studio/sd-transforms": "^1.2.9",
"csso": "^5.0.5",
"style-dictionary": "^4.3.0",
"tsx": "^4.19.2"
}
Expand Down
14 changes: 11 additions & 3 deletions packages/celeste-tokens/src/generate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import { readFileSync, writeFileSync } from 'node:fs';
import { join, resolve } from 'node:path';
import { register } from '@tokens-studio/sd-transforms';
import { minify as csso } from 'csso';
import StyleDictionary from 'style-dictionary';

const dist = `${resolve(import.meta.dirname, '..', 'dist')}/`;
Expand All @@ -10,15 +11,20 @@ register(StyleDictionary);

// TODO: use a custom fonts cdn

const fonts = `
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
`;
const fonts = readFileSync(
resolve(import.meta.dirname, 'stubs/fonts.css'),
'utf-8',
);

function prependFonts(path: string): void {
const data = readFileSync(path, 'utf8');
writeFileSync(path, fonts + data, 'utf8');
}

function minify(path: string): void {
writeFileSync(path, csso(readFileSync(path, 'utf8')).css, 'utf8');
}

const sd = new StyleDictionary({
source: [join(import.meta.dirname, 'tokens/**/*.json')],
log: {
Expand Down Expand Up @@ -62,3 +68,5 @@ await sd.buildAllPlatforms();

prependFonts(resolve(dist, 'tokens.css'));
prependFonts(resolve(dist, 'tokens.scss'));

minify(resolve(dist, 'tokens.css'));
292 changes: 292 additions & 0 deletions packages/celeste-tokens/src/stubs/fonts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,292 @@
@font-face {
font-family: Cairo;
src: url('https://ui-assets.ycdn.store/fonts/Cairo.ttf');
}
@font-face {
font-family: GeistMono;
src: url('https://ui-assets.ycdn.store/fonts/Geist-Mono.ttf');
}
@font-face {
font-family: InterVariable;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
font-family: InterVariable;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-Thin.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-ThinItalic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-ExtraLight.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-ExtraLightItalic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-Light.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-LightItalic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-Italic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-Medium.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-MediumItalic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-SemiBoldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-BoldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-ExtraBold.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-ExtraBoldItalic.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-Black.woff2') format('woff2');
}
@font-face {
font-family: 'InterDisplay';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url('https://ui-assets.ycdn.store/fonts/InterDisplay-BlackItalic.woff2') format('woff2');
}
@font-feature-values InterVariable {
@character-variant {
cv01: 1;
cv02: 2;
cv03: 3;
cv04: 4;
cv05: 5;
cv06: 6;
cv07: 7;
cv08: 8;
cv09: 9;
cv10: 10;
cv11: 11;
cv12: 12;
cv13: 13;
alt-1: 1; /* Alternate one */
alt-3: 9; /* Flat-top three */
open-4: 2; /* Open four */
open-6: 3; /* Open six */
open-9: 4; /* Open nine */
lc-l-with-tail: 5; /* Lower-case L with tail */
simplified-u: 6; /* Simplified u */
alt-double-s: 7; /* Alternate German double s */
uc-i-with-serif: 8; /* Upper-case i with serif */
uc-g-with-spur: 10; /* Capital G with spur */
single-story-a: 11; /* Single-story a */
compact-lc-f: 12; /* Compact f */
compact-lc-t: 13; /* Compact t */
}
@styleset {
ss01: 1;
ss02: 2;
ss03: 3;
ss04: 4;
ss05: 5;
ss06: 6;
ss07: 7;
ss08: 8;
open-digits: 1; /* Open digits */
disambiguation: 2; /* Disambiguation (with zero) */
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
round-quotes-and-commas: 3; /* Round quotes & commas */
square-punctuation: 7; /* Square punctuation */
square-quotes: 8; /* Square quotes */
circled-characters: 5; /* Circled characters */
squared-characters: 6; /* Squared characters */
}
}
@font-feature-values Inter {
@character-variant {
cv01: 1;
cv02: 2;
cv03: 3;
cv04: 4;
cv05: 5;
cv06: 6;
cv07: 7;
cv08: 8;
cv09: 9;
cv10: 10;
cv11: 11;
cv12: 12;
cv13: 13;
alt-1: 1; /* Alternate one */
alt-3: 9; /* Flat-top three */
open-4: 2; /* Open four */
open-6: 3; /* Open six */
open-9: 4; /* Open nine */
lc-l-with-tail: 5; /* Lower-case L with tail */
simplified-u: 6; /* Simplified u */
alt-double-s: 7; /* Alternate German double s */
uc-i-with-serif: 8; /* Upper-case i with serif */
uc-g-with-spur: 10; /* Capital G with spur */
single-story-a: 11; /* Single-story a */
compact-lc-f: 12; /* Compact f */
compact-lc-t: 13; /* Compact t */
}
@styleset {
ss01: 1;
ss02: 2;
ss03: 3;
ss04: 4;
ss05: 5;
ss06: 6;
ss07: 7;
ss08: 8;
open-digits: 1; /* Open digits */
disambiguation: 2; /* Disambiguation (with zero) */
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
round-quotes-and-commas: 3; /* Round quotes & commas */
square-punctuation: 7; /* Square punctuation */
square-quotes: 8; /* Square quotes */
circled-characters: 5; /* Circled characters */
squared-characters: 6; /* Squared characters */
}
}
@font-feature-values InterDisplay {
@character-variant {
cv01: 1;
cv02: 2;
cv03: 3;
cv04: 4;
cv05: 5;
cv06: 6;
cv07: 7;
cv08: 8;
cv09: 9;
cv10: 10;
cv11: 11;
cv12: 12;
cv13: 13;
alt-1: 1; /* Alternate one */
alt-3: 9; /* Flat-top three */
open-4: 2; /* Open four */
open-6: 3; /* Open six */
open-9: 4; /* Open nine */
lc-l-with-tail: 5; /* Lower-case L with tail */
simplified-u: 6; /* Simplified u */
alt-double-s: 7; /* Alternate German double s */
uc-i-with-serif: 8; /* Upper-case i with serif */
uc-g-with-spur: 10; /* Capital G with spur */
single-story-a: 11; /* Single-story a */
compact-lc-f: 12; /* Compact f */
compact-lc-t: 13; /* Compact t */
}
@styleset {
ss01: 1;
ss02: 2;
ss03: 3;
ss04: 4;
ss05: 5;
ss06: 6;
ss07: 7;
ss08: 8;
open-digits: 1; /* Open digits */
disambiguation: 2; /* Disambiguation (with zero) */
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
round-quotes-and-commas: 3; /* Round quotes & commas */
square-punctuation: 7; /* Square punctuation */
square-quotes: 8; /* Square quotes */
circled-characters: 5; /* Circled characters */
squared-characters: 6; /* Squared characters */
}
}
Loading

0 comments on commit 0c748f9

Please sign in to comment.