From 62d58f3f447841cc9a128a3d92b350d281d33a76 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 11 Oct 2024 08:06:00 -0400 Subject: [PATCH] refactor global CSS a tiny bit --- packages/site-kit/src/lib/styles/base.css | 23 +------ packages/site-kit/src/lib/styles/code.css | 69 ------------------- packages/site-kit/src/lib/styles/index.css | 3 +- packages/site-kit/src/lib/styles/text.css | 24 ------- packages/site-kit/src/lib/styles/tokens.css | 36 ++++++---- .../site-kit/src/lib/styles/utils/buttons.css | 20 ++++++ .../src/lib/styles/utils/twoslash.css | 7 ++ 7 files changed, 53 insertions(+), 129 deletions(-) delete mode 100644 packages/site-kit/src/lib/styles/code.css create mode 100644 packages/site-kit/src/lib/styles/utils/buttons.css create mode 100644 packages/site-kit/src/lib/styles/utils/twoslash.css diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index e08124eaaf..033264e53c 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -132,7 +132,7 @@ blockquote { max-width: var(--sk-page-content-width); } -blockquote :where(p, ul) { +blockquote :where(p, ul, ol) { font-size: var(--sk-font-size-body-small); } @@ -158,27 +158,6 @@ button[disabled] { color: var(--sk-text-4); } -.raised { - border-radius: var(--sk-border-radius); - border-style: solid; - border-color: var(--sk-raised-color); - border-width: var(--sk-raised-width); - - &:hover { - border-color: var(--sk-raised-hover-color); - } - - &:active { - border-color: var(--sk-raised-active-color); - border-width: var(--sk-raised-active-width); - } - - &:disabled { - border-color: var(--sk-back-5); - border-width: 1px; - } -} - /* links ------------------------------------- */ a { color: var(--sk-theme-1); diff --git a/packages/site-kit/src/lib/styles/code.css b/packages/site-kit/src/lib/styles/code.css deleted file mode 100644 index 24294bf3f9..0000000000 --- a/packages/site-kit/src/lib/styles/code.css +++ /dev/null @@ -1,69 +0,0 @@ -@import './base.css'; - -body, -html.light, -html.dark { - --shiki-color-text: var(--sk-code-base); - --shiki-token-constant: var(--sk-code-base); - --shiki-token-string: var(--sk-code-string); - --shiki-token-comment: var(--sk-code-comment); - --shiki-token-keyword: var(--sk-code-keyword); - --shiki-token-parameter: var(--sk-code-base); - --shiki-token-function: var(--sk-code-function); - --shiki-token-string-expression: var(--sk-code-string); - --shiki-token-punctuation: var(--sk-code-base); - --shiki-token-link: var(--sk-code-keyword); -} - -.token { - color: var(--sk-code-base); -} - -.token.tag, -.token.attr-value .attr-equals { - color: var(--sk-code-function); -} - -.token.string, -.token.interpolation-punctuation, -.token.attr-value, -.token.inserted { - color: var(--sk-code-string); -} - -.token.builtin, -.token.function { - color: var(--sk-code-function); -} - -.token.keyword, -.token.boolean { - color: var(--sk-code-keyword); -} - -.token.comment { - color: var(--sk-code-comment); -} - -.token.deleted { - color: #fc9b9b; -} - -.token.template-string .interpolation-punctuation, -.token.template-string .string { - color: var(--sk-code-template-string); -} - -.language-id { - display: none; -} - -pre { - .twoslash-hover { - position: relative; - - .twoslash-popup-container { - display: none; - } - } -} diff --git a/packages/site-kit/src/lib/styles/index.css b/packages/site-kit/src/lib/styles/index.css index a907fb48cf..b8cacdbb1f 100644 --- a/packages/site-kit/src/lib/styles/index.css +++ b/packages/site-kit/src/lib/styles/index.css @@ -9,4 +9,5 @@ @import './tokens.css'; @import './base.css'; @import './text.css'; -@import './code.css'; +@import './utils/buttons.css'; +@import './utils/twoslash.css'; diff --git a/packages/site-kit/src/lib/styles/text.css b/packages/site-kit/src/lib/styles/text.css index 205a98f61b..14604491c1 100644 --- a/packages/site-kit/src/lib/styles/text.css +++ b/packages/site-kit/src/lib/styles/text.css @@ -35,30 +35,6 @@ min-height: 1.35em; } -.api-section { - background: var(--sk-back-4); - padding: 1rem; - margin-bottom: 1rem; - max-width: var(--sk-page-content-width); - border-radius: var(--sk-border-radius); -} - -.ts-block > pre { - --shiki-color-background: var(--sk-code-ts-bg); - margin: 0; - border-radius: 0; - box-shadow: none; - background: var(--sk-code-ts-bg); -} - -.ts-block .ts-block-property p { - margin: 1rem 0; -} - -.ts-block-property pre { - margin: 1rem 0; -} - .ts-block-property > pre { margin: 0; padding-left: 1rem; diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 1753501a96..2c46cb507e 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -62,7 +62,6 @@ --sk-theme-1-variant: hsl(15, 100%, 50%); --sk-theme-2-variant: hsl(240, 8%, 44%); - --sk-code-ts-bg: var(--sk-back-1); --sk-code-base: var(--sk-text-2); --sk-code-comment: var(--sk-text-4); --sk-code-keyword: hsl(204 100 38); @@ -76,6 +75,17 @@ --sk-code-diff-inserted: hsl(120, 100%, 25%); --sk-code-diff-removed: hsl(2, 80%, 47%); + --shiki-color-text: var(--sk-code-base); + --shiki-token-constant: var(--sk-code-base); + --shiki-token-string: var(--sk-code-string); + --shiki-token-comment: var(--sk-code-comment); + --shiki-token-keyword: var(--sk-code-keyword); + --shiki-token-parameter: var(--sk-code-base); + --shiki-token-function: var(--sk-code-function); + --shiki-token-string-expression: var(--sk-code-string); + --shiki-token-punctuation: var(--sk-code-base); + --shiki-token-link: var(--sk-code-keyword); + --sk-text-warning-hsl: 32, 95%, 44%; --sk-text-warning: hsl(var(--sk-text-warning-hsl)); @@ -102,7 +112,7 @@ --sk-back-4: hsl(0 0 22); --sk-back-5: hsl(0 0 25); --sk-back-6: hsl(0 0 32); - --sk-back-translucent: hsla(0, 0%, 100%, 0.1); + --sk-back-translucent: hsl(0 0 100 / 0.1); --sk-theme-1-hsl: 12, 94%, 62%; --sk-theme-2-hsl: 240, 8%, 44%; --sk-text-1: hsl(0, 0%, 90%); @@ -118,19 +128,19 @@ --sk-text-warning-hsl: 32, 67%, 56%; - --sk-code-ts-bg: var(--sk-back-2); - --sk-code-base: hsl(45, 7%, 75%); - --sk-code-comment: hsl(0, 0%, 55%); - --sk-code-keyword: hsl(204, 88%, 65%); - --sk-code-function: hsl(19, 67%, 75%); - --sk-code-string: hsl(41, 37%, 68%); - --sk-code-number: hsl(120, 100%, 25%); - --sk-code-template-string: hsl(2, 80%, 47%); + --sk-code-base: hsl(45 7 75); + --sk-code-comment: hsl(0 0 55); + --sk-code-keyword: hsl(204 88 65); + --sk-code-function: hsl(19 67 75); + --sk-code-string: hsl(41 37 68); + --sk-code-number: hsl(120 100 25); + --sk-code-template-string: hsl(2 80 47); --sk-code-tags: var(--sk-code-function); --sk-code-important: var(--sk-code-string); - --sk-code-diff-base: hsla(0, 0%, 100%, 0.5); - --sk-code-diff-inserted: hsl(120, 46%, 48%); - --sk-code-diff-removed: hsl(2, 64%, 70%); + + --sk-code-diff-base: hsla(0 0 100 / 0.5); + --sk-code-diff-inserted: hsl(120 46 48); + --sk-code-diff-removed: hsl(2 64 70); /* overrides */ --shiki-color-background: var(--sk-back-3); diff --git a/packages/site-kit/src/lib/styles/utils/buttons.css b/packages/site-kit/src/lib/styles/utils/buttons.css new file mode 100644 index 0000000000..d5d7c3ecaa --- /dev/null +++ b/packages/site-kit/src/lib/styles/utils/buttons.css @@ -0,0 +1,20 @@ +.raised { + border-radius: var(--sk-border-radius); + border-style: solid; + border-color: var(--sk-raised-color); + border-width: var(--sk-raised-width); + + &:hover { + border-color: var(--sk-raised-hover-color); + } + + &:active { + border-color: var(--sk-raised-active-color); + border-width: var(--sk-raised-active-width); + } + + &:disabled { + border-color: var(--sk-back-5); + border-width: 1px; + } +} diff --git a/packages/site-kit/src/lib/styles/utils/twoslash.css b/packages/site-kit/src/lib/styles/utils/twoslash.css new file mode 100644 index 0000000000..cee75a3e5f --- /dev/null +++ b/packages/site-kit/src/lib/styles/utils/twoslash.css @@ -0,0 +1,7 @@ +.twoslash-hover { + position: relative; + + .twoslash-popup-container { + display: none; + } +}