diff --git a/packages/website-astro/astro.config.mjs b/packages/website-astro/astro.config.mjs index ef5f9d89e0..0b5a8be6e8 100644 --- a/packages/website-astro/astro.config.mjs +++ b/packages/website-astro/astro.config.mjs @@ -1,13 +1,13 @@ // @ts-check import react from "@astrojs/react"; import starlight from "@astrojs/starlight"; +import astroExpressiveCode from "astro-expressive-code"; import { defineConfig } from "astro/config"; import { readFile } from "fs/promises"; import { resolve } from "path"; import rehypeMermaid from "rehype-mermaid"; import remarkHeadingID from "remark-heading-id"; import { resolveSideBars } from "./sidebars"; -import tspTryitCode from "./src/plugins/tsp-tryit-code"; const base = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/"; @@ -27,22 +27,16 @@ export default defineConfig({ base, trailingSlash: "always", integrations: [ + astroExpressiveCode(), starlight({ title: "TypeSpec", sidebar: await resolveSideBars(), customCss: ["./src/css/custom.css"], components: { Header: "./src/components/header/header.astro", + PageFrame: "./src/components/starlight-overrides/PageFrame.astro", }, - expressiveCode: { - themes: ["one-light", "one-dark-pro"], - styleOverrides: { - frames: { - frameBoxShadowCssValue: "", - }, - }, - plugins: [tspTryitCode(base + "playground/")], - }, + expressiveCode: false, // defined directly above head: [ { tag: "script", diff --git a/packages/website-astro/ec.config.mjs b/packages/website-astro/ec.config.mjs new file mode 100644 index 0000000000..c636e8945d --- /dev/null +++ b/packages/website-astro/ec.config.mjs @@ -0,0 +1,49 @@ +// @ts-check +import { addClassName } from "@expressive-code/core/hast"; +import { defineEcConfig } from "astro-expressive-code"; +import tspTryitCode from "./src/plugins/tsp-tryit-code.js"; + +const base = process.env.TYPESPEC_WEBSITE_BASE_PATH ?? "/"; + +export default defineEcConfig({ + themeCssSelector: (theme, { styleVariants }) => { + // If one dark and one light theme are available, and the user has not disabled it, + // generate theme CSS selectors compatible with Starlight's dark mode switch + const baseTheme = styleVariants[0]?.theme; + const altTheme = styleVariants.find((v) => v.theme.type !== baseTheme?.type)?.theme; + if (theme === baseTheme || theme === altTheme) return `[data-theme='${theme.type}']`; + // Return the default selector + return `[data-theme='${theme.name}']`; + }, + styleOverrides: { + // Starlight theme overrides + borderRadius: "0px", + borderWidth: "1px", + codePaddingBlock: "0.75rem", + codePaddingInline: "1rem", + codeFontFamily: "var(--__sl-font-mono)", + codeFontSize: "var(--sl-text-code)", + codeLineHeight: "var(--sl-line-height)", + uiFontFamily: "var(--__sl-font)", + textMarkers: { + lineDiffIndicatorMarginLeft: "0.25rem", + defaultChroma: "45", + backgroundOpacity: "60%", + }, + frames: { + frameBoxShadowCssValue: "none", + }, + }, + plugins: [ + { + name: "Starlight Plugin", + hooks: { + postprocessRenderedBlock: ({ renderData }) => { + addClassName(renderData.blockAst, "not-content"); + }, + }, + }, + // @ts-expect-error type version mismatch + tspTryitCode(base + "playground/"), + ], +}); diff --git a/packages/website-astro/package.json b/packages/website-astro/package.json index decc253800..a7ffe06ee7 100644 --- a/packages/website-astro/package.json +++ b/packages/website-astro/package.json @@ -40,9 +40,10 @@ "@types/react": "~18.3.11", "@types/react-dom": "~18.3.0", "@types/remark-heading-id": "^1.0.0", - "@typespec/playground-website": "workspace:*", "@typespec/internal-build-utils": "workspace:~", + "@typespec/playground-website": "workspace:*", "@typespec/website": "workspace:*", + "astro-expressive-code": "^0.37.0", "rehype-mermaid": "^3.0.0", "remark-heading-id": "^1.0.1", "rimraf": "~6.0.1" diff --git a/packages/website-astro/src/components/asset-img.astro b/packages/website-astro/src/components/asset-img.astro new file mode 100644 index 0000000000..f264835ec2 --- /dev/null +++ b/packages/website-astro/src/components/asset-img.astro @@ -0,0 +1,21 @@ +--- +/** + * Component for rendering an image resolving the relative path. + */ +import { baseUrl } from "@site/src/utils"; +import type { HTMLAttributes } from "astro/types"; + +export interface AssetImgProps extends HTMLAttributes<"img"> { + src: string; +} + +const { src, alt, ...rest } = Astro.props; +--- + +{alt + + diff --git a/packages/website-astro/src/components/asset-img/asset-img.module.css b/packages/website-astro/src/components/asset-img/asset-img.module.css deleted file mode 100644 index 878bd763c0..0000000000 --- a/packages/website-astro/src/components/asset-img/asset-img.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.img { - display: block; -} diff --git a/packages/website-astro/src/components/asset-img/asset-img.tsx b/packages/website-astro/src/components/asset-img/asset-img.tsx deleted file mode 100644 index 2d2cfbf178..0000000000 --- a/packages/website-astro/src/components/asset-img/asset-img.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import useBaseUrl from "@docusaurus/useBaseUrl"; -import style from "./asset-img.module.css"; - -export interface AssetImgProps { - src: string; - alt?: string; - className?: string; -} - -/** - * Component for rendering an image resolving the relative path. - */ -export const AssetImg = ({ src, ...props }: AssetImgProps) => { - const fullSrc = useBaseUrl(`/img/${src}`); - return {props.alt; -}; diff --git a/packages/website-astro/src/components/button.astro b/packages/website-astro/src/components/button.astro new file mode 100644 index 0000000000..b6c0a17642 --- /dev/null +++ b/packages/website-astro/src/components/button.astro @@ -0,0 +1,67 @@ +--- +import Link from "./link.astro"; + +export interface Props { + appearance?: "primary" | "outline"; + as?: "a"; + href: string; + className?: string; +} +const { href, className, appearance } = Astro.props; +const appearanceCls = `appearance-${appearance ?? "primary"}`; +--- + + + + + diff --git a/packages/website-astro/src/components/button/button.module.css b/packages/website-astro/src/components/button/button.module.css deleted file mode 100644 index 27aef3b25f..0000000000 --- a/packages/website-astro/src/components/button/button.module.css +++ /dev/null @@ -1,47 +0,0 @@ -.button { - align-items: center; - box-sizing: border-box; - display: inline-flex; - justify-content: center; - text-decoration-line: none; - vertical-align: middle; - margin: 0px; - overflow: hidden; - background-color: var(--colorNeutralBackground1); - color: var(--colorNeutralForeground1); - border: var(--strokeWidthThin) solid var(--colorNeutralStroke1); - font-family: var(--fontFamilyBase); - outline-style: none; - padding: 5px var(--spacingHorizontalM); - min-width: 96px; - border-radius: var(--borderRadiusMedium); - font-size: var(--fontSizeBase300); - font-weight: var(--fontWeightSemibold); - line-height: var(--lineHeightBase300); - transition-duration: var(--durationFaster); - transition-property: background, border, color; - transition-timing-function: var(--curveEasyEase); -} - -.button:hover { - color: var(--colorNeutralForeground1); -} - -.appearance-primary { - color: var(--colorNeutralForegroundOnBrand); - background-color: var(--colorBrandBackground); - border-color: transparent; -} - -.appearance-primary:hover { - color: var(--colorNeutralForegroundOnBrand); -} - -.appearance-outline { - background-color: transparent; -} - -.appearance-outline:hover { - border-color: var(--colorNeutralStroke1Hover); - text-decoration: none; -} diff --git a/packages/website-astro/src/components/button/button.tsx b/packages/website-astro/src/components/button/button.tsx deleted file mode 100644 index 8d973f7791..0000000000 --- a/packages/website-astro/src/components/button/button.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import clsx from "clsx"; -import type { ReactNode } from "react"; -import { Link } from "../link/link"; -import style from "./button.module.css"; - -export interface ButtonProps { - appearance?: "primary" | "outline"; - as?: "a"; - href: string; - children?: ReactNode; - className?: string; -} - -export const Button = ({ href, children, className, appearance }: ButtonProps) => { - const appearanceCls = style[`appearance-${appearance ?? "primary"}`]; - return ( - - {children} - - ); -}; diff --git a/packages/website-astro/src/components/card.astro b/packages/website-astro/src/components/card.astro new file mode 100644 index 0000000000..5adf0eeb88 --- /dev/null +++ b/packages/website-astro/src/components/card.astro @@ -0,0 +1,47 @@ +--- +export interface Props { + /** Should skip padding. */ + noPadding?: boolean; + /** Should the background blend. */ + blend?: boolean; + + children?: React.ReactNode; + class?: string; +} + +const { class: cls, noPadding, blend } = Astro.props; +--- + + + +
+
+
+
diff --git a/packages/website-astro/src/components/card/card.module.css b/packages/website-astro/src/components/card/card.module.css deleted file mode 100644 index 6478d3d773..0000000000 --- a/packages/website-astro/src/components/card/card.module.css +++ /dev/null @@ -1,26 +0,0 @@ -.card { - border-radius: 22px; - position: relative; -} - -.bg { - position: absolute; - width: 100%; - height: 100%; - border-radius: 22px; - background-color: var(--colorNeutralBackground1); -} - -.content { - position: relative; - z-index: 100; - padding: 20px; -} - -.no-padding .content { - padding: 0px; -} - -.blend > .bg { - opacity: 0.2; -} diff --git a/packages/website-astro/src/components/card/card.tsx b/packages/website-astro/src/components/card/card.tsx deleted file mode 100644 index 3f02134d6b..0000000000 --- a/packages/website-astro/src/components/card/card.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import clsx from "clsx"; -import style from "./card.module.css"; - -export interface CardProps { - /** Should skip padding. */ - noPadding?: boolean; - /** Should the background blend. */ - blend?: boolean; - - children?: React.ReactNode; - className?: string; -} - -export const Card = ({ children, className, noPadding, blend }: CardProps) => { - return ( -
-
-
{children}
-
- ); -}; diff --git a/packages/website-astro/src/components/docusaurus/core/BrowserOnly.ts b/packages/website-astro/src/components/docusaurus/core/BrowserOnly.ts deleted file mode 100644 index ffe4849b8d..0000000000 --- a/packages/website-astro/src/components/docusaurus/core/BrowserOnly.ts +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable unicorn/filename-case */ -export default function BrowserOnly({ children }) { - return children(); -} diff --git a/packages/website-astro/src/components/docusaurus/core/Link.tsx b/packages/website-astro/src/components/docusaurus/core/Link.tsx deleted file mode 100644 index 2e0d3b8eba..0000000000 --- a/packages/website-astro/src/components/docusaurus/core/Link.tsx +++ /dev/null @@ -1,5 +0,0 @@ -/* eslint-disable unicorn/filename-case */ - -export default (props: any) => { - return ; -}; diff --git a/packages/website-astro/src/components/docusaurus/theme/CodeBlock.tsx b/packages/website-astro/src/components/docusaurus/theme/CodeBlock.tsx deleted file mode 100644 index e3c708d632..0000000000 --- a/packages/website-astro/src/components/docusaurus/theme/CodeBlock.tsx +++ /dev/null @@ -1,6 +0,0 @@ -/* eslint-disable unicorn/filename-case */ -import { Code } from "@astrojs/starlight/components"; - -export default function CodeBlock({ children, className, language, title }) { - return ; -} diff --git a/packages/website-astro/src/components/docusaurus/theme/Layout.tsx b/packages/website-astro/src/components/docusaurus/theme/Layout.tsx deleted file mode 100644 index 0cec8fa1f4..0000000000 --- a/packages/website-astro/src/components/docusaurus/theme/Layout.tsx +++ /dev/null @@ -1,4 +0,0 @@ -/* eslint-disable unicorn/filename-case */ -export default ({ children }) => { - return <>{children}; -}; diff --git a/packages/website-astro/src/components/feature-list.astro b/packages/website-astro/src/components/feature-list.astro new file mode 100644 index 0000000000..bd6ea845ff --- /dev/null +++ b/packages/website-astro/src/components/feature-list.astro @@ -0,0 +1,64 @@ +--- +import FluentImg from "./fluent-img.astro"; +import Link from "./link.astro"; +import { DescriptionText, NeutralText, Text } from "./text/text"; +import type { FluentImageName } from "./types"; + +interface FeatureListItem { + title: string; + description?: string; + image?: FluentImageName; + link?: string; +} + +export interface Props { + items?: FeatureListItem[]; +} + +const { items } = Astro.props; +--- + + + +
+ { + items?.map(({ image, description, link, title }) => ( +
+ {image && } +
+ {title} + {description} + {link && ( + + Learn more → + + )} +
+
+ )) + } +
diff --git a/packages/website-astro/src/components/feature-list/feature-list.module.css b/packages/website-astro/src/components/feature-list/feature-list.module.css deleted file mode 100644 index 02dc165b71..0000000000 --- a/packages/website-astro/src/components/feature-list/feature-list.module.css +++ /dev/null @@ -1,23 +0,0 @@ -.items-list { - width: 100%; - display: flex; - flex-direction: column; - gap: 40px; -} - -.item { - display: flex; - gap: 12px; -} - -.item-image { - width: 64px; - height: 64px; - max-width: 64px; -} - -.item-content { - display: flex; - flex-direction: column; - gap: 12px; -} diff --git a/packages/website-astro/src/components/feature-list/feature-list.tsx b/packages/website-astro/src/components/feature-list/feature-list.tsx deleted file mode 100644 index 40b09bc68b..0000000000 --- a/packages/website-astro/src/components/feature-list/feature-list.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import clsx from "clsx"; -import { type FluentImageName, FluentImg } from "../fluent-img"; -import { Link } from "../link/link"; -import { DescriptionText, NeutralText, Text } from "../text/text"; -import style from "./feature-list.module.css"; - -interface FeatureListItem { - title: string; - description?: string; - image?: FluentImageName; - link?: string; -} - -export interface FeatureListProps { - items?: FeatureListItem[]; -} - -export const FeatureList = ({ items }: FeatureListProps) => { - if (items === undefined) { - return null; - } - - const content = items.map((x, i) => ); - return
{content}
; -}; - -interface FeatureListItemElProps extends FeatureListItem {} - -const FeatureListItemEl = ({ title, description, image, link }: FeatureListItemElProps) => { - return ( -
- {image && } -
- {title} - {description} - {link && ( - - Learn more → - - )} -
-
- ); -}; diff --git a/packages/website-astro/src/components/fluent-img.astro b/packages/website-astro/src/components/fluent-img.astro new file mode 100644 index 0000000000..55d39612c1 --- /dev/null +++ b/packages/website-astro/src/components/fluent-img.astro @@ -0,0 +1,25 @@ +--- +import { baseUrl } from "@site/src/utils"; +import type { HTMLAttributes } from "astro/types"; +import type { FluentImageName } from "./types"; + +export interface Props extends HTMLAttributes<"img"> { + name: FluentImageName; +} + +const { name, alt, ...rest } = Astro.props; +const srcLight = baseUrl(`/img/fluent/${name}-l-standard-128x128.png`); +const srcDark = baseUrl(`/img/fluent/${name}-d-standard-128x128.png`); +--- + + + +{alt +{alt diff --git a/packages/website-astro/src/components/fluent-img.tsx b/packages/website-astro/src/components/fluent-img.tsx deleted file mode 100644 index a9945ccc85..0000000000 --- a/packages/website-astro/src/components/fluent-img.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import useBaseUrl from "@docusaurus/useBaseUrl"; -import { useColorMode } from "@site/src/components/docusaurus/core/theme-common"; - -export interface FluentImgProps { - name: FluentImageName; - alt?: string; - className?: string; -} - -export type FluentImageName = - | "book-pencil" - | "chat" - | "checkmark" - | "data-trending" - | "design-layout" - | "design" - | "devices-multiple" - | "document-add" - | "document-cloud" - | "editor" - | "eye-dev" - | "firework" - | "people-shield" - | "shield-blue" - | "shield-settings" - | "tasks" - | "text-edit"; - -/** - * Component for rendering a Fluent image. - */ -export const FluentImg = ({ name, ...props }: FluentImgProps) => { - const { colorMode } = useColorMode(); - const colorKey = colorMode === "dark" ? "d" : "l"; - const src = useBaseUrl(`/img/fluent/${name}-${colorKey}-standard-128x128.png`); - return {props.alt; -}; diff --git a/packages/website-astro/src/components/footer/footer.astro b/packages/website-astro/src/components/footer/footer.astro index 612b52915c..ad094c524b 100644 --- a/packages/website-astro/src/components/footer/footer.astro +++ b/packages/website-astro/src/components/footer/footer.astro @@ -1,7 +1,7 @@ --- -import { Link } from "@site/src/components/link/link"; +import Link from "@site/src/components/link.astro"; import { Links } from "@site/src/constants"; -import ThemePicker from "../theme-picker/theme-picker.astro"; +import ThemePicker from "../theme-picker.astro"; import MicrosoftLogo from "./microsoft-logo.astro"; const { class: className } = Astro.props; diff --git a/packages/website-astro/src/components/header/header.astro b/packages/website-astro/src/components/header/header.astro index 364ceece96..18634e588f 100644 --- a/packages/website-astro/src/components/header/header.astro +++ b/packages/website-astro/src/components/header/header.astro @@ -1,5 +1,5 @@ --- -import ThemePicker from "../theme-picker/theme-picker.astro"; +import ThemePicker from "../theme-picker.astro"; import { HeaderMenu } from "./menu"; import Link from "./link.astro"; import { Icon } from "@astrojs/starlight/components"; diff --git a/packages/website-astro/src/components/hero-tabs/hero-tabs.module.css b/packages/website-astro/src/components/hero-tabs/hero-tabs.module.css deleted file mode 100644 index 8e396c2b4b..0000000000 --- a/packages/website-astro/src/components/hero-tabs/hero-tabs.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.illustration-card { - padding: 0; -} diff --git a/packages/website-astro/src/components/hero-tabs/hero-tabs.tsx b/packages/website-astro/src/components/hero-tabs/hero-tabs.tsx deleted file mode 100644 index 8bcc69ee91..0000000000 --- a/packages/website-astro/src/components/hero-tabs/hero-tabs.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { type SelectTabData, type SelectTabEvent, Tab, TabList } from "@fluentui/react-components"; -import { type ReactNode, useCallback, useState } from "react"; -import style from "./hero-tabs.module.css"; - -export interface HeroProps { - tabs: HeroTab[]; -} - -interface HeroTab { - value: string; - content: ReactNode; -} -export const HeroTabs = ({ tabs }: HeroProps) => { - const [selected, setSelected] = useState(tabs[0].value); - const handleTabSelection = useCallback( - (_: SelectTabEvent, data: SelectTabData) => { - setSelected(data.value as any); - }, - [setSelected], - ); - const content = tabs.find((tab) => tab.value === selected)?.content; - return ( - <> -
{content}
- - {tabs.map((tab) => { - return ( - - {tab.value} - - ); - })} - - - ); -}; diff --git a/packages/website-astro/src/components/homepage/data-validation-hero-illustration.astro b/packages/website-astro/src/components/homepage/data-validation-hero-illustration.astro new file mode 100644 index 0000000000..03e0f67ed8 --- /dev/null +++ b/packages/website-astro/src/components/homepage/data-validation-hero-illustration.astro @@ -0,0 +1,20 @@ +--- +import commonLibSharedTsp from "@site/src/assets/tsp-samples/data-validation/common-lib/common.tsp?raw"; +import commonLibMainTsp from "@site/src/assets/tsp-samples/data-validation/common-lib/main.tsp?raw"; +import IllustrationCard from "../illustration-card.astro"; +import { Code } from "@astrojs/starlight/components"; +import { Tabs, TabItem } from "@astrojs/starlight/components"; +--- + + + + + + + +
+ +
+ + + diff --git a/packages/website-astro/src/components/homepage/extensibility-illustration.astro b/packages/website-astro/src/components/homepage/extensibility-illustration.astro new file mode 100644 index 0000000000..53b3a7eacd --- /dev/null +++ b/packages/website-astro/src/components/homepage/extensibility-illustration.astro @@ -0,0 +1,15 @@ +--- +import { Code } from "@astrojs/starlight/components"; +import extensibilityTs from "@site/src/assets/tsp-samples/extensibility/custom-lib.ts?raw"; +import extensibilityTsp from "@site/src/assets/tsp-samples/extensibility/custom-lib.tsp?raw"; +--- + +
+ +
+ +
diff --git a/packages/website-astro/src/components/homepage/hero-illustration.astro b/packages/website-astro/src/components/homepage/hero-illustration.astro new file mode 100644 index 0000000000..7035554dce --- /dev/null +++ b/packages/website-astro/src/components/homepage/hero-illustration.astro @@ -0,0 +1,104 @@ +--- +import { Code, TabItem, Tabs } from "@astrojs/starlight/components"; +import Window from "../window.astro"; +import openapiTsp from "@site/src/assets/tsp-samples/homepage/hero/http/main.tsp?raw"; +import openapiYaml from "@site/src/assets/tsp-samples/homepage/hero/http/out/openapi.yaml?raw"; +import jsonSchemaTsp from "@site/src/assets/tsp-samples/homepage/hero/json-schema/main.tsp?raw"; +import jsonSchemaOutput from "@site/src/assets/tsp-samples/homepage/hero/json-schema/out/schema.yaml?raw"; +import protobufTsp from "@site/src/assets/tsp-samples/protobuf/hero/main.tsp?raw"; +import protobufOutput from "@site/src/assets/tsp-samples/protobuf/hero/out/addressbook.proto?raw"; +import clsx from "clsx"; +--- + + +
+ + + +
+ + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + +
diff --git a/packages/website-astro/src/components/homepage/hero-illustration/hero-illustration.module.css b/packages/website-astro/src/components/homepage/hero-illustration/hero-illustration.module.css deleted file mode 100644 index 44ae469652..0000000000 --- a/packages/website-astro/src/components/homepage/hero-illustration/hero-illustration.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.hero-illustration { - width: 1200px; -} -@media only screen and (max-width: 1200px) { - .hero-illustration { - width: 700px; - } -} - -.split-windows { - height: 600px; - display: flex; - flex-direction: row; - align-items: stretch; - gap: 2px; -} - -.split-window { - flex: 1; - min-height: 100%; - overflow-y: auto; -} - -.output { - font-size: 90%; -} - -.hero-illustration :global(.theme-code-block) { - border-radius: 0; -} diff --git a/packages/website-astro/src/components/homepage/hero-illustration/hero-illustration.tsx b/packages/website-astro/src/components/homepage/hero-illustration/hero-illustration.tsx deleted file mode 100644 index c49b5bd787..0000000000 --- a/packages/website-astro/src/components/homepage/hero-illustration/hero-illustration.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import openapiTsp from "@site/src/assets/tsp-samples/homepage/hero/http/main.tsp?raw"; -import openapiYaml from "@site/src/assets/tsp-samples/homepage/hero/http/out/openapi.yaml?raw"; - -import jsonSchemaTsp from "@site/src/assets/tsp-samples/homepage/hero/json-schema/main.tsp?raw"; -import jsonSchemaOutput from "@site/src/assets/tsp-samples/homepage/hero/json-schema/out/schema.yaml?raw"; - -import protobufTsp from "@site/src/assets/tsp-samples/protobuf/hero/main.tsp?raw"; -import protobufOutput from "@site/src/assets/tsp-samples/protobuf/hero/out/addressbook.proto?raw"; - -import { HeroTabs } from "../../hero-tabs/hero-tabs"; -import { Window } from "../../window/window"; - -import clsx from "clsx"; -import { CodeBlock } from "../../prism-code-block/prism-code-block"; -import style from "./hero-illustration.module.css"; - -export const HeroIllustration = () => { - return ( - , - }, - { value: "JSON Schema", content: }, - { value: "Protobuf", content: }, - ]} - > - ); -}; - -const OpenAPI3Illustration = () => { - return ( - -
- - {openapiTsp} - - - {openapiYaml} - -
- - ); -}; -const JsonSchemaIllustration = () => { - return ( - -
- - {jsonSchemaTsp} - - - {jsonSchemaOutput} - -
- - ); -}; -const ProtobufIllustration = () => { - return ( - -
- - {protobufTsp} - - - {protobufOutput} - -
- - ); -}; diff --git a/packages/website-astro/src/components/homepage/hero.astro b/packages/website-astro/src/components/homepage/hero.astro new file mode 100644 index 0000000000..0fcc47c038 --- /dev/null +++ b/packages/website-astro/src/components/homepage/hero.astro @@ -0,0 +1,157 @@ +--- +import { Links } from "@site/src/constants"; +import Button from "../button.astro"; +import { DescriptionText } from "../text/text"; +import HeroIllustration from "./hero-illustration.astro"; +import { link } from "@site/src/utils/link"; +--- + + + +
+
+

TypeSpec

+
Describe APIs
+ + Describe your data up front and generate schemas, API specifications, client / server code, + docs, and more. + +
+ + +
+
+
+ +
+
diff --git a/packages/website-astro/src/components/homepage/homepage.module.css b/packages/website-astro/src/components/homepage/homepage.module.css deleted file mode 100644 index 6b867cf206..0000000000 --- a/packages/website-astro/src/components/homepage/homepage.module.css +++ /dev/null @@ -1,197 +0,0 @@ -.hero-divider { - height: 2px; - align-self: stretch; - background: radial-gradient(circle, var(--colorNeutralStroke2) 0%, transparent 80%); -} - -.hero-container { - background-repeat: no-repeat; - width: 100%; - background-size: 100vw 94%; - - display: flex; - padding: 120px 80px 52px 80px; - flex-direction: column; - gap: 56px; - align-self: stretch; -} - -[data-theme="light"] .hero-container { - background: radial-gradient( - 46.56% 45.08% at 56.04% 55.33%, - rgba(0, 50, 255, 0.1) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient( - 46.69% 41.74% at 69.64% 60.81%, - rgba(192, 59, 196, 0.1) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient( - 59.78% 45.73% at 30.42% 58.68%, - rgba(0, 120, 212, 0.1) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient(32.53% 31.57% at 50% 66.82%, rgba(70, 54, 104, 0.1) 0%, rgba(0, 0, 0, 0) 100%); -} - -[data-theme="dark"] .hero-container { - background: radial-gradient( - 46.56% 45.08% at 56.04% 55.33%, - rgba(0, 50, 255, 0.2) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient( - 46.69% 41.74% at 69.64% 60.81%, - rgba(192, 59, 196, 0.2) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient( - 59.78% 45.73% at 30.42% 58.68%, - rgba(0, 120, 212, 0.2) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient(32.53% 31.57% at 50% 66.82%, rgba(70, 54, 104, 0.2) 0%, rgba(0, 0, 0, 0) 100%); -} - -.hero-title { - text-align: center; - font-size: 24px; - font-style: normal; - font-weight: 600; - line-height: 100%; /* 24px */ - letter-spacing: -0.24px; -} - -.hero-subtitle { - text-align: center; - font-size: 96px; - font-style: normal; - font-weight: 600; - line-height: 100%; /* 96px */ - letter-spacing: -1px; - color: transparent; - - background: linear-gradient( - 127deg, - #6dc2b1 -17.91%, - #9ac6e5 19.34%, - #3579d8 56.65%, - #b145bd 96.75% - ); - background-clip: text; -} - -@media only screen and (max-width: 1024px) { - .hero-subtitle { - font-size: 68px; - } -} - -@media only screen and (max-width: 728px) { - .hero-subtitle { - font-size: 48px; - } -} - -.hero-content { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - gap: 32px; - align-self: stretch; -} - -.hero-description, -.overview-description { - max-width: 600px; - padding: 20px; - text-align: center; -} - -.hero-buttons { - display: flex; - justify-content: center; - gap: 8px; - align-self: stretch; - flex-wrap: wrap; -} - -.hero-demo { - display: flex; - padding: 0px 102px; - flex-direction: column; - align-items: center; - gap: 10px; - flex: 1 0 0; - align-self: stretch; -} - -@media only screen and (max-width: 728px) { - .hero-demo { - display: none; - } -} - -.overview { - display: flex; - flex-direction: column; - gap: 128px; - width: 100%; - max-width: 100%; - padding: 60px; -} - -@media only screen and (max-width: 728px) { - .overview { - padding: 20px; - } -} - -.overview-subtitle { - text-align: center; - font-size: 40px; - font-weight: 600; - line-height: 48px; -} - -.overview-summary { - display: flex; - flex-direction: column; - align-items: center; - gap: 24px; - align-self: stretch; -} - -.closing { - display: flex; - padding: 80px 60px; - flex-direction: column; - gap: 16px; - align-items: flex-start; - align-self: baseline; -} - -.closing-title { - font-size: 40px; - font-weight: 600; - line-height: 48px; -} - -@media only screen and (max-width: 728px) { - .closing-title, - .overview-subtitle { - font-size: 32px; - line-height: 40px; - } -} - -.closing-buttons { - display: flex; - gap: 8px; -} - -.codeblock-seperator { - height: 10px; -} diff --git a/packages/website-astro/src/components/homepage/homepage.tsx b/packages/website-astro/src/components/homepage/homepage.tsx deleted file mode 100644 index 4d925cea31..0000000000 --- a/packages/website-astro/src/components/homepage/homepage.tsx +++ /dev/null @@ -1,207 +0,0 @@ -import { DataValidationHeroIllustration } from "@site/src/components/react-pages/data-validation"; -import { OpenAPI3HeroIllustration } from "@site/src/components/react-pages/openapi"; -import { Links } from "@site/src/constants"; -import { Button } from "../button/button"; -import { FeatureList } from "../feature-list/feature-list"; -import { LearnMoreCard } from "../learn-more-card/learn-more-card"; -import { LightDarkImg } from "../light-dark-img/light-dark-img"; -import { CodeBlock } from "../prism-code-block/prism-code-block"; -import { Section } from "../section/section"; -import { SectionedLayout } from "../sectioned-layout/sectioned-layout"; -import { DescriptionText, PrimaryText } from "../text/text"; -import style from "./homepage.module.css"; -import { OverviewIllustration } from "./overview-illustration/overview-illustration"; - -export const HomeContent = () => { - return ( - <> - -
- - - - - - - - - - ); -}; - -const Hero = () => { - return ( - <> -
-
-

TypeSpec

-
Describe APIs
- - Describe your data up front and generate schemas, API specifications, client / server - code, docs, and more. - -
- - -
-
-
- -
-
- - ); -}; - -const Overview = () => { - return ( - <> -
-
- Why TypeSpec -
API-First for developers
- - With TypeSpec, remove the handwritten files that slow you down, and generate - standards-compliant API schemas in seconds. - -
-
} itemStyle="plain"> - -
-
- - ); -}; - -const OpenAPISection = () => { - return ( -
} - > - -
- ); -}; - -const DataValidationSection = () => { - return ( -
} - > - -
- ); -}; - -const EditorSection = () => { - return ( -
} - > - -
- ); -}; - -const ExtensibilitySection = () => { - return ( -
} - > - -
- ); -}; - -import extensibilityTs from "@site/src/assets/tsp-samples/extensibility/custom-lib.ts?raw"; -import extensibilityTsp from "@site/src/assets/tsp-samples/extensibility/custom-lib.tsp?raw"; -import { link } from "@site/src/utils"; -import { HeroIllustration } from "./hero-illustration/hero-illustration"; - -const ExtensibilityIllustration = () => { - return ( -
- - {extensibilityTsp} - -
- - {extensibilityTs} - -
- ); -}; - -const Closing = () => { - return ( -
-
Start your TypeSpec journey
- - Install the TypeSpec CLI or check out the playground to get started. - -
- - -
-
- ); -}; diff --git a/packages/website-astro/src/components/homepage/openapi3-hero-illustration.astro b/packages/website-astro/src/components/homepage/openapi3-hero-illustration.astro new file mode 100644 index 0000000000..dd240d4e0a --- /dev/null +++ b/packages/website-astro/src/components/homepage/openapi3-hero-illustration.astro @@ -0,0 +1,29 @@ +--- +import heroMainTsp from "@site/src/assets/tsp-samples/openapi3/hero/main.tsp?raw"; +import heroOpenAPIYaml from "@site/src/assets/tsp-samples/openapi3/hero/out/openapi.yaml?raw"; +import IllustrationCard from "../illustration-card.astro"; +import { Code } from "@astrojs/starlight/components"; +import { Tabs, TabItem } from "@astrojs/starlight/components"; +--- + + + + + + +
+ +
+ + +
+ +
+ + + diff --git a/packages/website-astro/src/components/homepage/overview-illustration-terminal-content.tsx b/packages/website-astro/src/components/homepage/overview-illustration-terminal-content.tsx new file mode 100644 index 0000000000..05df71b55e --- /dev/null +++ b/packages/website-astro/src/components/homepage/overview-illustration-terminal-content.tsx @@ -0,0 +1,12 @@ +import { P } from "../painter/painter"; + +export const OverviewIllustrationTerminalContent = () => { + <> + {P.line(P.secondary("~ /my-project"), " tsp init")} + {P.line(" ")} + {P.brand("? ")} + {"Select a template"} + {P.line(" Empty project")} + {P.line(P.brand("> "), P.brand.underline("REST API"))} + ; +}; diff --git a/packages/website-astro/src/components/homepage/overview-illustration.astro b/packages/website-astro/src/components/homepage/overview-illustration.astro new file mode 100644 index 0000000000..883c9b1179 --- /dev/null +++ b/packages/website-astro/src/components/homepage/overview-illustration.astro @@ -0,0 +1,37 @@ +--- +import IllustrationCard from "../illustration-card.astro"; +import LightDarkImg from "../light-dark-img.astro"; +import Terminal from "../terminal.astro"; +import Window from "../window.astro"; +import { OverviewIllustrationTerminalContent } from "./overview-illustration-terminal-content"; +--- + + + + + + + + + + diff --git a/packages/website-astro/src/components/homepage/overview-illustration/overview-illustration.module.css b/packages/website-astro/src/components/homepage/overview-illustration/overview-illustration.module.css deleted file mode 100644 index 82a170e618..0000000000 --- a/packages/website-astro/src/components/homepage/overview-illustration/overview-illustration.module.css +++ /dev/null @@ -1,19 +0,0 @@ -.card { - width: 723px; - height: 542px; - position: relative; -} - -.terminal { - position: absolute; - top: 60px; - left: 50px; - width: 420px; - height: 320px; -} - -.ide { - position: absolute; - top: 226px; - left: 183px; -} diff --git a/packages/website-astro/src/components/homepage/overview-illustration/overview-illustration.tsx b/packages/website-astro/src/components/homepage/overview-illustration/overview-illustration.tsx deleted file mode 100644 index 523282ae52..0000000000 --- a/packages/website-astro/src/components/homepage/overview-illustration/overview-illustration.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { IllustrationCard } from "../../illustration-card/illustration-card"; -import { LightDarkImg } from "../../light-dark-img/light-dark-img"; -import { P } from "../../painter/painter"; -import { Terminal } from "../../terminal/terminal"; -import { Window } from "../../window/window"; -import style from "./overview-illustration.module.css"; - -export const OverviewIllustration = () => { - return ( - - - {P.line(P.secondary("~ /my-project"), " tsp init")} - {P.line(" ")} - {P.brand("? ")} - {"Select a template"} - {P.line(" Empty project")} - {P.line(P.brand("> "), P.brand.underline("REST API"))} - - - - - - ); -}; diff --git a/packages/website-astro/src/components/illustration-card.astro b/packages/website-astro/src/components/illustration-card.astro new file mode 100644 index 0000000000..bd984c36d2 --- /dev/null +++ b/packages/website-astro/src/components/illustration-card.astro @@ -0,0 +1,24 @@ +--- +import Card, { type Props as CardProps } from "./card.astro"; + +export interface Props extends CardProps {} +const { class: cls, noPadding, ...props } = Astro.props; +--- + + + + + + diff --git a/packages/website-astro/src/components/illustration-card/illustration-card.module.css b/packages/website-astro/src/components/illustration-card/illustration-card.module.css deleted file mode 100644 index 204b4ae86a..0000000000 --- a/packages/website-astro/src/components/illustration-card/illustration-card.module.css +++ /dev/null @@ -1,11 +0,0 @@ -.illustration :global(.tabs-container) { - margin-bottom: 0; -} - -.illustration :global(.tabs-container) :global(.margin-top--md) { - margin-top: 0 !important; -} - -.illustration :global(img) { - display: block; -} diff --git a/packages/website-astro/src/components/illustration-card/illustration-card.tsx b/packages/website-astro/src/components/illustration-card/illustration-card.tsx deleted file mode 100644 index 69092e3b0d..0000000000 --- a/packages/website-astro/src/components/illustration-card/illustration-card.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import clsx from "clsx"; -import { Card, type CardProps } from "../card/card"; -import style from "./illustration-card.module.css"; - -export interface IllustrationCardProps extends CardProps {} -export const IllustrationCard = ({ className, noPadding, ...props }: IllustrationCardProps) => { - return ( - - ); -}; diff --git a/packages/website-astro/src/components/illustrations/formatter.astro b/packages/website-astro/src/components/illustrations/formatter.astro new file mode 100644 index 0000000000..f0b07070f2 --- /dev/null +++ b/packages/website-astro/src/components/illustrations/formatter.astro @@ -0,0 +1,79 @@ +--- +import { Code } from "@astrojs/starlight/components"; +import notFormattedTsp from "@site/src/assets/tsp-samples/tooling/formatter/file.noformat.tsp?raw"; +import formattedTsp from "@site/src/assets/tsp-samples/tooling/formatter/formatted.tsp?raw"; +--- + + + +
+
+
Unformatted
+ +
+
+
Formatted
+ +
+
diff --git a/packages/website-astro/src/components/illustrations/openapi3-interoperate.astro b/packages/website-astro/src/components/illustrations/openapi3-interoperate.astro new file mode 100644 index 0000000000..5603c3f705 --- /dev/null +++ b/packages/website-astro/src/components/illustrations/openapi3-interoperate.astro @@ -0,0 +1,50 @@ +--- +import interoperateTsp from "@site/src/assets/tsp-samples/openapi3/interoperate/main.tsp?raw"; +import interoperateOpenapi from "@site/src/assets/tsp-samples/openapi3/interoperate/openapi.yaml?raw"; +import interoperateSpectral from "@site/src/assets/tsp-samples/openapi3/interoperate/spectral.txt"; +import { Painter } from "@site/src/components/painter/painter"; +import Terminal from "@site/src/components/terminal.astro"; +import AssetImg from "../asset-img.astro"; +import WindowCarousel from "../window-carousel.astro"; +import { Code } from "@astrojs/starlight/components"; +--- + + + + +
+
+ +
+
+ +
+ + + +
+ + + + + diff --git a/packages/website-astro/src/components/interoperate-illustration/interoperate-illustration.module.css b/packages/website-astro/src/components/interoperate-illustration/interoperate-illustration.module.css deleted file mode 100644 index 37bc3b9bff..0000000000 --- a/packages/website-astro/src/components/interoperate-illustration/interoperate-illustration.module.css +++ /dev/null @@ -1,19 +0,0 @@ -.illustration-main { - display: grid; - grid-template-areas: - "tsp openapi" - "swagger-ui openapi" - "spectral spectral"; - gap: 5px; - background-color: var(--colorNeutralBackground1); -} - -.tsp { - grid-area: tsp; -} -.openapi { - grid-area: openapi; -} -.spectral { - grid-area: spectral; -} diff --git a/packages/website-astro/src/components/interoperate-illustration/interoperate-illustration.tsx b/packages/website-astro/src/components/interoperate-illustration/interoperate-illustration.tsx deleted file mode 100644 index 5ee792461d..0000000000 --- a/packages/website-astro/src/components/interoperate-illustration/interoperate-illustration.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import interoperateTsp from "@site/src/assets/tsp-samples/openapi3/interoperate/main.tsp?raw"; -import interoperateOpenapi from "@site/src/assets/tsp-samples/openapi3/interoperate/openapi.yaml?raw"; -import interoperateSpectral from "@site/src/assets/tsp-samples/openapi3/interoperate/spectral.txt"; -import { Painter } from "@site/src/components/painter/painter"; -import { Terminal } from "@site/src/components/terminal/terminal"; -import { AssetImg } from "../asset-img/asset-img"; -import { CodeBlock } from "../prism-code-block/prism-code-block"; -import { WindowCarousel, WindowCarouselItem } from "../window-carousel/window-carousel"; -import style from "./interoperate-illustration.module.css"; - -export const OpenAPI3InteroperateIllustration = () => { - return ( - - -
-
- {interoperateTsp} -
-
- {interoperateOpenapi} -
- - - -
- - - - - - ); -}; diff --git a/packages/website-astro/src/components/layouts/fluent-layout.tsx b/packages/website-astro/src/components/layouts/fluent-layout.tsx index a0725df5db..7c4b6c5cd8 100644 --- a/packages/website-astro/src/components/layouts/fluent-layout.tsx +++ b/packages/website-astro/src/components/layouts/fluent-layout.tsx @@ -1,24 +1,14 @@ import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components"; -import { useColorMode } from "../docusaurus/core/theme-common"; -import style from "./layouts.module.css"; +import { useTheme } from "@site/src/utils/theme-react"; -export const FluentLayout = ({ children }) => { - return {children}; +export const FluentLayout = (props) => { + return ; }; -export const ShowcaseLayout = ({ children }) => { +const FluentWrapper = ({ children, style }) => { + const theme = useTheme(); return ( - // Need to do this because fluentui can't do SSR simply... - -
{children}
- - ); -}; - -const FluentWrapper = ({ children }) => { - const { colorMode } = useColorMode(); - return ( - + {children} ); diff --git a/packages/website-astro/src/components/layouts/layouts.module.css b/packages/website-astro/src/components/layouts/layouts.module.css deleted file mode 100644 index ab1410dfc4..0000000000 --- a/packages/website-astro/src/components/layouts/layouts.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.showcase-layout { - background-color: var(--colorNeutralBackground3); -} diff --git a/packages/website-astro/src/components/learn-more-card.astro b/packages/website-astro/src/components/learn-more-card.astro new file mode 100644 index 0000000000..1b78d87591 --- /dev/null +++ b/packages/website-astro/src/components/learn-more-card.astro @@ -0,0 +1,59 @@ +--- +import FluentImg from "./fluent-img.astro"; +import Link from "./link.astro"; +import { NeutralText, DescriptionText, Text } from "./text/text"; +import type { FluentImageName } from "./types"; + +export interface Props { + title: string; + description?: string; + image?: FluentImageName; + link: string; +} + +const { image, title, description, link } = Astro.props; +--- + + + + + {image && } +
+ {title} + {description} + Learn more → +
+ diff --git a/packages/website-astro/src/components/learn-more-card/learn-more-card.module.css b/packages/website-astro/src/components/learn-more-card/learn-more-card.module.css deleted file mode 100644 index b1b85c0633..0000000000 --- a/packages/website-astro/src/components/learn-more-card/learn-more-card.module.css +++ /dev/null @@ -1,32 +0,0 @@ -.item { - width: 100%; - text-decoration: none; - border-radius: 14px; - background-color: var(--colorNeutralBackground1); - padding: 20px; - display: flex; - gap: 12px; - border: 2px solid transparent; -} - -.item:hover { - text-decoration: none; - border-color: var(--colorBrandForeground1); -} - -.item:active { - text-decoration: none; - background-color: var(--colorNeutralBackground2); -} - -.item-image { - width: 52px; - height: 52px; - max-width: 64px; -} - -.item-content { - display: flex; - flex-direction: column; - gap: 12px; -} diff --git a/packages/website-astro/src/components/learn-more-card/learn-more-card.tsx b/packages/website-astro/src/components/learn-more-card/learn-more-card.tsx deleted file mode 100644 index 839b7f75e6..0000000000 --- a/packages/website-astro/src/components/learn-more-card/learn-more-card.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { type FluentImageName, FluentImg } from "../fluent-img"; -import { Link } from "../link/link"; -import { DescriptionText, NeutralText, Text } from "../text/text"; -import style from "./learn-more-card.module.css"; - -interface LearnMoreCardProps { - title: string; - description?: string; - image?: FluentImageName; - link: string; -} - -export const LearnMoreCard = ({ title, description, image, link }: LearnMoreCardProps) => { - return ( - - {image && } -
- {title} - {description} - Learn more → -
- - ); -}; diff --git a/packages/website-astro/src/components/light-dark-img.astro b/packages/website-astro/src/components/light-dark-img.astro new file mode 100644 index 0000000000..8f37b1231b --- /dev/null +++ b/packages/website-astro/src/components/light-dark-img.astro @@ -0,0 +1,28 @@ +--- +import AssetImg from "./asset-img.astro"; + +export interface Props { + src: string; +} + +const { src } = Astro.props; +--- + + +
+ + +
diff --git a/packages/website-astro/src/components/light-dark-img/light-dark-img.module.css b/packages/website-astro/src/components/light-dark-img/light-dark-img.module.css deleted file mode 100644 index 10e66273d5..0000000000 --- a/packages/website-astro/src/components/light-dark-img/light-dark-img.module.css +++ /dev/null @@ -1,12 +0,0 @@ -:global(html[data-theme="light"]) .dark { - display: none; -} - -:global(html[data-theme="dark"]) .light { - display: none; -} - -.light, -.dark { - display: block; -} diff --git a/packages/website-astro/src/components/light-dark-img/light-dark-img.tsx b/packages/website-astro/src/components/light-dark-img/light-dark-img.tsx deleted file mode 100644 index f9249aca03..0000000000 --- a/packages/website-astro/src/components/light-dark-img/light-dark-img.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { AssetImg } from "../asset-img/asset-img"; -import style from "./light-dark-img.module.css"; - -export const LightDarkImg = ({ src }: { src: string }) => { - return ( -
- - -
- ); -}; diff --git a/packages/website-astro/src/components/link.astro b/packages/website-astro/src/components/link.astro new file mode 100644 index 0000000000..331bcf7fcf --- /dev/null +++ b/packages/website-astro/src/components/link.astro @@ -0,0 +1,11 @@ +--- +import { link } from "@site/src/utils"; +import type { HTMLAttributes } from "astro/types"; + +export interface LinkProps extends HTMLAttributes<"a"> {} +const { href, children, ...props } = Astro.props; +--- + + + + diff --git a/packages/website-astro/src/components/link/link.tsx b/packages/website-astro/src/components/link/link.tsx deleted file mode 100644 index b9e49f269a..0000000000 --- a/packages/website-astro/src/components/link/link.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { link } from "@site/src/utils"; -import type { ComponentProps } from "react"; - -export interface LinkProps extends ComponentProps<"a"> {} - -export const Link = ({ href, children, ...props }: LinkProps) => { - return ( - - {children} - - ); -}; diff --git a/packages/website-astro/src/components/playground-component/loading-spinner.module.css b/packages/website-astro/src/components/playground-component/loading-spinner.module.css index 1545220b82..9a042e1dcf 100644 --- a/packages/website-astro/src/components/playground-component/loading-spinner.module.css +++ b/packages/website-astro/src/components/playground-component/loading-spinner.module.css @@ -6,3 +6,108 @@ height: 100%; width: 100%; } + +.progress-bar { + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + gap: 8px; + overflow: hidden; +} + +@keyframes spinner { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.spinner { + width: 32px; + height: 32px; + + --fui-Spinner--strokeWidth: var(--strokeWidthThicker); + + position: relative; + flex-shrink: 0; + mask-image: radial-gradient( + closest-side, + transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), + white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), + transparent 100% + ); + background-color: var(--colorBrandStroke2Contrast); + color: var(--colorBrandStroke1); + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-timing-function: linear; + animation-name: spinner; +} + +@keyframes tail { + 0% { + transform: rotate(-135deg); + } + + 50% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(225deg); + } +} +.spinner-tail { + position: absolute; + display: block; + width: 100%; + height: 100%; + mask-image: conic-gradient(transparent 105deg, white 105deg); + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-timing-function: var(--curveEasyEase); + animation-name: tail; +} + +.spinner-tail:before, +.spinner-tail:after { + content: ""; + position: absolute; + display: block; + width: 100%; + height: 100%; + animation: inherit; + background-image: conic-gradient(currentcolor 135deg, transparent 135deg); +} + +@keyframes before { + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(105deg); + } + 100% { + transform: rotate(0deg); + } +} +.spinner-tail::before { + animation-name: before; +} + +@keyframes after { + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(225deg); + } + 100% { + transform: rotate(0deg); + } +} +.spinner-tail::after { + animation-name: after; +} diff --git a/packages/website-astro/src/components/playground-component/loading-spinner.tsx b/packages/website-astro/src/components/playground-component/loading-spinner.tsx index 551f4b74bc..19d008ffe6 100644 --- a/packages/website-astro/src/components/playground-component/loading-spinner.tsx +++ b/packages/website-astro/src/components/playground-component/loading-spinner.tsx @@ -1,4 +1,3 @@ -import { Spinner } from "@fluentui/react-components"; import style from "./loading-spinner.module.css"; export interface LoadingSpinnerProps { @@ -7,7 +6,11 @@ export interface LoadingSpinnerProps { export const LoadingSpinner = ({ message }: LoadingSpinnerProps) => { return (
- +
+ + + +
{message}
); diff --git a/packages/website-astro/src/components/playground-component/playground.tsx b/packages/website-astro/src/components/playground-component/playground.tsx index 07c0ba33a1..c72e0bea42 100644 --- a/packages/website-astro/src/components/playground-component/playground.tsx +++ b/packages/website-astro/src/components/playground-component/playground.tsx @@ -1,5 +1,4 @@ import versions from "@site/playground-versions.json"; -import { useColorMode } from "@site/src/components/docusaurus/core/theme-common"; import { ImportToolbarButton, TypeSpecPlaygroundConfig } from "@typespec/playground-website"; import { Footer, @@ -13,6 +12,7 @@ import { type FunctionComponent, useMemo } from "react"; import { type VersionData } from "./import-map"; import { LoadingSpinner } from "./loading-spinner"; +import { useTheme } from "@site/src/utils/theme-react"; import "@typespec/playground-website/style.css"; import "@typespec/playground/styles.css"; @@ -21,11 +21,11 @@ export interface WebsitePlaygroundProps { } export const WebsitePlayground = ({ versionData }: WebsitePlaygroundProps) => { - const { colorMode } = useColorMode(); + const theme = useTheme(); const editorOptions = useMemo(() => { - return { theme: colorMode === "dark" ? "typespec-dark" : "typespec" }; - }, [colorMode]); + return { theme: theme === "dark" ? "typespec-dark" : "typespec" }; + }, [theme]); return ( { - const { colorMode } = useColorMode(); - - const title = props.title; - const theme = pickedThemes[colorMode]; - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( -
- {title &&
{title}
} - 
-            {tokens.map((line, i) => (
-              

-                {line.map((token, key) => (
-                  
-                ))}
-              

-            ))}
-
-
- )} - - ); -}; diff --git a/packages/website-astro/src/components/react-pages/data-validation.module.css b/packages/website-astro/src/components/react-pages/data-validation.module.css deleted file mode 100644 index 7b97d9f708..0000000000 --- a/packages/website-astro/src/components/react-pages/data-validation.module.css +++ /dev/null @@ -1,29 +0,0 @@ -.hero { - display: flex; - align-items: stretch; - width: 100%; - height: 100%; - max-height: 100%; - max-width: 100%; - min-width: 0; - min-height: 0; - gap: 5px; - overflow: auto; -} - -.hero-main { - flex: 1 1 50%; - max-width: 50%; - height: 100%; - max-height: 100%; -} - -.hero-shared { - flex: 1 1 50%; - max-width: 50%; - height: 100%; -} - -.hero :global(.theme-code-block) { - height: 100%; -} diff --git a/packages/website-astro/src/components/react-pages/data-validation.tsx b/packages/website-astro/src/components/react-pages/data-validation.tsx deleted file mode 100644 index 195518823e..0000000000 --- a/packages/website-astro/src/components/react-pages/data-validation.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { Section } from "@site/src/components/section/section"; -import { SectionedLayout } from "@site/src/components/sectioned-layout/sectioned-layout"; -import { UseCaseOverview } from "@site/src/components/use-case-overview/use-case-overview"; -import { Links } from "@site/src/constants"; -import { TabItem, Tabs } from "../react-tabs"; - -export const DataValidationContent = () => { - return ( -
- - } - /> -
} - > - -
-
} - > - -
- -
} - > - -
- -
- ); -}; - -import commonLibSharedTsp from "@site/src/assets/tsp-samples/data-validation/common-lib/common.tsp?raw"; -import commonLibMainTsp from "@site/src/assets/tsp-samples/data-validation/common-lib/main.tsp?raw"; -export const DataValidationHeroIllustration = () => { - return ( - - - - {commonLibMainTsp} - - - {commonLibSharedTsp} - - - - ); -}; - -import multiFileTsp from "@site/src/assets/tsp-samples/json-schema/multi-file/main.tsp?raw"; -import multiFileAddress from "@site/src/assets/tsp-samples/json-schema/multi-file/out/Address.yaml?raw"; -import multiFileCar from "@site/src/assets/tsp-samples/json-schema/multi-file/out/Car.yaml?raw"; -import multiFilePerson from "@site/src/assets/tsp-samples/json-schema/multi-file/out/Person.yaml?raw"; - -const MultiFileIllustration = () => { - return ( - - - - {multiFileTsp} - - - {multiFileAddress} - - - {multiFileCar} - - - {multiFilePerson} - - - - ); -}; - -import extensionsTsp from "@site/src/assets/tsp-samples/json-schema/extensions/main.tsp?raw"; -import extensionsYaml from "@site/src/assets/tsp-samples/json-schema/extensions/out/output.yaml?raw"; - -const JsonSchemaExtensionsIllustration = () => { - return ( - - - - {extensionsTsp} - - - {extensionsYaml} - - - - ); -}; - -import validationDecoratorsTsp from "@site/src/assets/tsp-samples/data-validation/validation-decorators.tsp?raw"; -import { IllustrationCard } from "../illustration-card/illustration-card"; -import { LearnMoreCard } from "../learn-more-card/learn-more-card"; -import { CodeBlock } from "../prism-code-block/prism-code-block"; - -const ValidationDecoratorsIllustration = () => { - return ( - - {validationDecoratorsTsp} - - ); -}; diff --git a/packages/website-astro/src/components/react-pages/openapi/index.tsx b/packages/website-astro/src/components/react-pages/openapi/index.tsx deleted file mode 100644 index 22b334cce1..0000000000 --- a/packages/website-astro/src/components/react-pages/openapi/index.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import abstractionCode from "@site/src/assets/tsp-samples/openapi3/abstraction.tsp?raw"; -import heroMainTsp from "@site/src/assets/tsp-samples/openapi3/hero/main.tsp?raw"; -import heroOpenAPIYaml from "@site/src/assets/tsp-samples/openapi3/hero/out/openapi.yaml?raw"; -import { Links } from "@site/src/constants"; -import { IllustrationCard } from "../../illustration-card/illustration-card"; -import { OpenAPI3InteroperateIllustration } from "../../interoperate-illustration/interoperate-illustration"; -import { LearnMoreCard } from "../../learn-more-card/learn-more-card"; -import { CodeBlock } from "../../prism-code-block/prism-code-block"; -import { TabItem, Tabs } from "../../react-tabs"; -import { Section } from "../../section/section"; -import { SectionedLayout } from "../../sectioned-layout/sectioned-layout"; -import { UseCaseOverview } from "../../use-case-overview/use-case-overview"; -import style from "./openapi.module.css"; - -export const OpenApiContent = () => { - return ( -
- } - /> - -
} - > - -
- -
} - > - -
- -
- ); -}; - -export const OpenAPI3HeroIllustration = () => { - return ( - - - - {heroMainTsp} - - -
- {heroOpenAPIYaml} -
- - - - ); -}; - -export const OpenAPI3AbstractCode = () => { - return ( - - {abstractionCode} - - ); -}; diff --git a/packages/website-astro/src/components/react-pages/openapi/openapi.module.css b/packages/website-astro/src/components/react-pages/openapi/openapi.module.css deleted file mode 100644 index 2674463062..0000000000 --- a/packages/website-astro/src/components/react-pages/openapi/openapi.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.hero-openapi { - max-height: 50vh; - overflow-y: auto; -} diff --git a/packages/website-astro/src/components/react-pages/playground.tsx b/packages/website-astro/src/components/react-pages/playground.tsx index 16de80b8a3..3cfb17ddd8 100644 --- a/packages/website-astro/src/components/react-pages/playground.tsx +++ b/packages/website-astro/src/components/react-pages/playground.tsx @@ -1,10 +1,16 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState, type ReactNode } from "react"; import "@typespec/playground/styles.css"; -import { type VersionData, loadImportMap } from "../playground-component/import-map"; -import { LoadingSpinner } from "../playground-component/loading-spinner"; +import { FluentLayout } from "../layouts/fluent-layout"; +import { loadImportMap, type VersionData } from "../playground-component/import-map"; -export const AsyncPlayground = ({ latestVersion }: { latestVersion: string }) => { +export const AsyncPlayground = ({ + latestVersion, + fallback, +}: { + latestVersion: string; + fallback?: ReactNode; +}) => { const [mod, setMod] = useState<{ versionData: VersionData; WebsitePlayground: typeof import("../playground-component/playground").WebsitePlayground; @@ -18,9 +24,9 @@ export const AsyncPlayground = ({ latestVersion }: { latestVersion: string }) => // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - return mod ? ( - - ) : ( - + return ( + + {mod ? : fallback} + ); }; diff --git a/packages/website-astro/src/components/react-pages/tooling.module.css b/packages/website-astro/src/components/react-pages/tooling.module.css deleted file mode 100644 index a0a74ecd57..0000000000 --- a/packages/website-astro/src/components/react-pages/tooling.module.css +++ /dev/null @@ -1,60 +0,0 @@ -.formatter-illustration { - --animation-duration: 6s; - width: 100%; - height: 420px; - overflow: hidden; - position: relative; -} - -.formatter-illustration > * { - width: 100%; - height: 416px; -} - -.formatter-illustration-formatted { - position: absolute; - opacity: 0; - top: 0; - left: 0; - z-index: 100; - animation: fade var(--animation-duration) infinite alternate; -} - -.formatter-illustration-codeblock { - height: 100%; - overflow: hidden; -} - -@keyframes fade { - 0% { - opacity: 0; - } - 40% { - opacity: 0; - } - 60% { - opacity: 1; - } - 100% { - opacity: 1; - } -} - -.badge { - position: absolute; - top: 10px; - right: 10px; - z-index: 200; - padding: 2px 5px; - border-radius: 4px; - color: #fefefe; -} - -.formatter-illustration-unformatted .badge { - background-color: var(--colorStatusWarningForeground1); - animation: fade var(--animation-duration) infinite alternate-reverse; -} -.formatter-illustration-formatted .badge { - background-color: var(--ifm-color-primary); - animation: fade var(--animation-duration) infinite alternate; -} diff --git a/packages/website-astro/src/components/react-pages/tooling.tsx b/packages/website-astro/src/components/react-pages/tooling.tsx deleted file mode 100644 index a8bb9158f1..0000000000 --- a/packages/website-astro/src/components/react-pages/tooling.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { CodeBlock } from "../prism-code-block/prism-code-block"; -import { Section } from "../section/section"; -import { SectionedLayout } from "../sectioned-layout/sectioned-layout"; -import { UseCaseOverview } from "../use-case-overview/use-case-overview"; -import style from "./tooling.module.css"; - -export const ToolingContent = () => { - return ( -
- } - /> - -
} - > - -
-
} - > - -
-
} - /> -
- } - /> - -
- ); -}; - -import useBaseUrl from "@docusaurus/useBaseUrl"; -import notFormattedTsp from "@site/src/assets/tsp-samples/tooling/formatter/file.noformat.tsp?raw"; -import formattedTsp from "@site/src/assets/tsp-samples/tooling/formatter/formatted.tsp?raw"; -import { Links } from "../../constants"; -import { LearnMoreCard } from "../learn-more-card/learn-more-card"; -import { LightDarkImg } from "../light-dark-img/light-dark-img"; - -const FormatterIllustration = () => { - return ( -
-
-
Unformatted
- - {notFormattedTsp} - -
-
-
Formatted
- - {formattedTsp} - -
-
- ); -}; diff --git a/packages/website-astro/src/components/react-tabs/index.tsx b/packages/website-astro/src/components/react-tabs/index.tsx deleted file mode 100644 index 6769aa858d..0000000000 --- a/packages/website-astro/src/components/react-tabs/index.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Tab, TabList, type SelectTabData, type SelectTabEvent } from "@fluentui/react-components"; -import { useCallback, useState, type ReactNode } from "react"; - -export interface TabsProps { - children: (typeof TabItem)[]; -} - -export const Tabs = ({ children }) => { - const tabs = children; - - const [selected, setSelected] = useState(tabs[0].props.value); - - const handleTabSelection = useCallback( - (_: SelectTabEvent, data: SelectTabData) => { - setSelected(data.value as any); - }, - [setSelected], - ); - - const content = tabs.find((tab: any) => tab.props.value === selected)?.props.children; - - return ( -
- - {tabs.map((tab: any) => { - return ( - - {tab.props.value} - - ); - })} - -
{content}
-
- ); -}; - -export interface TabItemProps { - value: unknown; - children: ReactNode; -} - -export const TabItem = ({ children }: { value: any; children: any }) => { - return children; -}; diff --git a/packages/website-astro/src/components/section.astro b/packages/website-astro/src/components/section.astro new file mode 100644 index 0000000000..eae5a21e5e --- /dev/null +++ b/packages/website-astro/src/components/section.astro @@ -0,0 +1,162 @@ +--- +import clsx from "clsx"; +import AssetImg from "./asset-img.astro"; +import { DescriptionText, NeutralText, PrimaryText } from "./text/text"; + +export interface Props { + header?: string; + title?: string; + description?: string; + illustration?: string; + itemStyle?: "card" | "plain"; + layout?: "text-left" | "text-right"; +} + +const { layout, header, title, description, illustration } = Astro.props; +--- + + + +
+
+
+ { + header || title || description ? ( +
+
+ {header} + {title} +
+ + {description} + +
+ ) : undefined + } + +
+
+
+ {illustration && } + +
+
diff --git a/packages/website-astro/src/components/section/section.module.css b/packages/website-astro/src/components/section/section.module.css deleted file mode 100644 index be411bcc35..0000000000 --- a/packages/website-astro/src/components/section/section.module.css +++ /dev/null @@ -1,118 +0,0 @@ -.section { - display: flex; - gap: 10px 60px; - width: 100%; - max-width: 100%; - align-items: center; - align-content: center; - flex-direction: column; -} - -@media only screen and (min-width: 1200px) { - .section { - padding: 0 40px; - gap: 3vw; - } - - .text-left { - flex-direction: row; - } - - .text-right { - flex-direction: row-reverse; - } -} - -@media only screen and (min-width: 1500px) { - .section { - gap: 170px; - } -} - -.info-container { - display: flex; - max-width: 100%; - padding: 20px; - justify-content: center; -} - -.info { - display: flex; - width: 520px; - flex-direction: column; - align-items: flex-start; - gap: 56px; -} - -.info-heading { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: var(--spacing-vertical-spacing-xxl, 24px); - align-self: stretch; -} - -.info-title { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: var(--vertical-xl, 20px); - align-self: stretch; -} - -.info-description { - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 28px; -} - -.illustration { - flex: 1 0 50%; - max-width: calc(100% - 40px); - overflow: hidden; -} - -.illustration :global(.tabs-container) { - margin-bottom: 0; -} - -.illustration :global(.tabs-container) :global(.margin-top--md) { - margin-top: 0 !important; -} - -.items-list { - width: 100%; - display: flex; - flex-direction: column; -} - -.item { - display: flex; - gap: 12px; -} - -.items-list-card .item-image { - width: 52px; - height: 52px; - max-width: 52px; -} - -.items-list-plain { - gap: 40px; -} - -.items-list-card { - gap: 12px; -} - -.items-list-plain .item-image { - width: 64px; - height: 64px; - max-width: 64px; -} -.item-content { - display: flex; - flex-direction: column; - gap: 12px; -} diff --git a/packages/website-astro/src/components/section/section.tsx b/packages/website-astro/src/components/section/section.tsx deleted file mode 100644 index 9fe9332b18..0000000000 --- a/packages/website-astro/src/components/section/section.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import clsx from "clsx"; -import type { ReactNode } from "react"; -import { AssetImg } from "../asset-img/asset-img"; -import { DescriptionText, NeutralText, PrimaryText } from "../text/text"; -import style from "./section.module.css"; - -export interface SectionProps { - header?: string; - title?: string; - description?: string; - illustration: string | React.ReactNode; - children?: ReactNode; - itemStyle?: "card" | "plain"; - layout?: "text-left" | "text-right"; -} - -export const Section = ({ - header, - title, - description, - children, - layout, - illustration, -}: SectionProps) => { - const heading = - header || title || description ? ( -
-
- {header} - {title} -
- - {description} - -
- ) : undefined; - return ( -
-
-
- {heading} - {children} -
-
-
- {typeof illustration === "string" ? : illustration} -
-
- ); -}; diff --git a/packages/website-astro/src/components/sectioned-layout.astro b/packages/website-astro/src/components/sectioned-layout.astro new file mode 100644 index 0000000000..6621777ea2 --- /dev/null +++ b/packages/website-astro/src/components/sectioned-layout.astro @@ -0,0 +1,52 @@ +--- + +--- + + + +
+
+
diff --git a/packages/website-astro/src/components/sectioned-layout/sectioned-layout.module.css b/packages/website-astro/src/components/sectioned-layout/sectioned-layout.module.css deleted file mode 100644 index 4d33effd0c..0000000000 --- a/packages/website-astro/src/components/sectioned-layout/sectioned-layout.module.css +++ /dev/null @@ -1,42 +0,0 @@ -.layout { - overflow-x: hidden; -} - -[data-theme="light"] .layout { - background: radial-gradient( - 154.41% 34.41% at 18.39% 93.33%, - rgba(0, 117, 255, 0.1) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient( - 83.89% 52.66% at 92.5% 77.61%, - rgba(192, 59, 196, 0.07) 0%, - rgba(0, 0, 0, 0) 82.67% - ), - linear-gradient(328deg, rgba(0, 120, 212, 0.1) -34.57%, rgba(0, 0, 0, 0) 111.7%); -} - -[data-theme="dark"] .layout { - background: radial-gradient( - 154.41% 34.41% at 18.39% 93.33%, - rgba(0, 117, 255, 0.2) 0%, - rgba(0, 0, 0, 0) 100% - ), - radial-gradient( - 83.89% 52.66% at 92.5% 77.61%, - rgba(192, 59, 196, 0.14) 0%, - rgba(0, 0, 0, 0) 82.67% - ), - linear-gradient(328deg, rgba(0, 120, 212, 0.2) -34.57%, rgba(0, 0, 0, 0) 111.7%); -} - -.layout-inner { - display: flex; - padding: 48px 0px 60px 0px; - margin: auto; - max-width: 1464px; - flex-direction: column; - align-items: center; - gap: 128px; - align-self: stretch; -} diff --git a/packages/website-astro/src/components/sectioned-layout/sectioned-layout.tsx b/packages/website-astro/src/components/sectioned-layout/sectioned-layout.tsx deleted file mode 100644 index 6efff15c5f..0000000000 --- a/packages/website-astro/src/components/sectioned-layout/sectioned-layout.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import style from "./sectioned-layout.module.css"; - -export const SectionedLayout = ({ children }) => { - return ( -
-
{children}
-
- ); -}; diff --git a/packages/website-astro/src/components/starlight-overrides/PageFrame.astro b/packages/website-astro/src/components/starlight-overrides/PageFrame.astro new file mode 100644 index 0000000000..f6f03c4e8f --- /dev/null +++ b/packages/website-astro/src/components/starlight-overrides/PageFrame.astro @@ -0,0 +1,22 @@ +--- +import Default from "@astrojs/starlight/components/PageFrame.astro"; +import Footer from "../footer/footer.astro"; +import type { Props } from "@astrojs/starlight/props"; +--- + + +
+ +
+
+
+
+ + + diff --git a/packages/website-astro/src/components/terminal.astro b/packages/website-astro/src/components/terminal.astro new file mode 100644 index 0000000000..9499a48e7d --- /dev/null +++ b/packages/website-astro/src/components/terminal.astro @@ -0,0 +1,26 @@ +--- +import Window from "./window.astro"; + +const { class: cls, ...rest } = Astro.props; +--- + + + + + 
+    
+
+ diff --git a/packages/website-astro/src/components/terminal/terminal.module.css b/packages/website-astro/src/components/terminal/terminal.module.css deleted file mode 100644 index 5173e84b32..0000000000 --- a/packages/website-astro/src/components/terminal/terminal.module.css +++ /dev/null @@ -1,12 +0,0 @@ -.terminal-code { - background-color: var(--window-color); - margin: 0; - height: 100%; -} - -[data-theme="light"] .terminal { - --window-color: var(--colorNeutralBackground2); -} -[data-theme="dark"] .terminal { - --window-color: var(--colorNeutralBackground4); -} diff --git a/packages/website-astro/src/components/terminal/terminal.tsx b/packages/website-astro/src/components/terminal/terminal.tsx deleted file mode 100644 index 636d05f408..0000000000 --- a/packages/website-astro/src/components/terminal/terminal.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import clsx from "clsx"; -import { Window, type WindowProps } from "../window/window"; -import style from "./terminal.module.css"; - -export interface TerminalProps extends WindowProps {} - -export const Terminal = ({ className, children, ...props }: WindowProps) => { - return ( - - 
{children}
- - ); -}; diff --git a/packages/website-astro/src/components/theme-picker/theme-picker.astro b/packages/website-astro/src/components/theme-picker.astro similarity index 100% rename from packages/website-astro/src/components/theme-picker/theme-picker.astro rename to packages/website-astro/src/components/theme-picker.astro diff --git a/packages/website-astro/src/components/theme-picker/theme-picker.module.css b/packages/website-astro/src/components/theme-picker/theme-picker.module.css deleted file mode 100644 index 05d31224a0..0000000000 --- a/packages/website-astro/src/components/theme-picker/theme-picker.module.css +++ /dev/null @@ -1,35 +0,0 @@ -.theme-picker { - display: flex; - align-items: flex-start; - padding: 4px 6px; - gap: 6px; - border: 1px solid var(--colorNeutralStroke1); - border-radius: 70px; -} - -.theme-option { - cursor: pointer; - display: flex; - padding: 2px; - justify-content: center; - align-items: center; - color: var(--colorNeutralForeground2); -} - -.theme-option:hover { - color: var(--colorNeutralForeground1); - border-radius: 50%; -} - -.selected { - background-color: var(--colorBrandForeground1); - border-radius: 50%; -} - -[data-theme="light"] .selected { - color: var(--colorNeutralStroke1); -} -.selected { - background-color: var(--colorBrandForeground1); - border-radius: 50%; -} diff --git a/packages/website-astro/src/components/types.ts b/packages/website-astro/src/components/types.ts new file mode 100644 index 0000000000..ade48152f7 --- /dev/null +++ b/packages/website-astro/src/components/types.ts @@ -0,0 +1,18 @@ +export type FluentImageName = + | "book-pencil" + | "chat" + | "checkmark" + | "data-trending" + | "design-layout" + | "design" + | "devices-multiple" + | "document-add" + | "document-cloud" + | "editor" + | "eye-dev" + | "firework" + | "people-shield" + | "shield-blue" + | "shield-settings" + | "tasks" + | "text-edit"; diff --git a/packages/website-astro/src/components/use-case-feature/use-case-feature.module.css b/packages/website-astro/src/components/use-case-feature/use-case-feature.module.css deleted file mode 100644 index 6d17e17606..0000000000 --- a/packages/website-astro/src/components/use-case-feature/use-case-feature.module.css +++ /dev/null @@ -1,49 +0,0 @@ -.feature-group { - display: flex; - align-items: stretch; - align-self: center; - flex-direction: column; - padding: 0 80px; -} - -.feature { - display: flex; - flex-direction: column; - align-items: center; - gap: 24px; - max-width: 320px; -} - -.content { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; -} - -.image { - width: 64px; - height: 64px; -} - -@media only screen and (min-width: 1200px) { - .feature-card { - width: 350px; - } -} - -@media only screen and (min-width: 1024px) { - .feature-group { - width: 100%; - flex-direction: row; - justify-content: space-between; - } - - .feature { - align-items: baseline; - } - - .content { - align-items: baseline; - } -} diff --git a/packages/website-astro/src/components/use-case-feature/use-case-feature.tsx b/packages/website-astro/src/components/use-case-feature/use-case-feature.tsx deleted file mode 100644 index a8e226ec52..0000000000 --- a/packages/website-astro/src/components/use-case-feature/use-case-feature.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { type FluentImageName, FluentImg } from "../fluent-img"; -import { Link } from "../link/link"; -import { DescriptionText, NeutralText } from "../text/text"; -import style from "./use-case-feature.module.css"; - -export interface UseCaseFeatureProps { - image: FluentImageName; - title: string; - subtitle: string; - link: string; -} -export const UseCaseFeature = ({ image, title, subtitle, link }: UseCaseFeatureProps) => { - return ( -
- -
- {title} - {subtitle} - Learn more → -
-
- ); -}; - -export const UseCaseFeatureGroup = ({ children }) => { - return
{children}
; -}; diff --git a/packages/website-astro/src/components/use-case-overview.astro b/packages/website-astro/src/components/use-case-overview.astro new file mode 100644 index 0000000000..2e7964e82c --- /dev/null +++ b/packages/website-astro/src/components/use-case-overview.astro @@ -0,0 +1,93 @@ +--- +import Button from "./button.astro"; +import { DescriptionText, NeutralText } from "./text/text"; + +export interface Props { + title: string; + subtitle: string; + link: string; + illustration?: React.ReactNode; +} +const props = Astro.props; +--- + + + +
+
+
+ + {props.title} + +
+ + {props.subtitle} + +
+ +
+ +
+ +
+
+
diff --git a/packages/website-astro/src/components/use-case-overview/use-case-overview.module.css b/packages/website-astro/src/components/use-case-overview/use-case-overview.module.css deleted file mode 100644 index ba89e801fd..0000000000 --- a/packages/website-astro/src/components/use-case-overview/use-case-overview.module.css +++ /dev/null @@ -1,58 +0,0 @@ -.container { - padding-top: 100px; - padding-bottom: 80px; -} - -.overview { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - align-content: center; - - margin: auto; -} - -.content { - flex: 1 1 50%; - padding: 80px; -} - -.spacer { - height: 32px; -} - -.title { - max-width: 522px; -} -.subtitle { - max-width: 522px; -} - -.illustration { - width: 40vw; - max-height: 100%; - padding: 0; - overflow: hidden; -} - -@media only screen and (min-width: 1024px) { - .overview { - flex-direction: row; - } - .illustration { - width: 50vw; - } -} - -@media only screen and (min-width: 1200px) { - .overview { - max-width: 1464px; - } -} - -@media only screen and (max-width: 1023px) { - .illustration { - display: none; - } -} diff --git a/packages/website-astro/src/components/use-case-overview/use-case-overview.tsx b/packages/website-astro/src/components/use-case-overview/use-case-overview.tsx deleted file mode 100644 index e39031d5d0..0000000000 --- a/packages/website-astro/src/components/use-case-overview/use-case-overview.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { Button } from "../button/button"; -import { DescriptionText, NeutralText } from "../text/text"; -import style from "./use-case-overview.module.css"; - -export interface UseCaseOverviewProps { - title: string; - subtitle: string; - link: string; - illustration?: React.ReactNode; -} - -export const UseCaseOverview = (props: UseCaseOverviewProps) => { - return ( -
-
-
- - {props.title} - -
- - {props.subtitle} - -
- -
- -
{props.illustration}
-
-
- ); -}; diff --git a/packages/website-astro/src/components/window-carousel.astro b/packages/website-astro/src/components/window-carousel.astro new file mode 100644 index 0000000000..32c9606cf1 --- /dev/null +++ b/packages/website-astro/src/components/window-carousel.astro @@ -0,0 +1,187 @@ +--- +import Window from "./window.astro"; +const tabs = Object.keys(Astro.slots); +--- + + + + +
+ { + tabs.map(async (name, i) => { + const render = await Astro.slots.render(name); + return ( + + + + ); + }) + } +
+ + + + diff --git a/packages/website-astro/src/components/window-carousel/use-carousel.ts b/packages/website-astro/src/components/window-carousel/use-carousel.ts deleted file mode 100644 index f54b8586de..0000000000 --- a/packages/website-astro/src/components/window-carousel/use-carousel.ts +++ /dev/null @@ -1,51 +0,0 @@ -import { Children, type ReactElement, type ReactNode, isValidElement, useMemo } from "react"; -import type { WindowCarouselItemProps } from "./window-carousel"; - -export interface CarouselData { - items: { - value: string; - label: string; - content: ReactNode; - }[]; -} - -export interface UseCarouselOptions { - children: ReactNode; -} - -export function useCarousel({ children }: UseCarouselOptions): CarouselData { - const items = useMemo(() => { - const result = sanitizeTabsChildren(children); - return result.map((child) => { - return { - value: child.props.value, - label: child.props.value, - content: child.props.children, - }; - }); - }, [children]); - return { items }; -} - -function sanitizeTabsChildren(children: ReactNode) { - return (Children.toArray(children) - .filter((child) => child !== "\n") - .map((child: any) => { - if (!child || (isValidElement(child) && isCarouselItem(child))) { - return child; - } - throw new Error( - `Docusaurus error: Bad child <${ - typeof child.type === "string" ? child.type : child.type.name - }>: all children of the component should be , and every should have a unique "value" prop.`, - ); - }) - ?.filter(Boolean) ?? []) as ReactElement[]; -} - -function isCarouselItem( - comp: ReactElement, -): comp is ReactElement { - const { props } = comp; - return !!props && typeof props === "object" && "value" in props; -} diff --git a/packages/website-astro/src/components/window-carousel/window-carousel.module.css b/packages/website-astro/src/components/window-carousel/window-carousel.module.css deleted file mode 100644 index 2199fbd1e8..0000000000 --- a/packages/website-astro/src/components/window-carousel/window-carousel.module.css +++ /dev/null @@ -1,34 +0,0 @@ -.items { - position: relative; - z-index: 0; -} - -.item { - background-color: var(--colorNeutralBackground1); - box-shadow: var(--shadow4); - box-sizing: border-box; - left: 0; - transition: left 0.2s linear; - width: calc(100% - 100px); -} - -.item:not(.item-selected) { - position: absolute; - top: 10px; - left: 96px; - max-height: calc(100% - 20px); - cursor: pointer; -} - -.item:not(.item-selected):hover { - outline: 4px solid var(--colorBrandForeground1); -} - -.item-selected { - position: relative; - z-index: 100; -} - -.item :global(img) { - display: block; -} diff --git a/packages/website-astro/src/components/window-carousel/window-carousel.tsx b/packages/website-astro/src/components/window-carousel/window-carousel.tsx deleted file mode 100644 index cd21661589..0000000000 --- a/packages/website-astro/src/components/window-carousel/window-carousel.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { Tab, TabList } from "@fluentui/react-components"; -import { Window } from "@site/src/components/window/window"; -import clsx from "clsx"; -import { type ReactNode, useCallback, useState } from "react"; -import { useCarousel } from "./use-carousel"; -import style from "./window-carousel.module.css"; - -export interface WindowCarouselProps { - defaultValue?: string; - children: ReactNode; -} - -export const WindowCarousel = ({ defaultValue, children }: WindowCarouselProps) => { - const { items } = useCarousel({ children }); - - const [value, setValue] = useState(defaultValue ?? items[0].value); - - const handleTabChange = useCallback( - (_: any, data: any) => { - setValue(data.value); - }, - [setValue], - ); - return ( -
-
- {items.map((x) => { - return ( - - {x.content} - - ); - })} -
- - {items.map((x) => ( - - {x.label} - - ))} - -
- ); -}; - -export interface WindowCarouselItemRenderProps { - value: string; - selected: boolean; - onSelected: (value: string) => void; - children: ReactNode; -} - -const WindowCarouselItemRender = ({ - value, - onSelected, - selected, - children, -}: WindowCarouselItemRenderProps) => { - const onClick = useCallback(() => { - onSelected(value); - }, [onSelected, value]); - return ( - - {children} - - ); -}; - -export interface WindowCarouselItemProps { - value: string; - children: ReactNode; -} - -export const WindowCarouselItem = ({ children }: WindowCarouselItemProps) => { - return <>{children}; -}; diff --git a/packages/website-astro/src/components/window.astro b/packages/website-astro/src/components/window.astro new file mode 100644 index 0000000000..0f3e7e71a6 --- /dev/null +++ b/packages/website-astro/src/components/window.astro @@ -0,0 +1,86 @@ +--- +import type { HTMLAttributes } from "astro/types"; + +export interface Props extends HTMLAttributes<"div"> { + title?: string; + className?: string; + hideHeader?: boolean; + children?: React.ReactNode; +} + +const { title, className, hideHeader, children, class: cls, ...others } = Astro.props; +--- + + + +
+ { + hideHeader ? ( + "" + ) : ( + <> +
+
+
+
+
+
+
{title}
+
+
+
+ + ) + } + +
diff --git a/packages/website-astro/src/components/window/window.module.css b/packages/website-astro/src/components/window/window.module.css deleted file mode 100644 index 88ce9f4364..0000000000 --- a/packages/website-astro/src/components/window/window.module.css +++ /dev/null @@ -1,49 +0,0 @@ -.window { - border-radius: 12px; - border: 1px solid var(--colorNeutralStrokeOnBrand); - overflow: hidden; -} - -.header { - background-color: var(--window-color, var(--colorNeutralBackground4)); - display: flex; - align-items: center; - justify-content: space-between; - height: 35px; - padding: 0 16px; -} - -.header-divider { - height: 1px; - align-self: stretch; - background: radial-gradient(circle, var(--colorNeutralStroke2) 0%, rgba(82, 82, 82, 0) 80%); -} - -.header-right-spacer { - width: 52px; -} - -.actions { - display: flex; - align-items: center; - gap: 8px; -} - -.btn-close, -.btn-minify, -.btn-expand { - border-radius: 50%; - width: 12px; - height: 12px; -} - -.btn-close { - background: #ec6a5e; -} -.btn-minify { - background: #f4bf4f; -} - -.btn-expand { - background: #62c554; -} diff --git a/packages/website-astro/src/components/window/window.tsx b/packages/website-astro/src/components/window/window.tsx deleted file mode 100644 index 9636784eed..0000000000 --- a/packages/website-astro/src/components/window/window.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import clsx from "clsx"; -import type { MouseEventHandler } from "react"; -import style from "./window.module.css"; - -export interface WindowProps { - title?: string; - className?: string; - hideHeader?: boolean; - onClick?: MouseEventHandler; - children?: React.ReactNode; -} - -export const Window = ({ className, children, title, hideHeader, ...others }: WindowProps) => { - const header = hideHeader ? ( - "" - ) : ( - <> - -
- - ); - return ( -
- {header} - {children} -
- ); -}; - -interface WindowRimProps { - title?: string; -} -const WindowHeader = ({ title }: WindowRimProps) => { - return ( -
-
-
-
-
-
-
{title}
-
-
- ); -}; diff --git a/packages/website-astro/src/css/custom.css b/packages/website-astro/src/css/custom.css index 7d565d1129..dc505adf48 100644 --- a/packages/website-astro/src/css/custom.css +++ b/packages/website-astro/src/css/custom.css @@ -1,176 +1,9 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - -/* Fluent Colors for reference */ -:root { - /* Brand Foreground */ - --colorBrandForeground1: #0f6cbd; - --colorBrandForeground2: #115ea3; - --colorNeutralForegroundOnBrand: #ffffff; - - /* Brand background */ - --colorBrandBackground: #0f6cbd; - --colorBrandBackgroundHover: #115ea3; - - /* Neutral Foreground */ - --colorNeutralForeground1: #242424; - --colorNeutralForeground2: #424242; - --colorNeutralForeground3: #616161; - - /* Neutral background */ - --colorNeutralBackground1: #ffffff; - --colorNeutralBackground2: #fafafa; - --colorNeutralBackground3: #f5f5f5; - --colorNeutralBackground4: #f0f0f0; - - /* Stroke */ - --colorNeutralStroke1: #d1d1d1; - --colorNeutralStroke2: #e0e0e0; - --colorNeutralStroke3: #f0f0f0; - --colorNeutralStrokeOnBrand: #ffffff; - - --colorNeutralStroke1Hover: #c7c7c7; - - /* Status warning */ - --colorStatusWarningBackground1: #fff9f5; - --colorStatusWarningBackground2: #fdcfb4; - --colorStatusWarningBackground3: #f7630c; - --colorStatusWarningForeground1: #bc4b09; - --colorStatusWarningForeground2: #8a3707; - --colorStatusWarningForeground3: #bc4b09; - - /* Status danger */ - --colorStatusDangerBackground1: #fdf3f4; - --colorStatusDangerBackground2: #eeacb2; - --colorStatusDangerBackground3: #c50f1f; - --colorStatusDangerForeground1: #b10e1c; - --colorStatusDangerForeground2: #6e0811; - --colorStatusDangerForeground3: #c50f1f; - - /* Shadows */ - --shadow2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14); - --shadow4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14); - --shadow8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14); - --shadow16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14); - --shadow28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14); - --shadow64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14); - --shadow2Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25); - --shadow4Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25); - --shadow8Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25); - --shadow16Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.25); - --shadow28Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 14px 28px rgba(0, 0, 0, 0.25); - --shadow64Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 32px 64px rgba(0, 0, 0, 0.25); - - /* Font weight */ - --fontWeightRegular: 400; - --fontWeightMedium: 500; - --fontWeightSemibold: 600; - --fontWeightBold: 700; - - /* Stroke width */ - --strokeWidthThin: 1px; - --strokeWidthThick: 2px; - --strokeWidthThicker: 3px; - --strokeWidthThickest: 4px; - - /* Spacing */ - --spacingHorizontalNone: 0; - --spacingHorizontalXXS: 2px; - --spacingHorizontalXS: 4px; - --spacingHorizontalSNudge: 6px; - --spacingHorizontalS: 8px; - --spacingHorizontalMNudge: 10px; - --spacingHorizontalM: 12px; - --spacingHorizontalL: 16px; - --spacingHorizontalXL: 20px; - --spacingHorizontalXXL: 24px; - --spacingHorizontalXXXL: 32px; - --spacingVerticalNone: 0; - --spacingVerticalXXS: 2px; - --spacingVerticalXS: 4px; - --spacingVerticalSNudge: 6px; - --spacingVerticalS: 8px; - --spacingVerticalMNudge: 10px; - --spacingVerticalM: 12px; - --spacingVerticalL: 16px; - --spacingVerticalXL: 20px; - --spacingVerticalXXL: 24px; - --spacingVerticalXXXL: 32px; -} - -[data-theme="dark"] { - /* Brand Foreground */ - --colorBrandForeground1: #479ef5; - --colorBrandForeground2: #62abf5; - --colorNeutralForegroundOnBrand: #ffffff; - - /* Brand background */ - --colorBrandBackground: #115ea3; - --colorBrandBackgroundHover: #0f6cbd; - - /* Neutral Foreground */ - --colorNeutralForeground1: #ffffff; - --colorNeutralForeground2: #d6d6d6; - --colorNeutralForeground3: #adadad; - - /* Neutral background */ - --colorNeutralBackground1: #292929; - --colorNeutralBackground2: #1f1f1f; - --colorNeutralBackground3: #141414; - --colorNeutralBackground4: #0a0a0a; - - /* Stroke */ - --colorNeutralStroke1: #666666; - --colorNeutralStroke2: #525252; - --colorNeutralStroke3: #3d3d3d; - --colorNeutralStrokeOnBrand: #292929; - - --colorNeutralStroke1Hover: #757575; - - /* Status warning */ - --colorStatusWarningBackground1: #4a1e04; - --colorStatusWarningBackground2: #8a3707; - --colorStatusWarningBackground3: #f7630c; - --colorStatusWarningForeground1: #faa06b; - --colorStatusWarningForeground2: #fdcfb4; - --colorStatusWarningForeground3: #f98845; - - /* Status danger */ - --colorStatusDangerBackground1: #3b0509; - --colorStatusDangerBackground2: #6e0811; - --colorStatusDangerBackground3: #c50f1f; - --colorStatusDangerForeground1: #dc626d; - --colorStatusDangerForeground2: #eeacb2; - --colorStatusDangerForeground3: #dc626d; - - /* Shadows */ - --shadow2: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28); - --shadow4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28); - --shadow8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28); - --shadow16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28); - --shadow28: 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28); - --shadow64: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28); - --shadow2Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25); - --shadow4Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25); - --shadow8Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25); - --shadow16Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.25); - --shadow28Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 14px 28px rgba(0, 0, 0, 0.25); - --shadow64Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 32px 64px rgba(0, 0, 0, 0.25); -} +@import url("./fluentui.css"); :root { --header-height: 50px; -} - -:root[data-theme="light"] { - --sl-color-text-accent: var(--colorBrandForeground1); -} -/* For readability concerns, you should choose a lighter palette in dark mode. */ -:root[data-theme="dark"] { --sl-color-text-accent: var(--colorBrandForeground1); + --sl-color-gray-5: var(--colorNeutralStroke1); } .DocSearch-Button { @@ -194,26 +27,6 @@ a { transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default); } -html { - font-family: - system-ui, - -apple-system, - "Segoe UI", - Roboto, - Ubuntu, - Cantarell, - "Noto Sans", - sans-serif, - "system-ui", - "Segoe UI", - Helvetica, - Arial, - sans-serif, - "Apple Color Emoji", - "Segoe UI Emoji", - "Segoe UI Symbol"; -} - header.header { padding: 0; padding-inline-end: unset !important; diff --git a/packages/website-astro/src/css/dark.css b/packages/website-astro/src/css/dark.css new file mode 100644 index 0000000000..5a7353c6d7 --- /dev/null +++ b/packages/website-astro/src/css/dark.css @@ -0,0 +1,364 @@ +[data-theme="dark"] { + --colorNeutralForeground1: #ffffff; + --colorNeutralForeground1Hover: #ffffff; + --colorNeutralForeground1Pressed: #ffffff; + --colorNeutralForeground1Selected: #ffffff; + --colorNeutralForeground2: #d6d6d6; + --colorNeutralForeground2Hover: #ffffff; + --colorNeutralForeground2Pressed: #ffffff; + --colorNeutralForeground2Selected: #ffffff; + --colorNeutralForeground2BrandHover: #479ef5; + --colorNeutralForeground2BrandPressed: #2886de; + --colorNeutralForeground2BrandSelected: #479ef5; + --colorNeutralForeground3: #adadad; + --colorNeutralForeground3Hover: #d6d6d6; + --colorNeutralForeground3Pressed: #d6d6d6; + --colorNeutralForeground3Selected: #d6d6d6; + --colorNeutralForeground3BrandHover: #479ef5; + --colorNeutralForeground3BrandPressed: #2886de; + --colorNeutralForeground3BrandSelected: #479ef5; + --colorNeutralForeground4: #999999; + --colorNeutralForegroundDisabled: #5c5c5c; + --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, 0.4); + --colorBrandForegroundLink: #479ef5; + --colorBrandForegroundLinkHover: #62abf5; + --colorBrandForegroundLinkPressed: #2886de; + --colorBrandForegroundLinkSelected: #479ef5; + --colorNeutralForeground2Link: #d6d6d6; + --colorNeutralForeground2LinkHover: #ffffff; + --colorNeutralForeground2LinkPressed: #ffffff; + --colorNeutralForeground2LinkSelected: #ffffff; + --colorCompoundBrandForeground1: #479ef5; + --colorCompoundBrandForeground1Hover: #62abf5; + --colorCompoundBrandForeground1Pressed: #2886de; + --colorBrandForeground1: #479ef5; + --colorBrandForeground2: #62abf5; + --colorBrandForeground2Hover: #96c6fa; + --colorBrandForeground2Pressed: #ebf3fc; + --colorNeutralForeground1Static: #242424; + --colorNeutralForegroundStaticInverted: #ffffff; + --colorNeutralForegroundInverted: #242424; + --colorNeutralForegroundInvertedHover: #242424; + --colorNeutralForegroundInvertedPressed: #242424; + --colorNeutralForegroundInvertedSelected: #242424; + --colorNeutralForegroundInverted2: #242424; + --colorNeutralForegroundOnBrand: #ffffff; + --colorNeutralForegroundInvertedLink: #ffffff; + --colorNeutralForegroundInvertedLinkHover: #ffffff; + --colorNeutralForegroundInvertedLinkPressed: #ffffff; + --colorNeutralForegroundInvertedLinkSelected: #ffffff; + --colorBrandForegroundInverted: #0f6cbd; + --colorBrandForegroundInvertedHover: #115ea3; + --colorBrandForegroundInvertedPressed: #0f548c; + --colorBrandForegroundOnLight: #0f6cbd; + --colorBrandForegroundOnLightHover: #115ea3; + --colorBrandForegroundOnLightPressed: #0e4775; + --colorBrandForegroundOnLightSelected: #0f548c; + --colorNeutralBackground1: #292929; + --colorNeutralBackground1Hover: #3d3d3d; + --colorNeutralBackground1Pressed: #1f1f1f; + --colorNeutralBackground1Selected: #383838; + --colorNeutralBackground2: #1f1f1f; + --colorNeutralBackground2Hover: #333333; + --colorNeutralBackground2Pressed: #141414; + --colorNeutralBackground2Selected: #2e2e2e; + --colorNeutralBackground3: #141414; + --colorNeutralBackground3Hover: #292929; + --colorNeutralBackground3Pressed: #0a0a0a; + --colorNeutralBackground3Selected: #242424; + --colorNeutralBackground4: #0a0a0a; + --colorNeutralBackground4Hover: #1f1f1f; + --colorNeutralBackground4Pressed: #000000; + --colorNeutralBackground4Selected: #1a1a1a; + --colorNeutralBackground5: #000000; + --colorNeutralBackground5Hover: #141414; + --colorNeutralBackground5Pressed: #050505; + --colorNeutralBackground5Selected: #0f0f0f; + --colorNeutralBackground6: #333333; + --colorNeutralBackgroundInverted: #ffffff; + --colorNeutralBackgroundStatic: #3d3d3d; + --colorNeutralBackgroundAlpha: rgba(26, 26, 26, 0.5); + --colorNeutralBackgroundAlpha2: rgba(31, 31, 31, 0.7); + --colorSubtleBackground: transparent; + --colorSubtleBackgroundHover: #383838; + --colorSubtleBackgroundPressed: #2e2e2e; + --colorSubtleBackgroundSelected: #333333; + --colorSubtleBackgroundLightAlphaHover: rgba(36, 36, 36, 0.8); + --colorSubtleBackgroundLightAlphaPressed: rgba(36, 36, 36, 0.5); + --colorSubtleBackgroundLightAlphaSelected: transparent; + --colorSubtleBackgroundInverted: transparent; + --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, 0.1); + --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, 0.3); + --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, 0.2); + --colorTransparentBackground: transparent; + --colorTransparentBackgroundHover: transparent; + --colorTransparentBackgroundPressed: transparent; + --colorTransparentBackgroundSelected: transparent; + --colorNeutralBackgroundDisabled: #141414; + --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, 0.1); + --colorNeutralStencil1: #575757; + --colorNeutralStencil2: #333333; + --colorNeutralStencil1Alpha: rgba(255, 255, 255, 0.1); + --colorNeutralStencil2Alpha: rgba(255, 255, 255, 0.05); + --colorBackgroundOverlay: rgba(0, 0, 0, 0.5); + --colorScrollbarOverlay: rgba(255, 255, 255, 0.6); + --colorBrandBackground: #115ea3; + --colorBrandBackgroundHover: #0f6cbd; + --colorBrandBackgroundPressed: #0c3b5e; + --colorBrandBackgroundSelected: #0f548c; + --colorCompoundBrandBackground: #479ef5; + --colorCompoundBrandBackgroundHover: #62abf5; + --colorCompoundBrandBackgroundPressed: #2886de; + --colorBrandBackgroundStatic: #0f6cbd; + --colorBrandBackground2: #082338; + --colorBrandBackground2Hover: #0c3b5e; + --colorBrandBackground2Pressed: #061724; + --colorBrandBackground3Static: #0f548c; + --colorBrandBackground4Static: #0c3b5e; + --colorBrandBackgroundInverted: #ffffff; + --colorBrandBackgroundInvertedHover: #ebf3fc; + --colorBrandBackgroundInvertedPressed: #b4d6fa; + --colorBrandBackgroundInvertedSelected: #cfe4fa; + --colorNeutralCardBackground: #333333; + --colorNeutralCardBackgroundHover: #3d3d3d; + --colorNeutralCardBackgroundPressed: #2e2e2e; + --colorNeutralCardBackgroundSelected: #383838; + --colorNeutralCardBackgroundDisabled: #141414; + --colorNeutralStrokeAccessible: #adadad; + --colorNeutralStrokeAccessibleHover: #bdbdbd; + --colorNeutralStrokeAccessiblePressed: #b3b3b3; + --colorNeutralStrokeAccessibleSelected: #479ef5; + --colorNeutralStroke1: #666666; + --colorNeutralStroke1Hover: #757575; + --colorNeutralStroke1Pressed: #6b6b6b; + --colorNeutralStroke1Selected: #707070; + --colorNeutralStroke2: #525252; + --colorNeutralStroke3: #3d3d3d; + --colorNeutralStrokeSubtle: #0a0a0a; + --colorNeutralStrokeOnBrand: #292929; + --colorNeutralStrokeOnBrand2: #ffffff; + --colorNeutralStrokeOnBrand2Hover: #ffffff; + --colorNeutralStrokeOnBrand2Pressed: #ffffff; + --colorNeutralStrokeOnBrand2Selected: #ffffff; + --colorBrandStroke1: #479ef5; + --colorBrandStroke2: #0e4775; + --colorBrandStroke2Hover: #0e4775; + --colorBrandStroke2Pressed: #0a2e4a; + --colorBrandStroke2Contrast: #0e4775; + --colorCompoundBrandStroke: #479ef5; + --colorCompoundBrandStrokeHover: #62abf5; + --colorCompoundBrandStrokePressed: #2886de; + --colorNeutralStrokeDisabled: #424242; + --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, 0.4); + --colorTransparentStroke: transparent; + --colorTransparentStrokeInteractive: transparent; + --colorTransparentStrokeDisabled: transparent; + --colorNeutralStrokeAlpha: rgba(255, 255, 255, 0.1); + --colorNeutralStrokeAlpha2: rgba(255, 255, 255, 0.2); + --colorStrokeFocus1: #000000; + --colorStrokeFocus2: #ffffff; + --colorNeutralShadowAmbient: rgba(0, 0, 0, 0.24); + --colorNeutralShadowKey: rgba(0, 0, 0, 0.28); + --colorNeutralShadowAmbientLighter: rgba(0, 0, 0, 0.12); + --colorNeutralShadowKeyLighter: rgba(0, 0, 0, 0.14); + --colorNeutralShadowAmbientDarker: rgba(0, 0, 0, 0.4); + --colorNeutralShadowKeyDarker: rgba(0, 0, 0, 0.48); + --colorBrandShadowAmbient: rgba(0, 0, 0, 0.3); + --colorBrandShadowKey: rgba(0, 0, 0, 0.25); + --colorPaletteRedBackground1: #3f1011; + --colorPaletteRedBackground2: #751d1f; + --colorPaletteRedBackground3: #d13438; + --colorPaletteRedForeground1: #e37d80; + --colorPaletteRedForeground2: #f1bbbc; + --colorPaletteRedForeground3: #e37d80; + --colorPaletteRedBorderActive: #e37d80; + --colorPaletteRedBorder1: #d13438; + --colorPaletteRedBorder2: #e37d80; + --colorPaletteGreenBackground1: #052505; + --colorPaletteGreenBackground2: #094509; + --colorPaletteGreenBackground3: #107c10; + --colorPaletteGreenForeground1: #54b054; + --colorPaletteGreenForeground2: #9fd89f; + --colorPaletteGreenForeground3: #9fd89f; + --colorPaletteGreenBorderActive: #54b054; + --colorPaletteGreenBorder1: #107c10; + --colorPaletteGreenBorder2: #9fd89f; + --colorPaletteDarkOrangeBackground1: #411200; + --colorPaletteDarkOrangeBackground2: #7a2101; + --colorPaletteDarkOrangeBackground3: #da3b01; + --colorPaletteDarkOrangeForeground1: #e9835e; + --colorPaletteDarkOrangeForeground2: #f4bfab; + --colorPaletteDarkOrangeForeground3: #e9835e; + --colorPaletteDarkOrangeBorderActive: #e9835e; + --colorPaletteDarkOrangeBorder1: #da3b01; + --colorPaletteDarkOrangeBorder2: #e9835e; + --colorPaletteYellowBackground1: #4c4400; + --colorPaletteYellowBackground2: #817400; + --colorPaletteYellowBackground3: #fde300; + --colorPaletteYellowForeground1: #feee66; + --colorPaletteYellowForeground2: #fef7b2; + --colorPaletteYellowForeground3: #fdea3d; + --colorPaletteYellowBorderActive: #feee66; + --colorPaletteYellowBorder1: #fde300; + --colorPaletteYellowBorder2: #fdea3d; + --colorPaletteBerryBackground1: #3a1136; + --colorPaletteBerryBackground2: #6d2064; + --colorPaletteBerryBackground3: #c239b3; + --colorPaletteBerryForeground1: #da7ed0; + --colorPaletteBerryForeground2: #edbbe7; + --colorPaletteBerryForeground3: #d161c4; + --colorPaletteBerryBorderActive: #da7ed0; + --colorPaletteBerryBorder1: #c239b3; + --colorPaletteBerryBorder2: #d161c4; + --colorPaletteLightGreenBackground1: #063004; + --colorPaletteLightGreenBackground2: #0b5a08; + --colorPaletteLightGreenBackground3: #13a10e; + --colorPaletteLightGreenForeground1: #5ec75a; + --colorPaletteLightGreenForeground2: #a7e3a5; + --colorPaletteLightGreenForeground3: #3db838; + --colorPaletteLightGreenBorderActive: #5ec75a; + --colorPaletteLightGreenBorder1: #13a10e; + --colorPaletteLightGreenBorder2: #3db838; + --colorPaletteMarigoldBackground1: #463100; + --colorPaletteMarigoldBackground2: #835b00; + --colorPaletteMarigoldBackground3: #eaa300; + --colorPaletteMarigoldForeground1: #f2c661; + --colorPaletteMarigoldForeground2: #f9e2ae; + --colorPaletteMarigoldForeground3: #efb839; + --colorPaletteMarigoldBorderActive: #f2c661; + --colorPaletteMarigoldBorder1: #eaa300; + --colorPaletteMarigoldBorder2: #efb839; + --colorPaletteRedForegroundInverted: #d13438; + --colorPaletteGreenForegroundInverted: #107c10; + --colorPaletteYellowForegroundInverted: #817400; + --colorPaletteDarkRedBackground2: #590815; + --colorPaletteDarkRedForeground2: #d69ca5; + --colorPaletteDarkRedBorderActive: #ac4f5e; + --colorPaletteCranberryBackground2: #6e0811; + --colorPaletteCranberryForeground2: #eeacb2; + --colorPaletteCranberryBorderActive: #dc626d; + --colorPalettePumpkinBackground2: #712d09; + --colorPalettePumpkinForeground2: #efc4ad; + --colorPalettePumpkinBorderActive: #df8e64; + --colorPalettePeachBackground2: #8f4e00; + --colorPalettePeachForeground2: #ffddb3; + --colorPalettePeachBorderActive: #ffba66; + --colorPaletteGoldBackground2: #6c5700; + --colorPaletteGoldForeground2: #ecdfa5; + --colorPaletteGoldBorderActive: #dac157; + --colorPaletteBrassBackground2: #553e06; + --colorPaletteBrassForeground2: #e0cea2; + --colorPaletteBrassBorderActive: #c1a256; + --colorPaletteBrownBackground2: #50301a; + --colorPaletteBrownForeground2: #ddc3b0; + --colorPaletteBrownBorderActive: #bb8f6f; + --colorPaletteForestBackground2: #294903; + --colorPaletteForestForeground2: #bdd99b; + --colorPaletteForestBorderActive: #85b44c; + --colorPaletteSeafoamBackground2: #00723b; + --colorPaletteSeafoamForeground2: #a8f0cd; + --colorPaletteSeafoamBorderActive: #5ae0a0; + --colorPaletteDarkGreenBackground2: #063b06; + --colorPaletteDarkGreenForeground2: #9ad29a; + --colorPaletteDarkGreenBorderActive: #4da64d; + --colorPaletteLightTealBackground2: #00666d; + --colorPaletteLightTealForeground2: #a6e9ed; + --colorPaletteLightTealBorderActive: #58d3db; + --colorPaletteTealBackground2: #02494c; + --colorPaletteTealForeground2: #9bd9db; + --colorPaletteTealBorderActive: #4cb4b7; + --colorPaletteSteelBackground2: #00333f; + --colorPaletteSteelForeground2: #94c8d4; + --colorPaletteSteelBorderActive: #4496a9; + --colorPaletteBlueBackground2: #004377; + --colorPaletteBlueForeground2: #a9d3f2; + --colorPaletteBlueBorderActive: #5caae5; + --colorPaletteRoyalBlueBackground2: #002c4e; + --colorPaletteRoyalBlueForeground2: #9abfdc; + --colorPaletteRoyalBlueBorderActive: #4a89ba; + --colorPaletteCornflowerBackground2: #2c3c85; + --colorPaletteCornflowerForeground2: #c8d1fa; + --colorPaletteCornflowerBorderActive: #93a4f4; + --colorPaletteNavyBackground2: #001665; + --colorPaletteNavyForeground2: #a3b2e8; + --colorPaletteNavyBorderActive: #546fd2; + --colorPaletteLavenderBackground2: #3f3682; + --colorPaletteLavenderForeground2: #d2ccf8; + --colorPaletteLavenderBorderActive: #a79cf1; + --colorPalettePurpleBackground2: #341a51; + --colorPalettePurpleForeground2: #c6b1de; + --colorPalettePurpleBorderActive: #9470bd; + --colorPaletteGrapeBackground2: #4c0d55; + --colorPaletteGrapeForeground2: #d9a7e0; + --colorPaletteGrapeBorderActive: #b55fc1; + --colorPaletteLilacBackground2: #63276d; + --colorPaletteLilacForeground2: #e6bfed; + --colorPaletteLilacBorderActive: #cf87da; + --colorPalettePinkBackground2: #80215d; + --colorPalettePinkForeground2: #f7c0e3; + --colorPalettePinkBorderActive: #ef85c8; + --colorPaletteMagentaBackground2: #6b0043; + --colorPaletteMagentaForeground2: #eca5d1; + --colorPaletteMagentaBorderActive: #d957a8; + --colorPalettePlumBackground2: #5a003b; + --colorPalettePlumForeground2: #d696c0; + --colorPalettePlumBorderActive: #ad4589; + --colorPaletteBeigeBackground2: #444241; + --colorPaletteBeigeForeground2: #d7d4d4; + --colorPaletteBeigeBorderActive: #afabaa; + --colorPaletteMinkBackground2: #343231; + --colorPaletteMinkForeground2: #cecccb; + --colorPaletteMinkBorderActive: #9e9b99; + --colorPalettePlatinumBackground2: #3b4447; + --colorPalettePlatinumForeground2: #cdd6d8; + --colorPalettePlatinumBorderActive: #a0adb2; + --colorPaletteAnchorBackground2: #202427; + --colorPaletteAnchorForeground2: #bcc3c7; + --colorPaletteAnchorBorderActive: #808a90; + --colorStatusSuccessBackground1: #052505; + --colorStatusSuccessBackground2: #094509; + --colorStatusSuccessBackground3: #107c10; + --colorStatusSuccessForeground1: #54b054; + --colorStatusSuccessForeground2: #9fd89f; + --colorStatusSuccessForeground3: #9fd89f; + --colorStatusSuccessBorderActive: #54b054; + --colorStatusSuccessForegroundInverted: #0e700e; + --colorStatusSuccessBorder1: #107c10; + --colorStatusSuccessBorder2: #9fd89f; + --colorStatusWarningBackground1: #4a1e04; + --colorStatusWarningBackground2: #8a3707; + --colorStatusWarningBackground3: #f7630c; + --colorStatusWarningForeground1: #faa06b; + --colorStatusWarningForeground2: #fdcfb4; + --colorStatusWarningForeground3: #f98845; + --colorStatusWarningBorderActive: #faa06b; + --colorStatusWarningForegroundInverted: #bc4b09; + --colorStatusWarningBorder1: #f7630c; + --colorStatusWarningBorder2: #f98845; + --colorStatusDangerBackground1: #3b0509; + --colorStatusDangerBackground2: #6e0811; + --colorStatusDangerBackground3: #c50f1f; + --colorStatusDangerForeground1: #dc626d; + --colorStatusDangerForeground2: #eeacb2; + --colorStatusDangerForeground3: #eeacb2; + --colorStatusDangerBorderActive: #dc626d; + --colorStatusDangerForegroundInverted: #b10e1c; + --colorStatusDangerBorder1: #c50f1f; + --colorStatusDangerBorder2: #dc626d; + --colorStatusDangerBackground3Hover: #b10e1c; + --colorStatusDangerBackground3Pressed: #960b18; + + /* Shadows */ + --shadow2: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28); + --shadow4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28); + --shadow8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28); + --shadow16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28); + --shadow28: 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28); + --shadow64: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28); + --shadow2Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25); + --shadow4Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25); + --shadow8Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25); + --shadow16Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.25); + --shadow28Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 14px 28px rgba(0, 0, 0, 0.25); + --shadow64Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 32px 64px rgba(0, 0, 0, 0.25); +} diff --git a/packages/website-astro/src/css/fluentui.css b/packages/website-astro/src/css/fluentui.css new file mode 100644 index 0000000000..e25ce78769 --- /dev/null +++ b/packages/website-astro/src/css/fluentui.css @@ -0,0 +1,111 @@ +@import url("./light.css"); +@import url("./dark.css"); + +/* Fluent Colors for reference */ +:root { + /* Border radius */ + --borderRadiusNone: 0; + --borderRadiusSmall: 2px; + --borderRadiusMedium: 4px; + --borderRadiusLarge: 6px; + --borderRadiusXLarge: 8px; + --borderRadiusCircular: 10000px; + + /** Font sizes */ + --fontSizeBase100: 10px; + --fontSizeBase200: 12px; + --fontSizeBase300: 14px; + --fontSizeBase400: 16px; + --fontSizeBase500: 20px; + --fontSizeBase600: 24px; + --fontSizeHero700: 28px; + --fontSizeHero800: 32px; + --fontSizeHero900: 40px; + --fontSizeHero1000: 68px; + + /** Line height*/ + --lineHeightBase100: 14px; + --lineHeightBase200: 16px; + --lineHeightBase300: 20px; + --lineHeightBase400: 22px; + --lineHeightBase500: 28px; + --lineHeightBase600: 32px; + --lineHeightHero700: 36px; + --lineHeightHero800: 40px; + --lineHeightHero900: 52px; + --lineHeightHero1000: 92px; + + /** Font families */ + --fontFamilyBase: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, + Roboto, "Helvetica Neue", sans-serif; + --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace; + --fontFamilyNumeric: Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, + BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; + + /* Font weight */ + --fontWeightRegular: 400; + --fontWeightMedium: 500; + --fontWeightSemibold: 600; + --fontWeightBold: 700; + + /* Stroke width */ + --strokeWidthThin: 1px; + --strokeWidthThick: 2px; + --strokeWidthThicker: 3px; + --strokeWidthThickest: 4px; + + /* Spacing */ + --spacingHorizontalNone: 0; + --spacingHorizontalXXS: 2px; + --spacingHorizontalXS: 4px; + --spacingHorizontalSNudge: 6px; + --spacingHorizontalS: 8px; + --spacingHorizontalMNudge: 10px; + --spacingHorizontalM: 12px; + --spacingHorizontalL: 16px; + --spacingHorizontalXL: 20px; + --spacingHorizontalXXL: 24px; + --spacingHorizontalXXXL: 32px; + --spacingVerticalNone: 0; + --spacingVerticalXXS: 2px; + --spacingVerticalXS: 4px; + --spacingVerticalSNudge: 6px; + --spacingVerticalS: 8px; + --spacingVerticalMNudge: 10px; + --spacingVerticalM: 12px; + --spacingVerticalL: 16px; + --spacingVerticalXL: 20px; + --spacingVerticalXXL: 24px; + --spacingVerticalXXXL: 32px; + + /* Duration */ + --durationUltraFast: 50ms; + --durationFaster: 100ms; + --durationFast: 150ms; + --durationNormal: 200ms; + --durationGentle: 250ms; + --durationSlow: 300ms; + --durationSlower: 400ms; + --durationUltraSlow: 500ms; + + /* Curve */ + --curveAccelerateMax: cubic-bezier(0.9, 0.1, 1, 0.2); + --curveAccelerateMid: cubic-bezier(1, 0, 1, 1); + --curveAccelerateMin: cubic-bezier(0.8, 0, 0.78, 1); + --curveDecelerateMax: cubic-bezier(0.1, 0.9, 0.2, 1); + --curveDecelerateMid: cubic-bezier(0, 0, 0, 1); + --curveDecelerateMin: cubic-bezier(0.33, 0, 0.1, 1); + --curveEasyEaseMax: cubic-bezier(0.8, 0, 0.2, 1); + --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1); + --curveLinear: cubic-bezier(0, 0, 1, 1); +} + +html { + font-family: var(--fontFamilyBase); + color: var(--colorNeutralForeground1); + font-size: var(--fontSizeBase300); + font-weight: var(--fontWeightRegular); + line-height: var(--lineHeightBase300); + -webkit-font-smoothing: antialiased; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} diff --git a/packages/website-astro/src/css/light.css b/packages/website-astro/src/css/light.css new file mode 100644 index 0000000000..62277b74c2 --- /dev/null +++ b/packages/website-astro/src/css/light.css @@ -0,0 +1,365 @@ +[data-theme="light"] { + /* Neutral */ + --colorNeutralForeground1: #242424; + --colorNeutralForeground1Hover: #242424; + --colorNeutralForeground1Pressed: #242424; + --colorNeutralForeground1Selected: #242424; + --colorNeutralForeground2: #424242; + --colorNeutralForeground2Hover: #242424; + --colorNeutralForeground2Pressed: #242424; + --colorNeutralForeground2Selected: #242424; + --colorNeutralForeground2BrandHover: #0f6cbd; + --colorNeutralForeground2BrandPressed: #115ea3; + --colorNeutralForeground2BrandSelected: #0f6cbd; + --colorNeutralForeground3: #616161; + --colorNeutralForeground3Hover: #424242; + --colorNeutralForeground3Pressed: #424242; + --colorNeutralForeground3Selected: #424242; + --colorNeutralForeground3BrandHover: #0f6cbd; + --colorNeutralForeground3BrandPressed: #115ea3; + --colorNeutralForeground3BrandSelected: #0f6cbd; + --colorNeutralForeground4: #707070; + --colorNeutralForegroundDisabled: #bdbdbd; + --colorNeutralForegroundInvertedDisabled: rgba(255, 255, 255, 0.4); + --colorBrandForegroundLink: #115ea3; + --colorBrandForegroundLinkHover: #0f548c; + --colorBrandForegroundLinkPressed: #0c3b5e; + --colorBrandForegroundLinkSelected: #115ea3; + --colorNeutralForeground2Link: #424242; + --colorNeutralForeground2LinkHover: #242424; + --colorNeutralForeground2LinkPressed: #242424; + --colorNeutralForeground2LinkSelected: #242424; + --colorCompoundBrandForeground1: #0f6cbd; + --colorCompoundBrandForeground1Hover: #115ea3; + --colorCompoundBrandForeground1Pressed: #0f548c; + --colorBrandForeground1: #0f6cbd; + --colorBrandForeground2: #115ea3; + --colorBrandForeground2Hover: #0f548c; + --colorBrandForeground2Pressed: #0a2e4a; + --colorNeutralForeground1Static: #242424; + --colorNeutralForegroundStaticInverted: #ffffff; + --colorNeutralForegroundInverted: #ffffff; + --colorNeutralForegroundInvertedHover: #ffffff; + --colorNeutralForegroundInvertedPressed: #ffffff; + --colorNeutralForegroundInvertedSelected: #ffffff; + --colorNeutralForegroundInverted2: #ffffff; + --colorNeutralForegroundOnBrand: #ffffff; + --colorNeutralForegroundInvertedLink: #ffffff; + --colorNeutralForegroundInvertedLinkHover: #ffffff; + --colorNeutralForegroundInvertedLinkPressed: #ffffff; + --colorNeutralForegroundInvertedLinkSelected: #ffffff; + --colorBrandForegroundInverted: #479ef5; + --colorBrandForegroundInvertedHover: #62abf5; + --colorBrandForegroundInvertedPressed: #479ef5; + --colorBrandForegroundOnLight: #0f6cbd; + --colorBrandForegroundOnLightHover: #115ea3; + --colorBrandForegroundOnLightPressed: #0e4775; + --colorBrandForegroundOnLightSelected: #0f548c; + --colorNeutralBackground1: #ffffff; + --colorNeutralBackground1Hover: #f5f5f5; + --colorNeutralBackground1Pressed: #e0e0e0; + --colorNeutralBackground1Selected: #ebebeb; + --colorNeutralBackground2: #fafafa; + --colorNeutralBackground2Hover: #f0f0f0; + --colorNeutralBackground2Pressed: #dbdbdb; + --colorNeutralBackground2Selected: #e6e6e6; + --colorNeutralBackground3: #f5f5f5; + --colorNeutralBackground3Hover: #ebebeb; + --colorNeutralBackground3Pressed: #d6d6d6; + --colorNeutralBackground3Selected: #e0e0e0; + --colorNeutralBackground4: #f0f0f0; + --colorNeutralBackground4Hover: #fafafa; + --colorNeutralBackground4Pressed: #f5f5f5; + --colorNeutralBackground4Selected: #ffffff; + --colorNeutralBackground5: #ebebeb; + --colorNeutralBackground5Hover: #f5f5f5; + --colorNeutralBackground5Pressed: #f0f0f0; + --colorNeutralBackground5Selected: #fafafa; + --colorNeutralBackground6: #e6e6e6; + --colorNeutralBackgroundInverted: #292929; + --colorNeutralBackgroundStatic: #333333; + --colorNeutralBackgroundAlpha: rgba(255, 255, 255, 0.5); + --colorNeutralBackgroundAlpha2: rgba(255, 255, 255, 0.8); + --colorSubtleBackground: transparent; + --colorSubtleBackgroundHover: #f5f5f5; + --colorSubtleBackgroundPressed: #e0e0e0; + --colorSubtleBackgroundSelected: #ebebeb; + --colorSubtleBackgroundLightAlphaHover: rgba(255, 255, 255, 0.7); + --colorSubtleBackgroundLightAlphaPressed: rgba(255, 255, 255, 0.5); + --colorSubtleBackgroundLightAlphaSelected: transparent; + --colorSubtleBackgroundInverted: transparent; + --colorSubtleBackgroundInvertedHover: rgba(0, 0, 0, 0.1); + --colorSubtleBackgroundInvertedPressed: rgba(0, 0, 0, 0.3); + --colorSubtleBackgroundInvertedSelected: rgba(0, 0, 0, 0.2); + --colorTransparentBackground: transparent; + --colorTransparentBackgroundHover: transparent; + --colorTransparentBackgroundPressed: transparent; + --colorTransparentBackgroundSelected: transparent; + --colorNeutralBackgroundDisabled: #f0f0f0; + --colorNeutralBackgroundInvertedDisabled: rgba(255, 255, 255, 0.1); + --colorNeutralStencil1: #e6e6e6; + --colorNeutralStencil2: #fafafa; + --colorNeutralStencil1Alpha: rgba(0, 0, 0, 0.1); + --colorNeutralStencil2Alpha: rgba(0, 0, 0, 0.05); + --colorBackgroundOverlay: rgba(0, 0, 0, 0.4); + --colorScrollbarOverlay: rgba(0, 0, 0, 0.5); + --colorBrandBackground: #0f6cbd; + --colorBrandBackgroundHover: #115ea3; + --colorBrandBackgroundPressed: #0c3b5e; + --colorBrandBackgroundSelected: #0f548c; + --colorCompoundBrandBackground: #0f6cbd; + --colorCompoundBrandBackgroundHover: #115ea3; + --colorCompoundBrandBackgroundPressed: #0f548c; + --colorBrandBackgroundStatic: #0f6cbd; + --colorBrandBackground2: #ebf3fc; + --colorBrandBackground2Hover: #cfe4fa; + --colorBrandBackground2Pressed: #96c6fa; + --colorBrandBackground3Static: #0f548c; + --colorBrandBackground4Static: #0c3b5e; + --colorBrandBackgroundInverted: #ffffff; + --colorBrandBackgroundInvertedHover: #ebf3fc; + --colorBrandBackgroundInvertedPressed: #b4d6fa; + --colorBrandBackgroundInvertedSelected: #cfe4fa; + --colorNeutralCardBackground: #fafafa; + --colorNeutralCardBackgroundHover: #ffffff; + --colorNeutralCardBackgroundPressed: #f5f5f5; + --colorNeutralCardBackgroundSelected: #ebebeb; + --colorNeutralCardBackgroundDisabled: #f0f0f0; + --colorNeutralStrokeAccessible: #616161; + --colorNeutralStrokeAccessibleHover: #575757; + --colorNeutralStrokeAccessiblePressed: #4d4d4d; + --colorNeutralStrokeAccessibleSelected: #0f6cbd; + --colorNeutralStroke1: #d1d1d1; + --colorNeutralStroke1Hover: #c7c7c7; + --colorNeutralStroke1Pressed: #b3b3b3; + --colorNeutralStroke1Selected: #bdbdbd; + --colorNeutralStroke2: #e0e0e0; + --colorNeutralStroke3: #f0f0f0; + --colorNeutralStrokeSubtle: #e0e0e0; + --colorNeutralStrokeOnBrand: #ffffff; + --colorNeutralStrokeOnBrand2: #ffffff; + --colorNeutralStrokeOnBrand2Hover: #ffffff; + --colorNeutralStrokeOnBrand2Pressed: #ffffff; + --colorNeutralStrokeOnBrand2Selected: #ffffff; + --colorBrandStroke1: #0f6cbd; + --colorBrandStroke2: #b4d6fa; + --colorBrandStroke2Hover: #77b7f7; + --colorBrandStroke2Pressed: #0f6cbd; + --colorBrandStroke2Contrast: #b4d6fa; + --colorCompoundBrandStroke: #0f6cbd; + --colorCompoundBrandStrokeHover: #115ea3; + --colorCompoundBrandStrokePressed: #0f548c; + --colorNeutralStrokeDisabled: #e0e0e0; + --colorNeutralStrokeInvertedDisabled: rgba(255, 255, 255, 0.4); + --colorTransparentStroke: transparent; + --colorTransparentStrokeInteractive: transparent; + --colorTransparentStrokeDisabled: transparent; + --colorNeutralStrokeAlpha: rgba(0, 0, 0, 0.05); + --colorNeutralStrokeAlpha2: rgba(255, 255, 255, 0.2); + --colorStrokeFocus1: #ffffff; + --colorStrokeFocus2: #000000; + --colorNeutralShadowAmbient: rgba(0, 0, 0, 0.12); + --colorNeutralShadowKey: rgba(0, 0, 0, 0.14); + --colorNeutralShadowAmbientLighter: rgba(0, 0, 0, 0.06); + --colorNeutralShadowKeyLighter: rgba(0, 0, 0, 0.07); + --colorNeutralShadowAmbientDarker: rgba(0, 0, 0, 0.2); + --colorNeutralShadowKeyDarker: rgba(0, 0, 0, 0.24); + --colorBrandShadowAmbient: rgba(0, 0, 0, 0.3); + --colorBrandShadowKey: rgba(0, 0, 0, 0.25); + --colorPaletteRedBackground1: #fdf6f6; + --colorPaletteRedBackground2: #f1bbbc; + --colorPaletteRedBackground3: #d13438; + --colorPaletteRedForeground1: #bc2f32; + --colorPaletteRedForeground2: #751d1f; + --colorPaletteRedForeground3: #d13438; + --colorPaletteRedBorderActive: #d13438; + --colorPaletteRedBorder1: #f1bbbc; + --colorPaletteRedBorder2: #d13438; + --colorPaletteGreenBackground1: #f1faf1; + --colorPaletteGreenBackground2: #9fd89f; + --colorPaletteGreenBackground3: #107c10; + --colorPaletteGreenForeground1: #0e700e; + --colorPaletteGreenForeground2: #094509; + --colorPaletteGreenForeground3: #107c10; + --colorPaletteGreenBorderActive: #107c10; + --colorPaletteGreenBorder1: #9fd89f; + --colorPaletteGreenBorder2: #107c10; + --colorPaletteDarkOrangeBackground1: #fdf6f3; + --colorPaletteDarkOrangeBackground2: #f4bfab; + --colorPaletteDarkOrangeBackground3: #da3b01; + --colorPaletteDarkOrangeForeground1: #c43501; + --colorPaletteDarkOrangeForeground2: #7a2101; + --colorPaletteDarkOrangeForeground3: #da3b01; + --colorPaletteDarkOrangeBorderActive: #da3b01; + --colorPaletteDarkOrangeBorder1: #f4bfab; + --colorPaletteDarkOrangeBorder2: #da3b01; + --colorPaletteYellowBackground1: #fffef5; + --colorPaletteYellowBackground2: #fef7b2; + --colorPaletteYellowBackground3: #fde300; + --colorPaletteYellowForeground1: #817400; + --colorPaletteYellowForeground2: #817400; + --colorPaletteYellowForeground3: #fde300; + --colorPaletteYellowBorderActive: #fde300; + --colorPaletteYellowBorder1: #fef7b2; + --colorPaletteYellowBorder2: #fde300; + --colorPaletteBerryBackground1: #fdf5fc; + --colorPaletteBerryBackground2: #edbbe7; + --colorPaletteBerryBackground3: #c239b3; + --colorPaletteBerryForeground1: #af33a1; + --colorPaletteBerryForeground2: #6d2064; + --colorPaletteBerryForeground3: #c239b3; + --colorPaletteBerryBorderActive: #c239b3; + --colorPaletteBerryBorder1: #edbbe7; + --colorPaletteBerryBorder2: #c239b3; + --colorPaletteLightGreenBackground1: #f2fbf2; + --colorPaletteLightGreenBackground2: #a7e3a5; + --colorPaletteLightGreenBackground3: #13a10e; + --colorPaletteLightGreenForeground1: #11910d; + --colorPaletteLightGreenForeground2: #0b5a08; + --colorPaletteLightGreenForeground3: #13a10e; + --colorPaletteLightGreenBorderActive: #13a10e; + --colorPaletteLightGreenBorder1: #a7e3a5; + --colorPaletteLightGreenBorder2: #13a10e; + --colorPaletteMarigoldBackground1: #fefbf4; + --colorPaletteMarigoldBackground2: #f9e2ae; + --colorPaletteMarigoldBackground3: #eaa300; + --colorPaletteMarigoldForeground1: #d39300; + --colorPaletteMarigoldForeground2: #835b00; + --colorPaletteMarigoldForeground3: #eaa300; + --colorPaletteMarigoldBorderActive: #eaa300; + --colorPaletteMarigoldBorder1: #f9e2ae; + --colorPaletteMarigoldBorder2: #eaa300; + --colorPaletteRedForegroundInverted: #dc5e62; + --colorPaletteGreenForegroundInverted: #359b35; + --colorPaletteYellowForegroundInverted: #fef7b2; + --colorPaletteDarkRedBackground2: #d69ca5; + --colorPaletteDarkRedForeground2: #420610; + --colorPaletteDarkRedBorderActive: #750b1c; + --colorPaletteCranberryBackground2: #eeacb2; + --colorPaletteCranberryForeground2: #6e0811; + --colorPaletteCranberryBorderActive: #c50f1f; + --colorPalettePumpkinBackground2: #efc4ad; + --colorPalettePumpkinForeground2: #712d09; + --colorPalettePumpkinBorderActive: #ca5010; + --colorPalettePeachBackground2: #ffddb3; + --colorPalettePeachForeground2: #8f4e00; + --colorPalettePeachBorderActive: #ff8c00; + --colorPaletteGoldBackground2: #ecdfa5; + --colorPaletteGoldForeground2: #6c5700; + --colorPaletteGoldBorderActive: #c19c00; + --colorPaletteBrassBackground2: #e0cea2; + --colorPaletteBrassForeground2: #553e06; + --colorPaletteBrassBorderActive: #986f0b; + --colorPaletteBrownBackground2: #ddc3b0; + --colorPaletteBrownForeground2: #50301a; + --colorPaletteBrownBorderActive: #8e562e; + --colorPaletteForestBackground2: #bdd99b; + --colorPaletteForestForeground2: #294903; + --colorPaletteForestBorderActive: #498205; + --colorPaletteSeafoamBackground2: #a8f0cd; + --colorPaletteSeafoamForeground2: #00723b; + --colorPaletteSeafoamBorderActive: #00cc6a; + --colorPaletteDarkGreenBackground2: #9ad29a; + --colorPaletteDarkGreenForeground2: #063b06; + --colorPaletteDarkGreenBorderActive: #0b6a0b; + --colorPaletteLightTealBackground2: #a6e9ed; + --colorPaletteLightTealForeground2: #00666d; + --colorPaletteLightTealBorderActive: #00b7c3; + --colorPaletteTealBackground2: #9bd9db; + --colorPaletteTealForeground2: #02494c; + --colorPaletteTealBorderActive: #038387; + --colorPaletteSteelBackground2: #94c8d4; + --colorPaletteSteelForeground2: #00333f; + --colorPaletteSteelBorderActive: #005b70; + --colorPaletteBlueBackground2: #a9d3f2; + --colorPaletteBlueForeground2: #004377; + --colorPaletteBlueBorderActive: #0078d4; + --colorPaletteRoyalBlueBackground2: #9abfdc; + --colorPaletteRoyalBlueForeground2: #002c4e; + --colorPaletteRoyalBlueBorderActive: #004e8c; + --colorPaletteCornflowerBackground2: #c8d1fa; + --colorPaletteCornflowerForeground2: #2c3c85; + --colorPaletteCornflowerBorderActive: #4f6bed; + --colorPaletteNavyBackground2: #a3b2e8; + --colorPaletteNavyForeground2: #001665; + --colorPaletteNavyBorderActive: #0027b4; + --colorPaletteLavenderBackground2: #d2ccf8; + --colorPaletteLavenderForeground2: #3f3682; + --colorPaletteLavenderBorderActive: #7160e8; + --colorPalettePurpleBackground2: #c6b1de; + --colorPalettePurpleForeground2: #341a51; + --colorPalettePurpleBorderActive: #5c2e91; + --colorPaletteGrapeBackground2: #d9a7e0; + --colorPaletteGrapeForeground2: #4c0d55; + --colorPaletteGrapeBorderActive: #881798; + --colorPaletteLilacBackground2: #e6bfed; + --colorPaletteLilacForeground2: #63276d; + --colorPaletteLilacBorderActive: #b146c2; + --colorPalettePinkBackground2: #f7c0e3; + --colorPalettePinkForeground2: #80215d; + --colorPalettePinkBorderActive: #e43ba6; + --colorPaletteMagentaBackground2: #eca5d1; + --colorPaletteMagentaForeground2: #6b0043; + --colorPaletteMagentaBorderActive: #bf0077; + --colorPalettePlumBackground2: #d696c0; + --colorPalettePlumForeground2: #43002b; + --colorPalettePlumBorderActive: #77004d; + --colorPaletteBeigeBackground2: #d7d4d4; + --colorPaletteBeigeForeground2: #444241; + --colorPaletteBeigeBorderActive: #7a7574; + --colorPaletteMinkBackground2: #cecccb; + --colorPaletteMinkForeground2: #343231; + --colorPaletteMinkBorderActive: #5d5a58; + --colorPalettePlatinumBackground2: #cdd6d8; + --colorPalettePlatinumForeground2: #3b4447; + --colorPalettePlatinumBorderActive: #69797e; + --colorPaletteAnchorBackground2: #bcc3c7; + --colorPaletteAnchorForeground2: #202427; + --colorPaletteAnchorBorderActive: #394146; + --colorStatusSuccessBackground1: #f1faf1; + --colorStatusSuccessBackground2: #9fd89f; + --colorStatusSuccessBackground3: #107c10; + --colorStatusSuccessForeground1: #0e700e; + --colorStatusSuccessForeground2: #094509; + --colorStatusSuccessForeground3: #107c10; + --colorStatusSuccessForegroundInverted: #54b054; + --colorStatusSuccessBorderActive: #107c10; + --colorStatusSuccessBorder1: #9fd89f; + --colorStatusSuccessBorder2: #107c10; + --colorStatusWarningBackground1: #fff9f5; + --colorStatusWarningBackground2: #fdcfb4; + --colorStatusWarningBackground3: #f7630c; + --colorStatusWarningForeground1: #bc4b09; + --colorStatusWarningForeground2: #8a3707; + --colorStatusWarningForeground3: #bc4b09; + --colorStatusWarningForegroundInverted: #faa06b; + --colorStatusWarningBorderActive: #f7630c; + --colorStatusWarningBorder1: #fdcfb4; + --colorStatusWarningBorder2: #bc4b09; + --colorStatusDangerBackground1: #fdf3f4; + --colorStatusDangerBackground2: #eeacb2; + --colorStatusDangerBackground3: #c50f1f; + --colorStatusDangerForeground1: #b10e1c; + --colorStatusDangerForeground2: #6e0811; + --colorStatusDangerForeground3: #c50f1f; + --colorStatusDangerForegroundInverted: #dc626d; + --colorStatusDangerBorderActive: #c50f1f; + --colorStatusDangerBorder1: #eeacb2; + --colorStatusDangerBorder2: #c50f1f; + --colorStatusDangerBackground3Hover: #b10e1c; + --colorStatusDangerBackground3Pressed: #960b18; + + /* Shadows */ + --shadow2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14); + --shadow4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14); + --shadow8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14); + --shadow16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14); + --shadow28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14); + --shadow64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14); + --shadow2Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25); + --shadow4Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25); + --shadow8Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25); + --shadow16Brand: 0 0 2px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.25); + --shadow28Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 14px 28px rgba(0, 0, 0, 0.25); + --shadow64Brand: 0 0 8px rgba(0, 0, 0, 0.3), 0 32px 64px rgba(0, 0, 0, 0.25); +} diff --git a/packages/website-astro/src/layouts/base-layout.astro b/packages/website-astro/src/layouts/base-layout.astro index 4aec3c6a4a..53bf4f7dd1 100644 --- a/packages/website-astro/src/layouts/base-layout.astro +++ b/packages/website-astro/src/layouts/base-layout.astro @@ -2,22 +2,31 @@ import "@site/src/css/custom.css"; import Header from "@site/src/components/header/header.astro"; import Footer from "@site/src/components/footer/footer.astro"; + +export interface Props { + /** Whether to render the footer @default true */ + footer?: boolean; +} +const { footer = true } = Astro.props; --- + -
+
+
+
-
+
-