Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(tokens): px to rem #4397

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(tokens): px to rem #4397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/famous-snails-relax.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@ultraviolet/themes": minor
---

- Moving from `px` to `rem`
- Introduction of `sizing` tokens for height and width
136 changes: 68 additions & 68 deletions packages/themes/public/style/dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,12 +440,12 @@
--color-warning-text-strong-disabled: #0c0f1a;
--color-warning-text-strong-hover: #151a2d;
--radius-circle: 100%;
--radius-default: 4px;
--radius-large: 8px;
--radius-none: 0;
--radius-small: 2px;
--radius-xlarge: 16px;
--radius-xxlarge: 24px;
--radius-default: 0.25rem;
--radius-large: 0.5rem;
--radius-none: 0rem;
--radius-small: 0.125rem;
--radius-xlarge: 1rem;
--radius-xxlarge: 1.5rem;
--shadow-bulk: 0px 4px 32px 8px #0c0f1a66;
--shadow-default-shadow: 0px 0px 8px 2px #0c0f1a66;
--shadow-drawer: 0px 0px 40px 10px #0c0f1a8c;
Expand Down Expand Up @@ -478,232 +478,232 @@
--shadow-tab-bar-active: 0px -2px 0px 0px #bf96f8;
--shadow-tab-bar-off: 0px -1px 0px 0px #484b5a;
--shadow-tooltip: 0px 4px 32px 8px #0c0f1a66;
--space-0: 0;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-5: 40px;
--space-6: 48px;
--space-7: 56px;
--space-8: 64px;
--space-9: 72px;
--space-10: 80px;
--space-0-25: 2px;
--space-0-5: 4px;
--space-1-5: 12px;
--space-0: 0rem;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2rem;
--space-5: 2.5rem;
--space-6: 3rem;
--space-7: 3.5rem;
--space-8: 4rem;
--space-9: 4.5rem;
--space-10: 5rem;
--space-0-25: 0.125rem;
--space-0-5: 0.25rem;
--space-1-5: 0.75rem;
--typography-body-font-family: Inter, sans-serif;
--typography-body-font-size: 16px;
--typography-body-font-size: 1rem;
--typography-body-font-weight: 400;
--typography-body-letter-spacing: 0;
--typography-body-line-height: 24px;
--typography-body-line-height: 1.5rem;
--typography-body-paragraph-spacing: none;
--typography-body-text-case: none;
--typography-body-text-decoration: none;
--typography-body-weight: 400;
--typography-body-small-font-family: Inter, sans-serif;
--typography-body-small-font-size: 14px;
--typography-body-small-font-size: 0.875rem;
--typography-body-small-font-weight: 400;
--typography-body-small-letter-spacing: 0;
--typography-body-small-line-height: 20px;
--typography-body-small-line-height: 1.25rem;
--typography-body-small-paragraph-spacing: 0;
--typography-body-small-text-case: none;
--typography-body-small-text-decoration: none;
--typography-body-small-weight: 400;
--typography-body-small-strong-font-family: Inter, sans-serif;
--typography-body-small-strong-font-size: 14px;
--typography-body-small-strong-font-size: 0.875rem;
--typography-body-small-strong-font-weight: 500;
--typography-body-small-strong-letter-spacing: 0;
--typography-body-small-strong-line-height: 20px;
--typography-body-small-strong-line-height: 1.25rem;
--typography-body-small-strong-paragraph-spacing: 0;
--typography-body-small-strong-text-case: none;
--typography-body-small-strong-text-decoration: none;
--typography-body-small-strong-weight: 500;
--typography-body-small-stronger-font-family: Inter, sans-serif;
--typography-body-small-stronger-font-size: 14px;
--typography-body-small-stronger-font-size: 0.875rem;
--typography-body-small-stronger-font-weight: 600;
--typography-body-small-stronger-letter-spacing: 0;
--typography-body-small-stronger-line-height: 20px;
--typography-body-small-stronger-line-height: 1.25rem;
--typography-body-small-stronger-paragraph-spacing: 0;
--typography-body-small-stronger-text-case: none;
--typography-body-small-stronger-text-decoration: none;
--typography-body-small-stronger-weight: 600;
--typography-body-strong-font-family: Inter, sans-serif;
--typography-body-strong-font-size: 16px;
--typography-body-strong-font-size: 1rem;
--typography-body-strong-font-weight: 500;
--typography-body-strong-letter-spacing: 0;
--typography-body-strong-line-height: 24px;
--typography-body-strong-line-height: 1.5rem;
--typography-body-strong-paragraph-spacing: 0;
--typography-body-strong-text-case: none;
--typography-body-strong-text-decoration: none;
--typography-body-strong-weight: 500;
--typography-body-stronger-font-family: Inter, sans-serif;
--typography-body-stronger-font-size: 16px;
--typography-body-stronger-font-size: 1rem;
--typography-body-stronger-font-weight: 600;
--typography-body-stronger-letter-spacing: 0;
--typography-body-stronger-line-height: 24px;
--typography-body-stronger-line-height: 1.5rem;
--typography-body-stronger-paragraph-spacing: 0;
--typography-body-stronger-text-case: none;
--typography-body-stronger-text-decoration: none;
--typography-body-stronger-weight: 600;
--typography-caption-font-family: Inter, sans-serif;
--typography-caption-font-size: 12px;
--typography-caption-font-size: 0.75rem;
--typography-caption-font-weight: 400;
--typography-caption-letter-spacing: 0;
--typography-caption-line-height: 16px;
--typography-caption-line-height: 1rem;
--typography-caption-paragraph-spacing: 0;
--typography-caption-text-case: none;
--typography-caption-text-decoration: none;
--typography-caption-weight: 400;
--typography-caption-small-font-family: Inter, sans-serif;
--typography-caption-small-font-size: 10px;
--typography-caption-small-font-size: 0.625rem;
--typography-caption-small-font-weight: 400;
--typography-caption-small-letter-spacing: 0;
--typography-caption-small-line-height: 16px;
--typography-caption-small-line-height: 1rem;
--typography-caption-small-paragraph-spacing: 0;
--typography-caption-small-text-case: none;
--typography-caption-small-text-decoration: none;
--typography-caption-small-weight: 400;
--typography-caption-small-strong-font-family: Inter, sans-serif;
--typography-caption-small-strong-font-size: 10px;
--typography-caption-small-strong-font-size: 0.625rem;
--typography-caption-small-strong-font-weight: 500;
--typography-caption-small-strong-letter-spacing: 0;
--typography-caption-small-strong-line-height: 16px;
--typography-caption-small-strong-line-height: 1rem;
--typography-caption-small-strong-paragraph-spacing: 0;
--typography-caption-small-strong-text-case: none;
--typography-caption-small-strong-text-decoration: none;
--typography-caption-small-strong-weight: 500;
--typography-caption-small-stronger-font-family: Inter, sans-serif;
--typography-caption-small-stronger-font-size: 10px;
--typography-caption-small-stronger-font-size: 0.625rem;
--typography-caption-small-stronger-font-weight: 600;
--typography-caption-small-stronger-letter-spacing: 0;
--typography-caption-small-stronger-line-height: 16px;
--typography-caption-small-stronger-line-height: 1rem;
--typography-caption-small-stronger-paragraph-spacing: 0;
--typography-caption-small-stronger-text-case: none;
--typography-caption-small-stronger-text-decoration: none;
--typography-caption-small-stronger-weight: 600;
--typography-caption-strong-font-family: Inter, sans-serif;
--typography-caption-strong-font-size: 12px;
--typography-caption-strong-font-size: 0.75rem;
--typography-caption-strong-font-weight: 500;
--typography-caption-strong-letter-spacing: 0;
--typography-caption-strong-line-height: 16px;
--typography-caption-strong-line-height: 1rem;
--typography-caption-strong-paragraph-spacing: 0;
--typography-caption-strong-text-case: none;
--typography-caption-strong-text-decoration: none;
--typography-caption-strong-weight: 500;
--typography-caption-stronger-font-family: Inter, sans-serif;
--typography-caption-stronger-font-size: 12px;
--typography-caption-stronger-font-size: 0.75rem;
--typography-caption-stronger-font-weight: 600;
--typography-caption-stronger-letter-spacing: 0;
--typography-caption-stronger-line-height: 16px;
--typography-caption-stronger-line-height: 1rem;
--typography-caption-stronger-paragraph-spacing: 0;
--typography-caption-stronger-text-case: none;
--typography-caption-stronger-text-decoration: none;
--typography-caption-stronger-weight: 600;
--typography-code-font-family: JetBrains, monospace;
--typography-code-font-size: 14px;
--typography-code-font-size: 0.875rem;
--typography-code-font-weight: 400;
--typography-code-letter-spacing: 0;
--typography-code-line-height: 20px;
--typography-code-line-height: 1.25rem;
--typography-code-paragraph-spacing: 0;
--typography-code-text-case: none;
--typography-code-text-decoration: none;
--typography-code-weight: 400;
--typography-code-strong-font-family: JetBrains, monospace;
--typography-code-strong-font-size: 14px;
--typography-code-strong-font-size: 0.875rem;
--typography-code-strong-font-weight: 500;
--typography-code-strong-letter-spacing: 0;
--typography-code-strong-line-height: 20px;
--typography-code-strong-line-height: 1.25rem;
--typography-code-strong-paragraph-spacing: 0;
--typography-code-strong-text-case: none;
--typography-code-strong-text-decoration: none;
--typography-code-strong-weight: 500;
--typography-code-stronger-font-family: JetBrains, monospace;
--typography-code-stronger-font-size: 14px;
--typography-code-stronger-font-size: 0.875rem;
--typography-code-stronger-font-weight: Bold;
--typography-code-stronger-letter-spacing: 0;
--typography-code-stronger-line-height: 20px;
--typography-code-stronger-line-height: 1.25rem;
--typography-code-stronger-paragraph-spacing: 0;
--typography-code-stronger-text-case: none;
--typography-code-stronger-text-decoration: none;
--typography-code-stronger-weight: 600;
--typography-heading-font-family: Space Grotesk, sans-serif;
--typography-heading-font-size: 25px;
--typography-heading-font-size: 1.5625rem;
--typography-heading-font-weight: 400;
--typography-heading-letter-spacing: 0;
--typography-heading-line-height: 32px;
--typography-heading-line-height: 2rem;
--typography-heading-paragraph-spacing: 0;
--typography-heading-text-case: none;
--typography-heading-text-decoration: none;
--typography-heading-weight: 400;
--typography-heading-large-font-family: Space Grotesk, sans-serif;
--typography-heading-large-font-size: 35px;
--typography-heading-large-font-size: 2.1875rem;
--typography-heading-large-font-weight: 400;
--typography-heading-large-letter-spacing: 0;
--typography-heading-large-line-height: 48px;
--typography-heading-large-line-height: 3rem;
--typography-heading-large-paragraph-spacing: 0;
--typography-heading-large-text-case: none;
--typography-heading-large-text-decoration: none;
--typography-heading-large-weight: 400;
--typography-heading-large-strong-font-family: Space Grotesk, sans-serif;
--typography-heading-large-strong-font-size: 35px;
--typography-heading-large-strong-font-size: 2.1875rem;
--typography-heading-large-strong-font-weight: 500;
--typography-heading-large-strong-letter-spacing: 0;
--typography-heading-large-strong-line-height: 48px;
--typography-heading-large-strong-line-height: 3rem;
--typography-heading-large-strong-paragraph-spacing: 0;
--typography-heading-large-strong-text-case: none;
--typography-heading-large-strong-text-decoration: none;
--typography-heading-large-strong-weight: 500;
--typography-heading-large-stronger-font-family: Space Grotesk, sans-serif;
--typography-heading-large-stronger-font-size: 35px;
--typography-heading-large-stronger-font-size: 2.1875rem;
--typography-heading-large-stronger-font-weight: 600;
--typography-heading-large-stronger-letter-spacing: 0;
--typography-heading-large-stronger-line-height: 48px;
--typography-heading-large-stronger-line-height: 3rem;
--typography-heading-large-stronger-paragraph-spacing: 0;
--typography-heading-large-stronger-text-case: none;
--typography-heading-large-stronger-text-decoration: none;
--typography-heading-large-stronger-weight: 600;
--typography-heading-small-font-family: Space Grotesk, sans-serif;
--typography-heading-small-font-size: 21px;
--typography-heading-small-font-size: 1.3125rem;
--typography-heading-small-font-weight: 400;
--typography-heading-small-letter-spacing: 0;
--typography-heading-small-line-height: 32px;
--typography-heading-small-line-height: 2rem;
--typography-heading-small-paragraph-spacing: 0;
--typography-heading-small-text-case: none;
--typography-heading-small-text-decoration: none;
--typography-heading-small-weight: 400;
--typography-heading-small-strong-font-family: Space Grotesk, sans-serif;
--typography-heading-small-strong-font-size: 21px;
--typography-heading-small-strong-font-size: 1.3125rem;
--typography-heading-small-strong-font-weight: 500;
--typography-heading-small-strong-letter-spacing: 0;
--typography-heading-small-strong-line-height: 32px;
--typography-heading-small-strong-line-height: 2rem;
--typography-heading-small-strong-paragraph-spacing: 0;
--typography-heading-small-strong-text-case: none;
--typography-heading-small-strong-text-decoration: none;
--typography-heading-small-strong-weight: 500;
--typography-heading-small-stronger-font-family: Space Grotesk, sans-serif;
--typography-heading-small-stronger-font-size: 21px;
--typography-heading-small-stronger-font-size: 1.3125rem;
--typography-heading-small-stronger-font-weight: 600;
--typography-heading-small-stronger-letter-spacing: 0;
--typography-heading-small-stronger-line-height: 32px;
--typography-heading-small-stronger-line-height: 2rem;
--typography-heading-small-stronger-paragraph-spacing: 0;
--typography-heading-small-stronger-text-case: none;
--typography-heading-small-stronger-text-decoration: none;
--typography-heading-small-stronger-weight: 600;
--typography-heading-strong-font-family: Space Grotesk, sans-serif;
--typography-heading-strong-font-size: 25px;
--typography-heading-strong-font-size: 1.5625rem;
--typography-heading-strong-font-weight: 500;
--typography-heading-strong-letter-spacing: 0;
--typography-heading-strong-line-height: 32px;
--typography-heading-strong-line-height: 2rem;
--typography-heading-strong-paragraph-spacing: 0;
--typography-heading-strong-text-case: none;
--typography-heading-strong-text-decoration: none;
--typography-heading-strong-weight: 500;
--typography-heading-stronger-font-family: Space Grotesk, sans-serif;
--typography-heading-stronger-font-size: 25px;
--typography-heading-stronger-font-size: 1.5625rem;
--typography-heading-stronger-font-weight: 600;
--typography-heading-stronger-letter-spacing: 0;
--typography-heading-stronger-line-height: 32px;
--typography-heading-stronger-line-height: 2rem;
--typography-heading-stronger-paragraph-spacing: 0;
--typography-heading-stronger-text-case: none;
--typography-heading-stronger-text-decoration: none;
Expand Down
Loading
Loading