From 006653e8a06271276cc631b6b5d2379c56cb186e Mon Sep 17 00:00:00 2001 From: Rohan Chakraborty Date: Wed, 17 Sep 2025 13:08:45 +0530 Subject: [PATCH 1/2] feat: update font styles for monospace --- packages/raystack/styles/typography.css | 105 +++++++++++++++++------- 1 file changed, 74 insertions(+), 31 deletions(-) diff --git a/packages/raystack/styles/typography.css b/packages/raystack/styles/typography.css index 2ec59ef7c..55e1768cd 100644 --- a/packages/raystack/styles/typography.css +++ b/packages/raystack/styles/typography.css @@ -1,16 +1,20 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital@0;1&display=swap"); :root { - /* Font Families */ - --rs-font-inter: 'Inter', sans-serif; - --rs-font-lora: 'Lora', serif; - --rs-font-josefin-sans: 'Josefin Sans', sans-serif; + /* Fonts */ + --rs-font-inter: "Inter"; + --rs-font-lora: "Lora"; + --rs-font-josefin-sans: "Josefin Sans"; + --rs-font-jetbrains-mono: "JetBrains Mono"; + --rs-font-menlo: "Menlo"; - /* Default Style */ - --rs-font-title: var(--rs-font-inter); - --rs-font-body: var(--rs-font-inter); + /* Font Families */ + --rs-font-title: var(--rs-font-inter), sans-serif; + --rs-font-body: var(--rs-font-inter), sans-serif; + --rs-font-mono: var(--rs-font-menlo), var(--rs-font-jetbrains-mono), monospace; /* Font Weights */ --rs-font-weight-regular: 400; @@ -54,39 +58,78 @@ --rs-letter-spacing-t2: 0; --rs-letter-spacing-t3: 0; --rs-letter-spacing-t4: 0; - - /* Font Smoothing */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + + /* Mono Font Sizes */ + --rs-font-size-mono-mini: 11px; + --rs-font-size-mono-small: 12px; + --rs-font-size-mono-regular: 14px; + --rs-font-size-mono-large: 16px; + + /* Mono Line Heights */ + --rs-line-height-mono-mini: 16px; + --rs-line-height-mono-small: 16px; + --rs-line-height-mono-regular: 20px; + --rs-line-height-mono-large: 24px; + + /* Mono Letter Spacing */ + --rs-letter-spacing-mono-mini: 0px; + --rs-letter-spacing-mono-small: 0px; + --rs-letter-spacing-mono-regular: 0px; + --rs-letter-spacing-mono-large: 0px; } -body, p, h1, h2, h3, h4, h5, h6, span, div, label { +[data-style="traditional"] { + --rs-font-title: var(--rs-font-lora), serif; + --rs-font-body: var(--rs-font-josefin-sans), sans-serif; +} + +body { + /* Default Font */ + font-family: var(--rs-font-body); + + /* Font Smoothing */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -[data-style="modern"] { - --rs-font-title: var(--rs-font-inter); - --rs-font-body: var(--rs-font-inter); +h1 { + font-family: var(--rs-font-title); + font-size: var(--rs-font-size-t4); + font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-t1); } - -[data-style="traditional"] { - --rs-font-title: var(--rs-font-lora); - --rs-font-body: var(--rs-font-josefin-sans); +h2 { + font-family: var(--rs-font-title); + font-size: var(--rs-font-size-t3); + font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-t1); +} +h3 { + font-family: var(--rs-font-title); + font-size: var(--rs-font-size-t2); + font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-t1); +} +h4 { + font-family: var(--rs-font-title); + font-size: var(--rs-font-size-t1); + font-weight: var(--rs-font-weight-medium); + line-height: var(--rs-line-height-t1); } - -h1 { font-family: var(--rs-font-title); font-size: var(--rs-font-size-t4); font-weight: var(--rs-font-weight-medium); line-height: var(--rs-line-height-t1); } -h2 { font-family: var(--rs-font-title); font-size: var(--rs-font-size-t3); font-weight: var(--rs-font-weight-medium); line-height: var(--rs-line-height-t1); } -h3 { font-family: var(--rs-font-title); font-size: var(--rs-font-size-t2); font-weight: var(--rs-font-weight-medium); line-height: var(--rs-line-height-t1); } -h4 { font-family: var(--rs-font-title); font-size: var(--rs-font-size-t1); font-weight: var(--rs-font-weight-medium); line-height: var(--rs-line-height-t1); } /* CSS for the text cursor */ -input, textarea { +input, +textarea { caret-color: var(--rs-color-border-accent-emphasis); } /* Keyframe Animation */ @keyframes dissolve-hide { - 0%, 50% { opacity: 1; } - 100% { opacity: 0; } -} \ No newline at end of file + 0%, + 50% { + opacity: 1; + } + 100% { + opacity: 0; + } +} From eb4b7d1045f4513bfef721e2c94f6295cab5f579 Mon Sep 17 00:00:00 2001 From: Rohan Chakraborty Date: Wed, 17 Sep 2025 14:54:01 +0530 Subject: [PATCH 2/2] feat: update example --- apps/www/src/app/examples/page.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/apps/www/src/app/examples/page.tsx b/apps/www/src/app/examples/page.tsx index 629d50f82..c5d95758b 100644 --- a/apps/www/src/app/examples/page.tsx +++ b/apps/www/src/app/examples/page.tsx @@ -128,6 +128,29 @@ const Page = () => { Main + {`const button = (x>=2 && y!=3) + const getLoaderOnlyClass = (size) => + size === 'small' + ? styles['loader-only-button-small'] + : styles['loader-only-button-normal']; + + const test = 10 >= 8 : true : false; + + + <= < > >= == === != !== + + => ==> && || !! ?? + <-- --> *** **** + + /* comment */ /* ---------- __ */`}