From 66293a90ea2d70d43c0e27b945e8b40584df65b4 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Tue, 3 Oct 2023 14:58:35 -0400 Subject: [PATCH] Remove theming --- .storybook/decorators/withDocsContainer.jsx | 7 +- .storybook/decorators/withThemeProvider.jsx | 3 +- .storybook/preview.js | 3 - .../ColorSchemeToggle.sample.jsx | 2 +- .../color-schemes/ColorSchemes.stories.mdx | 4 +- .../theming/ThemeSpecificationTable.jsx | 45 - docs/features/theming/Theming.stories.mdx | 185 ---- docs/features/tokens/TokenTable.jsx | 4 +- docs/features/tokens/Tokens.stories.mdx | 4 +- docs/getting-started/Installation.stories.mdx | 12 +- packages/components/README.md | 2 +- .../src/layout/docs/Flex.stories.mdx | 36 +- .../src/layout/docs/Grid.stories.mdx | 36 +- .../components/src/overlay/src/Overlay.tsx | 5 +- .../tests/chromatic/Overlay.stories.tsx | 4 +- .../src/popover/src/PopoverTrigger.tsx | 6 +- .../theme-provider/ThemeProvider.stories.mdx | 8 +- packages/components/src/styling/src/index.css | 2 + .../src/styling/src/theming/ThemeContext.ts | 20 - .../src/styling/src/theming/ThemeProvider.tsx | 62 +- .../src/styling/src/theming/createTheme.ts | 159 ---- .../styling/src/theming/createThemeVars.ts | 60 +- .../src/styling/src/theming/hopper-theme.css | 830 ++++++++++++++++++ .../src/styling/src/theming/index.ts | 5 - .../src/styling/src/theming/orbiterTheme.ts | 179 ---- .../styling/src/theming/sharegate-theme.css | 322 +++++++ .../src/styling/src/theming/sharegateTheme.ts | 236 ----- .../src/styling/src/theming/themeAccessor.ts | 57 -- .../tests/chromatic/ThemeProvider.stories.tsx | 10 +- .../tests/chromatic/sharegate.stories.tsx | 9 +- .../src/tooltip/src/TooltipTrigger.tsx | 6 +- tooling/test-utils/renderWithTheme.tsx | 4 +- 32 files changed, 1281 insertions(+), 1046 deletions(-) delete mode 100644 docs/features/theming/ThemeSpecificationTable.jsx delete mode 100644 docs/features/theming/Theming.stories.mdx delete mode 100644 packages/components/src/styling/src/theming/ThemeContext.ts delete mode 100644 packages/components/src/styling/src/theming/createTheme.ts create mode 100644 packages/components/src/styling/src/theming/hopper-theme.css delete mode 100644 packages/components/src/styling/src/theming/orbiterTheme.ts create mode 100644 packages/components/src/styling/src/theming/sharegate-theme.css delete mode 100644 packages/components/src/styling/src/theming/sharegateTheme.ts delete mode 100644 packages/components/src/styling/src/theming/themeAccessor.ts diff --git a/.storybook/decorators/withDocsContainer.jsx b/.storybook/decorators/withDocsContainer.jsx index 58668a19b..2a6c69530 100644 --- a/.storybook/decorators/withDocsContainer.jsx +++ b/.storybook/decorators/withDocsContainer.jsx @@ -1,11 +1,10 @@ import { DocsContainer } from "@storybook/addon-docs"; -import { ShareGateTheme, ThemeProvider } from "@components/styling"; +import { ThemeProvider } from "@components/styling"; function ThemedDocsContainer({ context, children }) { - const theme = context.globals.theme === "sharegate" ? ShareGateTheme : ShareGateTheme; return ( - + {children} ); @@ -19,4 +18,4 @@ export function withDocsContainer(context, children) { ); -} \ No newline at end of file +} diff --git a/.storybook/decorators/withThemeProvider.jsx b/.storybook/decorators/withThemeProvider.jsx index c9a53c21d..74478de13 100644 --- a/.storybook/decorators/withThemeProvider.jsx +++ b/.storybook/decorators/withThemeProvider.jsx @@ -1,4 +1,4 @@ -import { ShareGateTheme, ThemeProvider } from "@components/styling"; +import { ThemeProvider } from "@components/styling"; import { isChromatic } from "../env"; import { getGlobals } from "../utils"; @@ -9,7 +9,6 @@ export function withThemeProvider(story, context) { return ( { const { colorScheme: parentColorScheme } = useColorSchemeContext(); return ( - +
diff --git a/docs/features/color-schemes/ColorSchemes.stories.mdx b/docs/features/color-schemes/ColorSchemes.stories.mdx index 68de01c39..ad5c77eb8 100644 --- a/docs/features/color-schemes/ColorSchemes.stories.mdx +++ b/docs/features/color-schemes/ColorSchemes.stories.mdx @@ -15,7 +15,7 @@ Orbiter supports by default a *light* and a *dark* color scheme for all componen A color scheme can either be enforced by providing a specific `light` or `dark` value to a [theme provider](?path=/story/theme-provider--default-story): ```jsx - + ``` @@ -23,7 +23,7 @@ A color scheme can either be enforced by providing a specific `light` or `dark` or be selected according to the [user's operating system setting](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) by providing the `system` value: ```jsx - + ``` diff --git a/docs/features/theming/ThemeSpecificationTable.jsx b/docs/features/theming/ThemeSpecificationTable.jsx deleted file mode 100644 index db2167285..000000000 --- a/docs/features/theming/ThemeSpecificationTable.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import { Link, Table } from "@stories/components"; -import { array, arrayOf } from "prop-types"; - -const propTypes = { - rows: arrayOf(array).isRequired -}; - -const ScaleLinks = { - "box-shadow-scale": 1..2 / alias, - "font-sizes-scale": 1..11 / alias, - "font-weights-scale": 1..3, - "line-heights-scale": 1..6, - "color-scale": [color]-[1..10] / alias, - "sizing-scale": 1..18, - "border-radius-scale": 1..4 / alias, - "spacing-scale": 1..13 -}; - -function toScaleLink(scale) { - return ScaleLinks[scale] ?? scale; -} - -function toRowValues([themeKey, cssProperties, scale]) { - return [ - themeKey, - cssProperties, - toScaleLink(scale) - ]; -} - -export function ThemeSpecificationTable({ rows, ...rest }) { - return ( - toRowValues(x))} - /> - ); -} - -ThemeSpecificationTable.propTypes = propTypes; diff --git a/docs/features/theming/Theming.stories.mdx b/docs/features/theming/Theming.stories.mdx deleted file mode 100644 index d7f6f9a94..000000000 --- a/docs/features/theming/Theming.stories.mdx +++ /dev/null @@ -1,185 +0,0 @@ -import { Meta } from "@storybook/addon-docs"; -import { Table } from "@stories/components"; -import { ThemeSpecificationTable } from "./ThemeSpecificationTable"; -import { GithubLink } from "@stories/components"; - - - -# Theming - -Orbiter styled system is powered by the values of a *theme object* provided by the application. The Orbiter theme object specification have been inspired by the [Styled System Theme Specification](https://styled-system.com/theme-specification). - -## Theme object - -A theme object is a combination of *design values* and *design scales* ([spacing](?path=/story/tokens--page#spacings), [sizing](?path=/story/tokens--page#sizings), [colors](?path=/story/tokens--page#text-colors), etc..). - -Some scales are defined in Orbiter as arrays for ordinal values like `space` or as plain objects for named values like `colors`. Some are even a mix of both, such as `fontSizes`. - -An Orbiter theme object is composed of the following *8 keys*: - - - -### Output - -When rendered with the `createThemeVars` function, the following CSS variables will be outputted from the theme object values. - -
- -## Apply a theme - -Orbiter components and Orbiter [style props](?path=/docs/style-props--page) doesn't render any styles until a theme is applied. - -To apply a theme: - -1. [Select a theme object](#select-a-theme-object) -2. Render the CSS variables of the theme object with the `createThemeVars` function -3. [Define a `` component with the theme object](?path=/docs/theme-provider--page) - -```jsx -import { createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; - -createThemeVars([theme]); - - - - -``` - -### Select a theme object - -Any object can be used as an Orbiter theme object as long as it extends the `OrbiterTheme` TypeScript type. A few options are available. - -#### Option 1: Define your own theme from scratch - -Make sure you provide the right definition by extending the `OrbiterTheme` type. - -```jsx -import { OrbiterTheme, createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; - -const SpaceTheme: OrbiterTheme = { - name: "space-theme", - space: [], - sizing: [], - fontSizes: {} - // ... -}; - -createThemeVars([theme]); - - - - -``` - -#### Option 2: Create a new theme from Orbiter defaults - -With `createTheme`, you only have to provide a subset of `OrbiterTheme` values. The remaining values will fallback to Orbiter defaults. - -```jsx -import { createTheme, createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; - -const SpaceTheme = createTheme({ - name: "space-theme", - colors: { - white: "#fff", - black: "#000", - accent: [ - "hsla(174, 61%, 94%, 1)", - "hsla(173, 63%, 85%, 1)", - "hsla(173, 63%, 75%, 1)", - "hsla(173, 64%, 65%, 1)", - "hsla(173, 64%, 50%, 1)", - "hsla(172, 65%, 48%, 1)", - "hsla(173, 65%, 46%, 1)", - "hsla(172, 63%, 45%, 1)", - "hsla(172, 64%, 43%, 1)", - "hsla(172, 62%, 41%, 1)" - ] - // ... - }, - // ... -}); - -createThemeVars([theme]); - - - - -``` - -#### Option 3: Retrieve a pre-constructed theme from Orbiter - -The only theme available at the moment is `ShareGateTheme`. - -```jsx -import { ShareGateTheme, createThemeVars, ThemeProvider } from "@workleap/orbiter-ui"; - -createThemeVars([ShareGateTheme]); - - - - -``` - -## Use a theme object in code - -Theme objects are primarily used to boostrap Orbiter styled system but they can also be used directly in JavaScript code when you need to fetch a value. - -If you have access to the theme object, use the object directly. - -```jsx -
- Hello world! -
-``` - -If you don't have access to the theme object, retrieve a `ThemeAccessor` instance from the `ThemeContext` by using the `useThemeContext` hook and access the theme values from the instance. - -```jsx -import { useThemeContext } from "sharegate/orbiter-ui"; - -const { themeAccessor } = useThemeContext(); - -return ( -
- Hello world! -
-) -``` diff --git a/docs/features/tokens/TokenTable.jsx b/docs/features/tokens/TokenTable.jsx index f98b0dec2..a74cda48d 100644 --- a/docs/features/tokens/TokenTable.jsx +++ b/docs/features/tokens/TokenTable.jsx @@ -1,4 +1,4 @@ -import { ShareGateTheme, ThemeProvider } from "@components/styling"; +import { ThemeProvider } from "@components/styling"; import { arrayOf, func, shape, string } from "prop-types"; import { Div, Span } from "@components/html"; @@ -36,7 +36,7 @@ export function TokenTable({ colors }) { return ( // eslint-disable-next-line react/destructuring-assignment - +
+ ); ``` -Instead of harcoding the foundation values in Orbiter, we choose to implement a [theming system](?path=/docs/theming--page) allowing applications to supply their core values to Orbiter. - -The theming system introduced a concept of theme object. To configure Orbiter, you'll need to build your own theme object or import a [pre-constructed](?path=/story/theming--page#option-3-retrieve-a-pre-constructed-theme-from-orbiter) one from Orbiter. The theme object will be used to render the foundation variables with the `createThemeVars` function and define a [theme provider](?path=/docs/theme-provider--default-story) at the root of your application. - ### Start creating components You're all set! You can start creating your application with Orbiter: diff --git a/packages/components/README.md b/packages/components/README.md index bea128e66..5420a7e69 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -157,7 +157,7 @@ Every Orbiter custom components must share a consistent API and a similar design All components should: - Use Orbiter's [tokens](https://wl-orbiter-website.netlify.app//?path=/docs/tokens--page) -- Support Orbiter's [color schemes](https://wl-orbiter-website.netlify.app//?path=/docs/color-schemes--page) and [theming](https://wl-orbiter-website.netlify.app//?path=/docs/theming--page) +- Support Orbiter's [color schemes](https://wl-orbiter-website.netlify.app//?path=/docs/color-schemes--page) - Implement Orbiter's [style props](https://wl-orbiter-website.netlify.app//?path=/docs/style-props--page) - Support Orbiter's [responsive styles](https://wl-orbiter-website.netlify.app//?path=/docs/responsive-styles--page) diff --git a/packages/components/src/layout/docs/Flex.stories.mdx b/packages/components/src/layout/docs/Flex.stories.mdx index d987d2d40..2d5855282 100644 --- a/packages/components/src/layout/docs/Flex.stories.mdx +++ b/packages/components/src/layout/docs/Flex.stories.mdx @@ -2,7 +2,6 @@ import { ArgsTable, Meta, Story } from "@storybook/addon-docs"; import { ComponentInfo, Preview, Tagline } from "@stories/components"; import { Div } from "@components/html"; import { Flex, Inline, InnerFlex, InnerInline, InnerStack, Stack } from "@components/layout"; -import { ShareGateTheme } from "../../styling"; + - {ShareGateTheme.colors.common.accent.map(x =>
)} - {ShareGateTheme.colors.common.alert.map(x =>
)} - {ShareGateTheme.colors.common.green.map(x =>
)} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/layout/docs/Grid.stories.mdx b/packages/components/src/layout/docs/Grid.stories.mdx index aee03bf13..3411cea04 100644 --- a/packages/components/src/layout/docs/Grid.stories.mdx +++ b/packages/components/src/layout/docs/Grid.stories.mdx @@ -2,7 +2,6 @@ import { ArgsTable, Meta, Story } from "@storybook/addon-docs"; import { ComponentInfo, Preview, Tagline } from "@stories/components"; import { Div } from "@components/html"; import { Grid, InnerGrid, fitContent, minmax, repeat } from "@components/layout"; -import { ShareGateTheme } from "../../styling"; + - {ShareGateTheme.colors.common.purple.map(x =>
)} - {ShareGateTheme.colors.common.alert.map(x =>
)} - {ShareGateTheme.colors.common.green.map(x =>
)} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/components/src/overlay/src/Overlay.tsx b/packages/components/src/overlay/src/Overlay.tsx index 58dfe5cd6..1b287ecee 100644 --- a/packages/components/src/overlay/src/Overlay.tsx +++ b/packages/components/src/overlay/src/Overlay.tsx @@ -1,6 +1,6 @@ import { ComponentProps, ReactNode, forwardRef } from "react"; import { InternalProps, OmitInternalProps, StyledComponentProps, cssModule, getBodyElement, mergeProps } from "../../shared"; -import { ThemeProvider, useColorSchemeContext, useThemeContext } from "../../styling"; +import { ThemeProvider, useColorSchemeContext } from "../../styling"; import { Transition } from "../../transition"; import { createPortal } from "react-dom"; @@ -43,7 +43,6 @@ export function InnerOverlay({ }: InnerOverlayProps): JSX.Element { // Since the overlay is rendered through a portal it might not be embedded in the theme DOM element. const { colorScheme } = useColorSchemeContext(); - const { theme } = useThemeContext(); const content = ( - + {children} diff --git a/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx b/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx index 877ad6ece..999cb4f50 100644 --- a/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx +++ b/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx @@ -1,6 +1,6 @@ import { Box, BoxProps } from "@components/box"; import { Overlay } from "@components/overlay"; -import { ShareGateTheme, ThemeProvider } from "@components/styling"; +import { ThemeProvider } from "@components/styling"; import { augmentElement, mergeProps, useMergedRefs } from "@components/shared"; import { forwardRef, ReactElement, useState } from "react"; import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; @@ -61,7 +61,7 @@ ref) => { export const InheritTheme: OverlayStory = { storyName: "inherit theme", render: () => ( - + diff --git a/packages/components/src/popover/src/PopoverTrigger.tsx b/packages/components/src/popover/src/PopoverTrigger.tsx index 1dc6f9575..dd55af59b 100644 --- a/packages/components/src/popover/src/PopoverTrigger.tsx +++ b/packages/components/src/popover/src/PopoverTrigger.tsx @@ -9,7 +9,7 @@ import { resolveChildren } from "../../shared"; import { Overlay, OverlayArrow, PopupPositionProp, PopupProps, usePopup } from "../../overlay"; -import { useResponsiveValue, useThemeContext } from "../../styling"; +import { useResponsiveValue } from "../../styling"; import { PopoverTriggerContext } from "./PopoverTriggerContext"; @@ -55,8 +55,6 @@ export function InnerPopoverTrigger({ }: InnerPopoverTriggerProps) { const positionValue = useResponsiveValue(positionProp); - const { themeAccessor } = useThemeContext(); - const [trigger, popover] = Children.toArray(resolveChildren(children)) as [ReactElement, ReactElement]; if (isNil(trigger) || isNil(popover)) { @@ -105,7 +103,7 @@ export function InnerPopoverTrigger({ rest, { as, - borderOffset: themeAccessor.getSpace(3), + borderOffset: "12px", ref: forwardedRef, show: isOpen, zIndex diff --git a/packages/components/src/styling/docs/theme-provider/ThemeProvider.stories.mdx b/packages/components/src/styling/docs/theme-provider/ThemeProvider.stories.mdx index d46c02c31..94e8ddac0 100644 --- a/packages/components/src/styling/docs/theme-provider/ThemeProvider.stories.mdx +++ b/packages/components/src/styling/docs/theme-provider/ThemeProvider.stories.mdx @@ -9,19 +9,19 @@ import { ThemeProvider, InnerThemeProvider } from "@components/styling" # ThemeProvider -Container used to define the theme and color scheme to use. +Container used to define the color scheme to use. ## Usage -Orbiter components rely on the `ThemeProvider` to define the [theme](?path=/docs/theming--page) and [color scheme](?path=/docs/color-schemes--page) they need to render accurately. We recommended you declare a theme provider at the root of your application but if you prefer, you can declare them as needed instead. +Orbiter components rely on the `ThemeProvider` to define the [color scheme](?path=/docs/color-schemes--page) they need to render accurately. We recommended you declare a theme provider at the root of your application but if you prefer, you can declare them as needed instead. ```jsx - + ``` diff --git a/packages/components/src/styling/src/index.css b/packages/components/src/styling/src/index.css index 25cfd8e02..e8cfe6ed6 100644 --- a/packages/components/src/styling/src/index.css +++ b/packages/components/src/styling/src/index.css @@ -1 +1,3 @@ @import "./styled-system/index.css"; +@import "./theming/sharegate-theme.css"; +@import "./theming/hopper-theme.css"; diff --git a/packages/components/src/styling/src/theming/ThemeContext.ts b/packages/components/src/styling/src/theming/ThemeContext.ts deleted file mode 100644 index a321a86da..000000000 --- a/packages/components/src/styling/src/theming/ThemeContext.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createContext, useContext } from "react"; - -import { OrbiterTheme } from "./orbiterTheme"; -import { ThemeAccessor } from "./themeAccessor"; - -export interface ThemeContextType { - theme?: OrbiterTheme; -} - -export const ThemeContext = createContext({}); - -export function useThemeContext(): ThemeContextType & { themeAccessor: ThemeAccessor } { - const { theme, ...rest } = useContext(ThemeContext); - - return { - ...rest, - theme, - themeAccessor: new ThemeAccessor(theme) - }; -} diff --git a/packages/components/src/styling/src/theming/ThemeProvider.tsx b/packages/components/src/styling/src/theming/ThemeProvider.tsx index b08cdfdeb..5c799517a 100644 --- a/packages/components/src/styling/src/theming/ThemeProvider.tsx +++ b/packages/components/src/styling/src/theming/ThemeProvider.tsx @@ -1,13 +1,10 @@ import { ColorScheme, ColorSchemeOrSystem, useColorScheme } from "../useColorScheme"; import { InternalProps, StyledComponentProps, mergeClasses, mergeProps, OmitInternalProps } from "../../../shared"; import { ComponentProps, forwardRef, ReactNode, useCallback, useState } from "react"; -import { getColorSchemeClassName, getThemeClassName } from "./createThemeVars"; import { Box } from "../../../box"; import { BreakpointProvider } from "../BreakpointProvider"; import { ColorSchemeContext } from "../ColorSchemeContext"; -import { OrbiterTheme } from "./orbiterTheme"; -import { ThemeContext } from "./ThemeContext"; const DefaultElement = "div"; @@ -24,10 +21,6 @@ export interface InnerThemeProviderProps extends InternalProps, StyledComponentP * Default color scheme to use when a user preferred color scheme (system) is not available. */ defaultColorScheme?: ColorScheme; - /** - * The theme to use. - */ - theme: OrbiterTheme; } export function InnerThemeProvider({ @@ -35,7 +28,6 @@ export function InnerThemeProvider({ children, colorScheme, defaultColorScheme, - theme, forwardedRef, ...rest }: InnerThemeProviderProps) { @@ -48,34 +40,32 @@ export function InnerThemeProvider({ }, [setRemoteColorScheme]); return ( - - - - - {children} - - - - + + + + {children} + + + ); } diff --git a/packages/components/src/styling/src/theming/createTheme.ts b/packages/components/src/styling/src/theming/createTheme.ts deleted file mode 100644 index 66e76a26b..000000000 --- a/packages/components/src/styling/src/theming/createTheme.ts +++ /dev/null @@ -1,159 +0,0 @@ -import { BoxShadowColorSchemes, ColorAliases, ColorPalette, ColorPaletteSection, OrbiterTheme } from "./orbiterTheme"; - -export interface CreateThemeProps { - name: string; - colors: { - white: string; - black: string; - gray: string; - accent: ColorPalette; - light: ColorAliases; - dark: ColorAliases; - }; - boxShadows: BoxShadowColorSchemes; -} - -const ShareGateColors: Partial = { - neutral: [ - "#f4f4f4", - "#e5e5e5", - "#c4c3c3", - "#adacac", - "#929292", - "#777676", - "#555454", - "#434342", - "#272626", - "#111010" - ], - green: [ - "#dbfbea", - "#cbeedb", - "#a5cdb8", - "#78ba9b", - "#27a57a", - "#268563", - "#2b5e48", - "#27493a", - "#1a2a23", - "#0c110e" - ], - orange: [ - "#fcf2e3", - "#fee2bb", - "#ffb470", - "#ff9048", - "#ff5c00", - "#c7521a", - "#874020", - "#66351e", - "#392015", - "#170e09" - ], - purple: [ - "#eef3fd", - "#dbe6fd", - "#b6c2ef", - "#95a9f5", - "#7689fd", - "#5d65f6", - "#4b11fd", - "#362aae", - "#1f2151", - "#0d0f1f" - ], - success: [ - "#e3f8ec", - "#ceedd7", - "#93d39b", - "#61c06d", - "#17a93c", - "#2d8739", - "#2e5f30", - "#284929", - "#1b2a1a", - "#0c110b" - ], - warning: [ - "#fcf3df", - "#fbe3b5", - "#f6ba42", - "#d7a541", - "#b48c3f", - "#907239", - "#65522f", - "#4e4027", - "#2c2619", - "#12100b" - ], - alert: [ - "#fbf1f1", - "#fadfdf", - "#fdb0af", - "#f88f8d", - "#eb6a64", - "#d93c37", - "#a91414", - "#811b15", - "#461812", - "#1d0b09" - ] -}; - -const ThemeBase: Omit = { - sizing: [".75rem", "1rem", "1.25rem", "1.5rem", "2rem", "2.5rem", "3rem", "3.5rem", "4rem", "4.5rem", "5rem", "6rem", "8rem", "12rem", "16rem", "20rem", "24rem", "30rem"], - space: [".25rem", ".5rem", ".75rem", "1rem", "1.25rem", "1.5rem", "2rem", "2.5rem", "3rem", "3.5rem", "4rem", "4.5rem", "5rem"], - fontSizes: { - 1: ".625rem", - 2: ".75rem", - 3: ".875rem", - 4: "1rem", - 5: "1.125rem", - 6: "1.375rem", - 7: "1.75rem", - 8: "2rem", - 9: "2.5rem", - 10: "3.75rem", - 11: "5rem" - }, - fontWeights: ["400", "500", "600"], - lineHeights: [1, 1.2, 1.25, 1.3333333, 1.454595, 1.5], - borderRadii: { - 1: ".125rem", - 2: ".25rem", - 3: ".5rem", - 4: "1rem", - "pill": "999px", - "circular": "100%" - } -}; - -export function createTheme({ - name, - colors: { - black, - white, - gray, - accent, - light, - dark - }, - boxShadows -}: CreateThemeProps): OrbiterTheme { - return { - ...ThemeBase, - name, - colors: { - common: { - ...ShareGateColors, - black, - gray, - white, - accent - }, - light, - dark - }, - boxShadows - }; -} diff --git a/packages/components/src/styling/src/theming/createThemeVars.ts b/packages/components/src/styling/src/theming/createThemeVars.ts index 60962f5cc..e44017bd0 100644 --- a/packages/components/src/styling/src/theming/createThemeVars.ts +++ b/packages/components/src/styling/src/theming/createThemeVars.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../useColorScheme"; -import { ColorSchemeSection, OrbiterTheme } from "./orbiterTheme"; import { Entry, JsonObject, JsonValue } from "type-fest"; -import { isArray, isBrowser, isNil, isNumber, isString } from "../../../shared"; +import { isArray, isNil, isNumber, isString } from "../../../shared"; type VarsBucket = string[]; @@ -77,42 +76,6 @@ function appendJsonObject(values: JsonObject, prefix: string, bucket: VarsBucket }); } -function appendColorScheme(values: Array | JsonObject, prefix: string, bucket: VarsBucket) { - if (isArray(values)) { - appendArray(values as Array, prefix, bucket); - } else { - appendJsonObject(values as JsonObject, prefix, bucket); - } -} - -function appendColorSchemes( - values: C | L | D | ColorSchemeSection, - prefix: string, - { common, dark, light }: { common?: VarsBucket; dark: VarsBucket; light: VarsBucket } -) { - const colorSchemes = values as ColorSchemeSection; - - if (!isNil(colorSchemes.common) || !isNil(colorSchemes.light) || !isNil(colorSchemes.dark)) { - if (!isNil(colorSchemes.common)) { - appendColorScheme(colorSchemes.common, prefix, common); - } - - appendColorScheme(colorSchemes.light, prefix, light); - appendColorScheme(colorSchemes.dark, prefix, dark); - } -} - -function renderBucket(scope: string, bucket: VarsBucket) { - if (!isBrowser) { return; } - - const element = document.createElement("style"); - - element.setAttribute("id", scope); - element.innerText = `.o-ui.${scope} { ${bucket.join(" ")} }`; - - document.head.appendChild(element); -} - export const SpacePrefix = "sp"; export const SizingPrefix = "sz"; export const FontSizePrefix = "fs"; @@ -121,24 +84,3 @@ export const LineHeightPrefix = "lh"; export const BorderRadiusPrefix = "br"; export const BoxShadowPrefix = "bs"; export const ColorPrefix = null; - -export function createThemeVars(themes: OrbiterTheme[]) { - themes.forEach(theme => { - const common: VarsBucket = []; - const light: VarsBucket = []; - const dark: VarsBucket = []; - - appendArray(theme.space, SpacePrefix, common); - appendArray(theme.sizing, SizingPrefix, common); - appendJsonObject((theme.fontSizes as unknown) as JsonObject, FontSizePrefix, common); - appendArray(theme.fontWeights, FontWeightPrefix, common); - appendArray(theme.lineHeights, LineHeightPrefix, common); - appendJsonObject((theme.borderRadii as unknown) as JsonObject, BorderRadiusPrefix, common); - appendColorSchemes(theme.boxShadows, BoxShadowPrefix, { common, dark, light }); - appendColorSchemes(theme.colors, ColorPrefix, { common, dark, light }); - - renderBucket(getThemeClassName(theme.name), common); - renderBucket(getColorSchemeClassName(theme.name, "light"), light); - renderBucket(getColorSchemeClassName(theme.name, "dark"), dark); - }); -} diff --git a/packages/components/src/styling/src/theming/hopper-theme.css b/packages/components/src/styling/src/theming/hopper-theme.css new file mode 100644 index 000000000..2d2a660cb --- /dev/null +++ b/packages/components/src/styling/src/theming/hopper-theme.css @@ -0,0 +1,830 @@ +.o-ui.o-ui-orbiter { + --o-ui-border-radius-9999: 624.9375rem; + --o-ui-border-radius-4: 1.5rem; + --o-ui-border-radius-3: 1rem; + --o-ui-border-radius-2: 0.5rem; + --o-ui-border-radius-1: 0.25rem; + --o-ui-border-radius-0: 0; + --o-ui-line-height-1-50: 1.5; + --o-ui-line-height-1-4285: 1.4285714; + --o-ui-line-height-1-33: 1.3333333; + --o-ui-line-height-1-25: 1.25; + --o-ui-line-height-1-20: 1.2; + --o-ui-line-height-1-14: 1.1428571; + --o-ui-line-height-1-125: 1.125; + --o-ui-font-weight-690: 690; + --o-ui-font-weight-680: 680; + --o-ui-font-weight-590: 590; + --o-ui-font-weight-580: 580; + --o-ui-font-weight-505: 505; + --o-ui-font-weight-410: 410; + --o-ui-font-weight-400: 400; + --o-ui-font-size-480: 3rem; + --o-ui-font-size-360: 2.25rem; + --o-ui-font-size-320: 2rem; + --o-ui-font-size-280: 1.75rem; + --o-ui-font-size-240: 1.5rem; + --o-ui-font-size-200: 1.25rem; + --o-ui-font-size-180: 1.125rem; + --o-ui-font-size-160: 1rem; + --o-ui-font-size-140: 0.875rem; + --o-ui-font-size-120: 0.75rem; + --o-ui-font-family-tertiary: ABC Favorit Mono; + --o-ui-font-family-secondary: Inter; + --o-ui-font-family-primary: ABC Favorit; + --o-ui-shadow-lg: 0 10px 18px 8px rgba(60, 60, 60, 0.08); + --o-ui-shadow-md: 0 4px 10px 4px rgba(60, 60, 60, 0.08); + --o-ui-shadow-sm: 0 1px 6px 0 rgba(60, 60, 60, 0.1); + --o-ui-shadow-none: none; + --o-ui-samoyed: #FFFFFF; + --o-ui-rock-900: #292929; + --o-ui-rock-800: #3C3C3C; + --o-ui-rock-700: #505050; + --o-ui-rock-600: #636362; + --o-ui-rock-500: #6C6C6B; + --o-ui-rock-400: #777775; + --o-ui-rock-300: #959593; + --o-ui-rock-200: #B3B3B1; + --o-ui-rock-100: #CCCCCA; + --o-ui-rock-75: #E0DFDD; + --o-ui-rock-50: #ECEBE8; + --o-ui-rock-25: #F8F6F3; + --o-ui-rock-20: #FCFBFB; + --o-ui-abyss: #1D1D1C; + --o-ui-moss-900: #132A27; + --o-ui-moss-800: #16433D; + --o-ui-moss-700: #115A52; + --o-ui-moss-600: #0A6F64; + --o-ui-moss-500: #0C796B; + --o-ui-moss-400: #188A71; + --o-ui-moss-300: #47A584; + --o-ui-moss-200: #7DC291; + --o-ui-moss-100: #AAD89D; + --o-ui-moss-75: #CDE8AC; + --o-ui-moss-50: #E3F3B9; + --o-ui-moss-25: #F4F9E9; + --o-ui-amanita-900: #431A17; + --o-ui-amanita-800: #6C2320; + --o-ui-amanita-700: #952927; + --o-ui-amanita-600: #BA2D2D; + --o-ui-amanita-500: #CB2E31; + --o-ui-amanita-400: #DF3236; + --o-ui-amanita-300: #FA4D59; + --o-ui-amanita-200: #FF8E8E; + --o-ui-amanita-100: #FFBCB7; + --o-ui-amanita-75: #FFD6D3; + --o-ui-amanita-50: #FDE6E5; + --o-ui-amanita-25: #FDF6F6; + --o-ui-koi-900: #451A02; + --o-ui-koi-800: #692803; + --o-ui-koi-700: #8C3504; + --o-ui-koi-600: #AB4104; + --o-ui-koi-500: #BA4705; + --o-ui-koi-400: #C95109; + --o-ui-koi-300: #E57723; + --o-ui-koi-200: #FF9B3F; + --o-ui-koi-100: #FFBF92; + --o-ui-koi-75: #FFD8BE; + --o-ui-koi-50: #FFE8D3; + --o-ui-koi-25: #FFF5E9; + --o-ui-sunken-treasure-900: #2F250D; + --o-ui-sunken-treasure-800: #4B390F; + --o-ui-sunken-treasure-700: #654C0D; + --o-ui-sunken-treasure-600: #7E5E0A; + --o-ui-sunken-treasure-500: #8B6609; + --o-ui-sunken-treasure-400: #996F08; + --o-ui-sunken-treasure-300: #C28B12; + --o-ui-sunken-treasure-200: #E2A934; + --o-ui-sunken-treasure-100: #EAC96D; + --o-ui-sunken-treasure-75: #F7E694; + --o-ui-sunken-treasure-50: #FFF2B8; + --o-ui-sunken-treasure-25: #FFF8D6; + --o-ui-toad-900: #2A2620; + --o-ui-toad-800: #433B31; + --o-ui-toad-700: #594F41; + --o-ui-toad-600: #6E6151; + --o-ui-toad-500: #776A59; + --o-ui-toad-400: #837463; + --o-ui-toad-300: #A19382; + --o-ui-toad-200: #BDB1A3; + --o-ui-toad-100: #D4CBC0; + --o-ui-toad-75: #E5DED6; + --o-ui-toad-50: #F0EAE3; + --o-ui-toad-25: #FEF6EF; + --o-ui-fog-900: #20282A; + --o-ui-fog-800: #313E43; + --o-ui-fog-700: #40535A; + --o-ui-fog-600: #4E6770; + --o-ui-fog-500: #557079; + --o-ui-fog-400: #5E7B84; + --o-ui-fog-300: #7C9AA3; + --o-ui-fog-200: #9CB7BE; + --o-ui-fog-100: #BAD0D5; + --o-ui-fog-75: #D2E3E7; + --o-ui-fog-50: #E1EEF1; + --o-ui-fog-25: #F2F8FA; + --o-ui-sapphire-900: #152450; + --o-ui-sapphire-800: #1B3587; + --o-ui-sapphire-700: #2040C7; + --o-ui-sapphire-600: #2A43E8; + --o-ui-sapphire-500: #3B57FF; + --o-ui-sapphire-400: #4767FE; + --o-ui-sapphire-300: #6C8FFD; + --o-ui-sapphire-200: #95B1FF; + --o-ui-sapphire-100: #B9CBFF; + --o-ui-sapphire-75: #D6E0FF; + --o-ui-sapphire-50: #E6EBFF; + --o-ui-sapphire-25: #F5F6FF; + --o-ui-orchid-bloom-900: #1E1C5D; + --o-ui-orchid-bloom-800: #322B8D; + --o-ui-orchid-bloom-700: #433FAC; + --o-ui-orchid-bloom-600: #5454BE; + --o-ui-orchid-bloom-500: #5F61C5; + --o-ui-orchid-bloom-400: #6B6ECC; + --o-ui-orchid-bloom-300: #8D91DC; + --o-ui-orchid-bloom-200: #AEB3E8; + --o-ui-orchid-bloom-100: #C8CAF0; + --o-ui-orchid-bloom-75: #DDDDF7; + --o-ui-orchid-bloom-50: #EAE9FB; + --o-ui-orchid-bloom-25: #F6F5FF; + --o-ui-quetzal-900: #002D1C; + --o-ui-quetzal-800: #00452D; + --o-ui-quetzal-700: #055C41; + --o-ui-quetzal-600: #206F54; + --o-ui-quetzal-500: #2B795E; + --o-ui-quetzal-400: #38836A; + --o-ui-quetzal-300: #5DA18C; + --o-ui-quetzal-200: #83BEAF; + --o-ui-quetzal-100: #A3D6CB; + --o-ui-quetzal-75: #BDE8E1; + --o-ui-quetzal-50: #CFF4EF; + --o-ui-quetzal-25: #DDFDF9; + --o-ui-coastal-900: #00274B; + --o-ui-coastal-800: #003D70; + --o-ui-coastal-700: #0A538B; + --o-ui-coastal-600: #23669F; + --o-ui-coastal-500: #2E70A8; + --o-ui-coastal-400: #3A7BB2; + --o-ui-coastal-300: #5D9ACD; + --o-ui-coastal-200: #81B9E4; + --o-ui-coastal-100: #9FD2F7; + --o-ui-coastal-75: #BAE6FF; + --o-ui-coastal-50: #D9EFFF; + --o-ui-coastal-25: #F0F8FF; + --o-ui-space-1280: 8rem; + --o-ui-space-960: 6rem; + --o-ui-space-800: 5rem; + --o-ui-space-640: 64; + --o-ui-space-480: 3rem; + --o-ui-space-400: 2.5rem; + --o-ui-space-320: 2rem; + --o-ui-space-240: 1.5rem; + --o-ui-space-160: 1rem; + --o-ui-space-80: 0.5rem; + --o-ui-space-40: 0.25rem; + --o-ui-space-20: 0.125rem; + --o-ui-space-0: 0; + --o-ui-space-inline-xl: var(--o-ui-space-320); + --o-ui-space-inline-lg: var(--o-ui-space-240); + --o-ui-space-inline-md: var(--o-ui-space-160); + --o-ui-space-inline-sm: var(--o-ui-space-80); + --o-ui-space-inline-xs: var(--o-ui-space-40); + --o-ui-space-stack-xl: var(--o-ui-space-320); + --o-ui-space-stack-lg: var(--o-ui-space-240); + --o-ui-space-stack-md: var(--o-ui-space-160); + --o-ui-space-stack-sm: var(--o-ui-space-80); + --o-ui-space-stack-xs: var(--o-ui-space-40); + --o-ui-space-inset-stretch-lg: var(--o-ui-space-480) var(--o-ui-space-240); + --o-ui-space-inset-stretch-md: var(--o-ui-space-240) var(--o-ui-space-160); + --o-ui-space-inset-stretch-sm: var(--o-ui-space-160) var(--o-ui-space-80); + --o-ui-space-inset-squish-lg: var(--o-ui-space-160) var(--o-ui-space-320); + --o-ui-space-inset-squish-md: var(--o-ui-space-80) var(--o-ui-space-160); + --o-ui-space-inset-squish-sm: var(--o-ui-space-40) var(--o-ui-space-80); + --o-ui-space-inset-xl: var(--o-ui-space-320); + --o-ui-space-inset-lg: var(--o-ui-space-240); + --o-ui-space-inset-md: var(--o-ui-space-160); + --o-ui-space-inset-sm: var(--o-ui-space-80); + --o-ui-space-inset-xs: var(--o-ui-space-40); + --o-ui-shape-rounded-sm: var(--o-ui-border-radius-1); + --o-ui-shape-rounded-md: var(--o-ui-border-radius-2); + --o-ui-shape-rounded-lg: var(--o-ui-border-radius-3); + --o-ui-shape-pill: var(--o-ui-border-radius-4); + --o-ui-shape-circle: var(--o-ui-border-radius-9999); + --o-ui-accent-sm-line-height: var(--o-ui-line-height-1-33); + --o-ui-accent-sm-font-weight: var(--o-ui-font-weight-580); + --o-ui-accent-sm-font-size: var(--o-ui-font-size-180); + --o-ui-accent-sm-font-family: var(--o-ui-font-family-primary); + --o-ui-accent-lg-line-height: var(--o-ui-line-height-1-125); + --o-ui-accent-lg-font-weight: var(--o-ui-font-weight-580); + --o-ui-accent-lg-font-size: var(--o-ui-font-size-480); + --o-ui-accent-lg-font-family: var(--o-ui-font-family-primary); + --o-ui-body-xs-underline-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-xs-underline-font-weight: var(--o-ui-font-weight-505); + --o-ui-body-xs-underline-font-size: var(--o-ui-font-size-120); + --o-ui-body-xs-underline-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-xs-bold-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-xs-bold-font-weight: var(--o-ui-font-weight-690); + --o-ui-body-xs-bold-font-size: var(--o-ui-font-size-120); + --o-ui-body-xs-bold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-xs-semibold-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-xs-semibold-font-weight: var(--o-ui-font-weight-590); + --o-ui-body-xs-semibold-font-size: var(--o-ui-font-size-120); + --o-ui-body-xs-semibold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-xs-medium-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-xs-medium-font-weight: var(--o-ui-font-weight-505); + --o-ui-body-xs-medium-font-size: var(--o-ui-font-size-120); + --o-ui-body-xs-medium-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-xs-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-xs-font-weight: var(--o-ui-font-weight-410); + --o-ui-body-xs-font-size: var(--o-ui-font-size-120); + --o-ui-body-xs-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-sm-underline-line-height: var(--o-ui-line-height-1-4285); + --o-ui-body-sm-underline-font-weight: var(--o-ui-font-weight-505); + --o-ui-body-sm-underline-font-size: var(--o-ui-font-size-140); + --o-ui-body-sm-underline-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-sm-bold-line-height: var(--o-ui-line-height-1-4285); + --o-ui-body-sm-bold-font-weight: var(--o-ui-font-weight-690); + --o-ui-body-sm-bold-font-size: var(--o-ui-font-size-140); + --o-ui-body-sm-bold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-sm-semibold-line-height: var(--o-ui-line-height-1-4285); + --o-ui-body-sm-semibold-font-weight: var(--o-ui-font-weight-590); + --o-ui-body-sm-semibold-font-size: var(--o-ui-font-size-140); + --o-ui-body-sm-semibold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-sm-medium-line-height: var(--o-ui-line-height-1-4285); + --o-ui-body-sm-medium-font-weight: var(--o-ui-font-weight-505); + --o-ui-body-sm-medium-font-size: var(--o-ui-font-size-140); + --o-ui-body-sm-medium-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-sm-line-height: var(--o-ui-line-height-1-4285); + --o-ui-body-sm-font-weight: var(--o-ui-font-weight-410); + --o-ui-body-sm-font-size: var(--o-ui-font-size-140); + --o-ui-body-sm-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-md-underline-line-height: var(--o-ui-line-height-1-50); + --o-ui-body-md-underline-font-weight: var(--o-ui-font-weight-410); + --o-ui-body-md-underline-font-size: var(--o-ui-font-size-160); + --o-ui-body-md-underline-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-md-bold-line-height: var(--o-ui-line-height-1-50); + --o-ui-body-md-bold-font-weight: var(--o-ui-font-weight-690); + --o-ui-body-md-bold-font-size: var(--o-ui-font-size-160); + --o-ui-body-md-bold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-md-semibold-line-height: var(--o-ui-line-height-1-50); + --o-ui-body-md-semibold-font-weight: var(--o-ui-font-weight-590); + --o-ui-body-md-semibold-font-size: var(--o-ui-font-size-160); + --o-ui-body-md-semibold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-md-medium-line-height: var(--o-ui-line-height-1-50); + --o-ui-body-md-medium-font-weight: var(--o-ui-font-weight-505); + --o-ui-body-md-medium-font-size: var(--o-ui-font-size-160); + --o-ui-body-md-medium-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-md-line-height: var(--o-ui-line-height-1-50); + --o-ui-body-md-font-weight: var(--o-ui-font-weight-410); + --o-ui-body-md-font-size: var(--o-ui-font-size-160); + --o-ui-body-md-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-lg-underline-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-lg-underline-font-weight: var(--o-ui-font-weight-505); + --o-ui-body-lg-underline-font-size: var(--o-ui-font-size-180); + --o-ui-body-lg-underline-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-lg-bold-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-lg-bold-font-weight: var(--o-ui-font-weight-690); + --o-ui-body-lg-bold-font-size: var(--o-ui-font-size-180); + --o-ui-body-lg-bold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-lg-semibold-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-lg-semibold-font-weight: var(--o-ui-font-weight-590); + --o-ui-body-lg-semibold-font-size: var(--o-ui-font-size-180); + --o-ui-body-lg-semibold-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-lg-medium-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-lg-medium-font-weight: var(--o-ui-font-weight-505); + --o-ui-body-lg-medium-font-size: var(--o-ui-font-size-180); + --o-ui-body-lg-medium-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-lg-line-height: var(--o-ui-line-height-1-33); + --o-ui-body-lg-font-weight: var(--o-ui-font-weight-410); + --o-ui-body-lg-font-size: var(--o-ui-font-size-180); + --o-ui-body-lg-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-xl-line-height: var(--o-ui-line-height-1-14); + --o-ui-body-xl-font-weight: var(--o-ui-font-weight-410); + --o-ui-body-xl-font-size: var(--o-ui-font-size-280); + --o-ui-body-xl-font-family: var(--o-ui-font-family-secondary); + --o-ui-body-2xl-line-height: var(--o-ui-line-height-1-125); + --o-ui-body-2xl-font-weight: var(--o-ui-font-weight-410); + --o-ui-body-2xl-font-size: var(--o-ui-font-size-320); + --o-ui-body-2xl-font-family: var(--o-ui-font-family-secondary); + --o-ui-overline-line-height: var(--o-ui-line-height-1-33); + --o-ui-overline-font-weight: var(--o-ui-font-weight-400); + --o-ui-overline-font-size: var(--o-ui-font-size-120); + --o-ui-overline-font-family: var(--o-ui-font-family-tertiary); + --o-ui-heading-xs-medium-line-height: var(--o-ui-line-height-1-50); + --o-ui-heading-xs-medium-font-weight: var(--o-ui-font-weight-580); + --o-ui-heading-xs-medium-font-size: var(--o-ui-font-size-160); + --o-ui-heading-xs-medium-font-family: var(--o-ui-font-family-primary); + --o-ui-heading-xs-line-height: var(--o-ui-line-height-1-50); + --o-ui-heading-xs-font-weight: var(--o-ui-font-weight-410); + --o-ui-heading-xs-font-size: var(--o-ui-font-size-160); + --o-ui-heading-xs-font-family: var(--o-ui-font-family-primary); + --o-ui-heading-sm-line-height: var(--o-ui-line-height-1-50); + --o-ui-heading-sm-font-weight: var(--o-ui-font-weight-580); + --o-ui-heading-sm-font-size: var(--o-ui-font-size-180); + --o-ui-heading-sm-font-family: var(--o-ui-font-family-primary); + --o-ui-heading-md-line-height: var(--o-ui-line-height-1-20); + --o-ui-heading-md-font-weight: var(--o-ui-font-weight-580); + --o-ui-heading-md-font-size: var(--o-ui-font-size-200); + --o-ui-heading-md-font-family: var(--o-ui-font-family-primary); + --o-ui-heading-lg-line-height: var(--o-ui-line-height-1-33); + --o-ui-heading-lg-font-weight: var(--o-ui-font-weight-680); + --o-ui-heading-lg-font-size: var(--o-ui-font-size-240); + --o-ui-heading-lg-font-family: var(--o-ui-font-family-primary); + --o-ui-heading-xl-line-height: var(--o-ui-line-height-1-14); + --o-ui-heading-xl-font-weight: var(--o-ui-font-weight-680); + --o-ui-heading-xl-font-size: var(--o-ui-font-size-280); + --o-ui-heading-xl-font-family: var(--o-ui-font-family-primary); + --o-ui-heading-2xl-line-height: var(--o-ui-line-height-1-25); + --o-ui-heading-2xl-font-weight: var(--o-ui-font-weight-580); + --o-ui-heading-2xl-font-size: var(--o-ui-font-size-320); + --o-ui-heading-2xl-font-family: var(--o-ui-font-family-primary); + --o-ui-heading-3xl-line-height: var(--o-ui-line-height-1-33); + --o-ui-heading-3xl-font-weight: var(--o-ui-font-weight-680); + --o-ui-heading-3xl-font-size: var(--o-ui-font-size-360); + --o-ui-heading-3xl-font-family: var(--o-ui-font-family-primary); + --o-ui-elevation-floating: var(--o-ui-shadow-lg); + --o-ui-elevation-lifted: var(--o-ui-shadow-md); + --o-ui-elevation-raised: var(--o-ui-shadow-sm); + --o-ui-elevation-none: var(--o-ui-shadow-none); + --o-ui-status-positive-text: var(--o-ui-moss-700); + --o-ui-status-positive-surface: var(--o-ui-moss-50); + --o-ui-status-positive-surface-strong: var(--o-ui-moss-200); + --o-ui-status-positive-icon: var(--o-ui-moss-700); + --o-ui-status-inactive-text: var(--o-ui-rock-700); + --o-ui-status-inactive-surface: var(--o-ui-rock-50); + --o-ui-status-inactive-icon: var(--o-ui-rock-500); + --o-ui-status-inactive-surface-strong: var(--o-ui-rock-100); + --o-ui-status-negative-text: var(--o-ui-amanita-700); + --o-ui-status-negative-surface: var(--o-ui-amanita-50); + --o-ui-status-negative-icon: var(--o-ui-amanita-700); + --o-ui-status-negative-surface-strong: var(--o-ui-amanita-200); + --o-ui-status-caution-text: var(--o-ui-koi-700); + --o-ui-status-caution-surface: var(--o-ui-koi-50); + --o-ui-status-caution-icon: var(--o-ui-koi-700); + --o-ui-status-caution-surface-strong: var(--o-ui-koi-200); + --o-ui-status-option4-text: var(--o-ui-fog-600); + --o-ui-status-option4-surface: var(--o-ui-fog-50); + --o-ui-status-option4-icon: var(--o-ui-fog-600); + --o-ui-status-option4-surface-strong: var(--o-ui-fog-200); + --o-ui-status-option3-text: var(--o-ui-quetzal-700); + --o-ui-status-option3-surface: var(--o-ui-quetzal-50); + --o-ui-status-option3-icon: var(--o-ui-quetzal-700); + --o-ui-status-option3-surface-strong: var(--o-ui-quetzal-200); + --o-ui-status-option2-icon: var(--o-ui-orchid-bloom-700); + --o-ui-status-option2-surface: var(--o-ui-orchid-bloom-50); + --o-ui-status-option2-text: var(--o-ui-orchid-bloom-700); + --o-ui-status-option2-surface-strong: var(--o-ui-orchid-bloom-200); + --o-ui-status-option1-text: var(--o-ui-coastal-700); + --o-ui-status-option1-surface: var(--o-ui-coastal-50); + --o-ui-status-option1-icon: var(--o-ui-coastal-700); + --o-ui-status-option1-surface-strong: var(--o-ui-coastal-200); + --o-ui-status-option5-text: var(--o-ui-toad-600); + --o-ui-status-option5-surface: var(--o-ui-toad-50); + --o-ui-status-option5-icon: var(--o-ui-toad-600); + --o-ui-status-option5-surface-strong: var(--o-ui-toad-200); + --o-ui-status-option6-text: var(--o-ui-sunken-treasure-600); + --o-ui-status-option6-surface: var(--o-ui-sunken-treasure-25); + --o-ui-status-option6-icon: var(--o-ui-sunken-treasure-600); + --o-ui-status-option6-surface-strong: var(--o-ui-sunken-treasure-200); + --o-ui-status-progress-text: var(--o-ui-sapphire-500); + --o-ui-status-progress-surface: var(--o-ui-sapphire-50); + --o-ui-status-progress-icon: var(--o-ui-sapphire-500); + --o-ui-status-progress-surface-strong: var(--o-ui-sapphire-200); + --o-ui-status-neutral-surface: var(--o-ui-samoyed); + --o-ui-status-neutral-icon: var(--o-ui-rock-800); + --o-ui-status-neutral-text: var(--o-ui-rock-800); + --o-ui-status-neutral-surface-strong: var(--o-ui-rock-200); + --o-ui-information-border: var(--o-ui-coastal-100); + --o-ui-information-icon: var(--o-ui-coastal-700); + --o-ui-information-text-weak: var(--o-ui-coastal-300); + --o-ui-information-surface-weak: var(--o-ui-coastal-50); + --o-ui-information-surface: var(--o-ui-coastal-25); + --o-ui-information-text: var(--o-ui-coastal-800); + --o-ui-information-icon-weak: var(--o-ui-coastal-300); + --o-ui-information-surface-strong: var(--o-ui-coastal-100); + --o-ui-information-icon-weakest: var(--o-ui-coastal-75); + --o-ui-success-surface-weak: var(--o-ui-moss-50); + --o-ui-success-icon: var(--o-ui-moss-700); + --o-ui-success-text: var(--o-ui-moss-700); + --o-ui-success-text-hover: var(--o-ui-moss-800); + --o-ui-success-surface-strong: var(--o-ui-moss-100); + --o-ui-success-surface: var(--o-ui-moss-25); + --o-ui-success-text-weak: var(--o-ui-moss-300); + --o-ui-success-icon-weakest: var(--o-ui-moss-100); + --o-ui-success-icon-weak: var(--o-ui-moss-300); + --o-ui-success-border: var(--o-ui-moss-100); + --o-ui-warning-text: var(--o-ui-koi-700); + --o-ui-warning-icon: var(--o-ui-koi-700); + --o-ui-warning-border: var(--o-ui-koi-100); + --o-ui-warning-surface-weak: var(--o-ui-koi-50); + --o-ui-warning-surface-strong: var(--o-ui-koi-100); + --o-ui-warning-surface: var(--o-ui-koi-25); + --o-ui-warning-text-weak: var(--o-ui-koi-300); + --o-ui-warning-icon-weak: var(--o-ui-koi-300); + --o-ui-warning-icon-weakest: var(--o-ui-koi-100); + --o-ui-neutral-surface-weakest: var(--o-ui-rock-25); + --o-ui-neutral-border-weakest: var(--o-ui-rock-50); + --o-ui-neutral-surface-weak-hover: var(--o-ui-rock-50); + --o-ui-neutral-border-active: var(--o-ui-rock-800); + --o-ui-neutral-border-hover: var(--o-ui-rock-300); + --o-ui-neutral-icon-active: var(--o-ui-samoyed); + --o-ui-neutral-icon-hover: var(--o-ui-rock-700); + --o-ui-neutral-icon-strong: var(--o-ui-samoyed); + --o-ui-neutral-icon-weakest: var(--o-ui-rock-200); + --o-ui-neutral-border-weak: var(--o-ui-rock-75); + --o-ui-neutral-border: var(--o-ui-rock-200); + --o-ui-neutral-icon-weak-hover: var(--o-ui-rock-700); + --o-ui-neutral-icon-weak: var(--o-ui-rock-400); + --o-ui-neutral-icon: var(--o-ui-rock-800); + --o-ui-neutral-icon-disabled: var(--o-ui-rock-300); + --o-ui-neutral-surface-hover: var(--o-ui-rock-25); + --o-ui-neutral-surface-strong: var(--o-ui-rock-800); + --o-ui-neutral-border-strong: var(--o-ui-rock-800); + --o-ui-neutral-border-disabled: var(--o-ui-rock-50); + --o-ui-neutral-text-weakest: var(--o-ui-rock-200); + --o-ui-neutral-text: var(--o-ui-rock-800); + --o-ui-neutral-text-strong: var(--o-ui-samoyed); + --o-ui-neutral-text-active: var(--o-ui-samoyed); + --o-ui-neutral-text-disabled: var(--o-ui-rock-300); + --o-ui-neutral-surface: var(--o-ui-samoyed); + --o-ui-neutral-surface-weak: var(--o-ui-rock-50); + --o-ui-neutral-surface-active: var(--o-ui-rock-800); + --o-ui-neutral-surface-disabled: var(--o-ui-rock-50); + --o-ui-neutral-text-weak: var(--o-ui-rock-400); + --o-ui-neutral-surface-weakest-hover: var(--o-ui-rock-50); + --o-ui-neutral-surface-weakest-active: var(--o-ui-rock-50); + --o-ui-neutral-text-hover: var(--o-ui-rock-700); + --o-ui-decorative-option1-text: var(--o-ui-sapphire-900); + --o-ui-decorative-option1-icon: var(--o-ui-sapphire-900); + --o-ui-decorative-option1-text-weak: var(--o-ui-sapphire-50); + --o-ui-decorative-option1-border: var(--o-ui-sapphire-100); + --o-ui-decorative-option1-surface: var(--o-ui-sapphire-100); + --o-ui-decorative-option1-surface-hover: var(--o-ui-sapphire-200); + --o-ui-decorative-option1-surface-strong: var(--o-ui-sapphire-200); + --o-ui-decorative-option1-surface-weakest: var(--o-ui-sapphire-25); + --o-ui-decorative-option1-surface-weak: var(--o-ui-sapphire-50); + --o-ui-decorative-option2-border: var(--o-ui-quetzal-100); + --o-ui-decorative-option2-icon: var(--o-ui-quetzal-900); + --o-ui-decorative-option2-text-weak: var(--o-ui-quetzal-50); + --o-ui-decorative-option2-text: var(--o-ui-quetzal-900); + --o-ui-decorative-option2-surface-hover: var(--o-ui-quetzal-100); + --o-ui-decorative-option2-surface: var(--o-ui-quetzal-75); + --o-ui-decorative-option2-surface-weak: var(--o-ui-quetzal-100); + --o-ui-decorative-option3-border: var(--o-ui-koi-100); + --o-ui-decorative-option3-text-weak: var(--o-ui-koi-50); + --o-ui-decorative-option3-text: var(--o-ui-koi-900); + --o-ui-decorative-option3-icon: var(--o-ui-koi-900); + --o-ui-decorative-option3-surface: var(--o-ui-koi-200); + --o-ui-decorative-option3-surface-hover: var(--o-ui-koi-200); + --o-ui-decorative-option3-surface-strong: var(--o-ui-koi-200); + --o-ui-decorative-option3-surface-weakest: var(--o-ui-koi-25); + --o-ui-decorative-option3-surface-weak: var(--o-ui-koi-100); + --o-ui-decorative-option4-border: var(--o-ui-moss-100); + --o-ui-decorative-option4-text: var(--o-ui-moss-900); + --o-ui-decorative-option4-text-weak: var(--o-ui-moss-400); + --o-ui-decorative-option4-icon: var(--o-ui-moss-900); + --o-ui-decorative-option4-surface: var(--o-ui-moss-75); + --o-ui-decorative-option4-surface-hover: var(--o-ui-moss-100); + --o-ui-decorative-option4-surface-strong: var(--o-ui-moss-100); + --o-ui-decorative-option6-border: var(--o-ui-sunken-treasure-100); + --o-ui-decorative-option6-text-weak: var(--o-ui-sunken-treasure-200); + --o-ui-decorative-option6-text: var(--o-ui-sunken-treasure-900); + --o-ui-decorative-option6-icon: var(--o-ui-sunken-treasure-900); + --o-ui-decorative-option6-surface: var(--o-ui-sunken-treasure-75); + --o-ui-decorative-option6-surface-strong: var(--o-ui-sunken-treasure-100); + --o-ui-decorative-option6-surface-hover: var(--o-ui-sunken-treasure-100); + --o-ui-decorative-option6-surface-weak: var(--o-ui-sunken-treasure-50); + --o-ui-decorative-option5-border: var(--o-ui-coastal-100); + --o-ui-decorative-option5-icon: var(--o-ui-coastal-900); + --o-ui-decorative-option5-surface: var(--o-ui-coastal-75); + --o-ui-decorative-option5-surface-hover: var(--o-ui-coastal-100); + --o-ui-decorative-option5-surface-strong: var(--o-ui-coastal-100); + --o-ui-decorative-option5-text: var(--o-ui-coastal-900); + --o-ui-decorative-option5-text-weak: var(--o-ui-coastal-50); + --o-ui-decorative-option7-border: var(--o-ui-toad-100); + --o-ui-decorative-option7-text: var(--o-ui-toad-900); + --o-ui-decorative-option7-text-weak: var(--o-ui-toad-500); + --o-ui-decorative-option7-surface: var(--o-ui-toad-75); + --o-ui-decorative-option7-surface-hover: var(--o-ui-toad-75); + --o-ui-decorative-option7-surface-strong: var(--o-ui-toad-75); + --o-ui-decorative-option7-icon: var(--o-ui-toad-900); + --o-ui-decorative-option8-border: var(--o-ui-amanita-100); + --o-ui-decorative-option8-text: var(--o-ui-amanita-900); + --o-ui-decorative-option8-surface: var(--o-ui-amanita-100); + --o-ui-decorative-option8-text-weak: var(--o-ui-amanita-300); + --o-ui-decorative-option8-surface-strong: var(--o-ui-amanita-100); + --o-ui-decorative-option8-surface-hover: var(--o-ui-amanita-200); + --o-ui-decorative-option8-icon: var(--o-ui-amanita-900); + --o-ui-decorative-option9-border: var(--o-ui-rock-100); + --o-ui-decorative-option9-text-weak: var(--o-ui-rock-50); + --o-ui-decorative-option9-text: var(--o-ui-samoyed); + --o-ui-decorative-option9-surface-hover: var(--o-ui-rock-500); + --o-ui-decorative-option9-surface-strong: var(--o-ui-rock-800); + --o-ui-decorative-option9-surface: var(--o-ui-rock-400); + --o-ui-decorative-option9-icon: var(--o-ui-samoyed); + --o-ui-primary-surface-active: var(--o-ui-sapphire-50); + --o-ui-primary-text-hover: var(--o-ui-sapphire-600); + --o-ui-primary-text-strong-hover: var(--o-ui-samoyed); + --o-ui-primary-text-strong: var(--o-ui-samoyed); + --o-ui-primary-surface-hover: var(--o-ui-sapphire-600); + --o-ui-primary-text: var(--o-ui-sapphire-500); + --o-ui-primary-surface-strong-hover: var(--o-ui-sapphire-600); + --o-ui-primary-surface-strong-active: var(--o-ui-sapphire-50); + --o-ui-primary-surface-strong: var(--o-ui-sapphire-400); + --o-ui-primary-surface-weak: var(--o-ui-sapphire-25); + --o-ui-primary-surface: var(--o-ui-sapphire-50); + --o-ui-primary-text-disabled: var(--o-ui-sapphire-200); + --o-ui-primary-surface-focus: var(--o-ui-sapphire-25); + --o-ui-primary-surface-disabled: var(--o-ui-sapphire-200); + --o-ui-primary-icon-disabled: var(--o-ui-sapphire-200); + --o-ui-primary-icon-hover: var(--o-ui-sapphire-600); + --o-ui-primary-border: var(--o-ui-sapphire-400); + --o-ui-primary-border-focus: var(--o-ui-sapphire-500); + --o-ui-primary-icon: var(--o-ui-sapphire-500); + --o-ui-primary-icon-strong-hover: var(--o-ui-samoyed); + --o-ui-primary-icon-strong: var(--o-ui-samoyed); + --o-ui-primary-text-active: var(--o-ui-sapphire-500); + --o-ui-primary-border-active: var(--o-ui-sapphire-400); + --o-ui-primary-icon-active: var(--o-ui-sapphire-500); + --o-ui-danger-border: var(--o-ui-amanita-100); + --o-ui-danger-icon-disabled: var(--o-ui-amanita-100); + --o-ui-danger-text-disabled: var(--o-ui-amanita-100); + --o-ui-danger-icon-hover: var(--o-ui-amanita-500); + --o-ui-danger-icon-strong-hover: var(--o-ui-samoyed); + --o-ui-danger-icon-strong: var(--o-ui-samoyed); + --o-ui-danger-text-strong-hover: var(--o-ui-samoyed); + --o-ui-danger-text-strong: var(--o-ui-samoyed); + --o-ui-danger-text-weak: var(--o-ui-amanita-300); + --o-ui-danger-surface-active: var(--o-ui-amanita-50); + --o-ui-danger-text: var(--o-ui-amanita-700); + --o-ui-danger-icon-weak: var(--o-ui-amanita-300); + --o-ui-danger-icon: var(--o-ui-amanita-700); + --o-ui-danger-border-strong: var(--o-ui-amanita-300); + --o-ui-danger-surface-weak: var(--o-ui-amanita-50); + --o-ui-danger-surface-strong-hover: var(--o-ui-amanita-500); + --o-ui-danger-surface-strong: var(--o-ui-amanita-300); + --o-ui-danger-surface-hover: var(--o-ui-amanita-500); + --o-ui-danger-surface-disabled: var(--o-ui-amanita-100); + --o-ui-danger-text-hover: var(--o-ui-amanita-500); + --o-ui-danger-surface: var(--o-ui-amanita-25); + --o-ui-danger-text-active: var(--o-ui-amanita-400); + --o-ui-danger-icon-active: var(--o-ui-amanita-400); + --o-ui-danger-border-active: var(--o-ui-amanita-300); + --o-ui-upsell-surface: var(--o-ui-sunken-treasure-25); + --o-ui-upsell-surface-active: var(--o-ui-sunken-treasure-50); + --o-ui-upsell-text-disabled: var(--o-ui-sunken-treasure-400); + --o-ui-upsell-text-hover: var(--o-ui-sunken-treasure-900); + --o-ui-upsell-icon: var(--o-ui-sunken-treasure-800); + --o-ui-upsell-text: var(--o-ui-sunken-treasure-800); + --o-ui-upsell-surface-disabled: var(--o-ui-sunken-treasure-75); + --o-ui-upsell-surface-weak: var(--o-ui-sunken-treasure-25); + --o-ui-upsell-icon-active: var(--o-ui-sunken-treasure-400); + --o-ui-upsell-border-disabled: var(--o-ui-sunken-treasure-75); + --o-ui-upsell-surface-hover: var(--o-ui-sunken-treasure-100); + --o-ui-upsell-border: var(--o-ui-sunken-treasure-100); + --o-ui-upsell-icon-weak: var(--o-ui-sunken-treasure-100); + --o-ui-upsell-icon-weakest: var(--o-ui-sunken-treasure-75); + --o-ui-upsell-text-active: var(--o-ui-sunken-treasure-400); + --o-ui-upsell-border-active: var(--o-ui-sunken-treasure-200); +} + +.o-ui.o-ui-orbiter.o-ui-orbiter-dark { + --o-ui-upsell-border-active: var(--o-ui-sunken-treasure-500); + --o-ui-upsell-text-active: var(--o-ui-sunken-treasure-300); + --o-ui-upsell-icon-weakest: var(--o-ui-sunken-treasure-100); + --o-ui-upsell-icon-weak: var(--o-ui-sunken-treasure-300); + --o-ui-upsell-border: var(--o-ui-sunken-treasure-200); + --o-ui-upsell-surface-hover: var(--o-ui-sunken-treasure-600); + --o-ui-upsell-border-disabled: var(--o-ui-sunken-treasure-700); + --o-ui-upsell-icon-active: var(--o-ui-sunken-treasure-300); + --o-ui-upsell-surface-weak: var(--o-ui-sunken-treasure-800); + --o-ui-upsell-surface-disabled: var(--o-ui-sunken-treasure-700); + --o-ui-upsell-text: var(--o-ui-sunken-treasure-900); + --o-ui-upsell-icon: var(--o-ui-sunken-treasure-900); + --o-ui-upsell-text-hover: var(--o-ui-sunken-treasure-700); + --o-ui-upsell-text-disabled: var(--o-ui-sunken-treasure-300); + --o-ui-upsell-surface-active: var(--o-ui-sunken-treasure-800); + --o-ui-upsell-surface: var(--o-ui-sunken-treasure-50); + --o-ui-danger-border-active: var(--o-ui-amanita-400); + --o-ui-danger-icon-active: var(--o-ui-amanita-300); + --o-ui-danger-text-active: var(--o-ui-amanita-300); + --o-ui-danger-surface: var(--o-ui-amanita-200); + --o-ui-danger-text-hover: var(--o-ui-amanita-200); + --o-ui-danger-surface-disabled: var(--o-ui-amanita-600); + --o-ui-danger-surface-hover: var(--o-ui-amanita-200); + --o-ui-danger-surface-strong: var(--o-ui-amanita-300); + --o-ui-danger-surface-strong-hover: var(--o-ui-amanita-200); + --o-ui-danger-surface-weak: var(--o-ui-amanita-900); + --o-ui-danger-border-strong: var(--o-ui-amanita-300); + --o-ui-danger-icon: var(--o-ui-amanita-900); + --o-ui-danger-icon-weak: var(--o-ui-amanita-100); + --o-ui-danger-text: var(--o-ui-amanita-900); + --o-ui-danger-surface-active: var(--o-ui-amanita-800); + --o-ui-danger-text-weak: var(--o-ui-amanita-100); + --o-ui-danger-text-strong: var(--o-ui-samoyed); + --o-ui-danger-text-strong-hover: var(--o-ui-samoyed); + --o-ui-danger-icon-strong: var(--o-ui-samoyed); + --o-ui-danger-icon-hover: var(--o-ui-amanita-200); + --o-ui-danger-text-disabled: var(--o-ui-amanita-600); + --o-ui-danger-icon-disabled: var(--o-ui-amanita-600); + --o-ui-danger-border: var(--o-ui-amanita-500); + --o-ui-primary-icon-active: var(--o-ui-sapphire-200); + --o-ui-primary-border-active: var(--o-ui-sapphire-300); + --o-ui-primary-text-active: var(--o-ui-sapphire-200); + --o-ui-primary-icon-strong: var(--o-ui-samoyed); + --o-ui-primary-icon-strong-hover: var(--o-ui-sapphire-300); + --o-ui-primary-icon: var(--o-ui-sapphire-200); + --o-ui-primary-border-focus: var(--o-ui-sapphire-200); + --o-ui-primary-border: var(--o-ui-sapphire-300); + --o-ui-primary-icon-hover: var(--o-ui-sapphire-300); + --o-ui-primary-icon-disabled: var(--o-ui-sapphire-700); + --o-ui-primary-surface-disabled: var(--o-ui-sapphire-700); + --o-ui-primary-surface-focus: var(--o-ui-sapphire-900); + --o-ui-primary-text-disabled: var(--o-ui-sapphire-700); + --o-ui-primary-surface: var(--o-ui-sapphire-200); + --o-ui-primary-surface-weak: var(--o-ui-sapphire-800); + --o-ui-primary-surface-strong: var(--o-ui-sapphire-400); + --o-ui-primary-surface-strong-hover: var(--o-ui-sapphire-200); + --o-ui-primary-surface-strong-active: var(--o-ui-sapphire-800); + --o-ui-primary-text: var(--o-ui-sapphire-200); + --o-ui-primary-surface-hover: var(--o-ui-sapphire-200); + --o-ui-primary-text-strong: var(--o-ui-samoyed); + --o-ui-primary-text-strong-hover: var(--o-ui-sapphire-300); + --o-ui-primary-text-hover: var(--o-ui-sapphire-300); + --o-ui-primary-surface-active: var(--o-ui-sapphire-800); + --o-ui-decorative-option9-border: var(--o-ui-rock-400); + --o-ui-decorative-option9-icon: var(--o-ui-samoyed); + --o-ui-decorative-option9-surface-strong: var(--o-ui-rock-800); + --o-ui-decorative-option9-surface-hover: var(--o-ui-rock-500); + --o-ui-decorative-option9-surface: var(--o-ui-rock-400); + --o-ui-decorative-option9-text: var(--o-ui-samoyed); + --o-ui-decorative-option9-text-weak: var(--o-ui-rock-50); + --o-ui-decorative-option8-border: var(--o-ui-amanita-400); + --o-ui-decorative-option8-icon: var(--o-ui-amanita-900); + --o-ui-decorative-option8-surface-strong: var(--o-ui-amanita-100); + --o-ui-decorative-option8-surface-hover: var(--o-ui-amanita-200); + --o-ui-decorative-option8-text-weak: var(--o-ui-amanita-300); + --o-ui-decorative-option8-surface: var(--o-ui-amanita-100); + --o-ui-decorative-option8-text: var(--o-ui-amanita-900); + --o-ui-decorative-option7-border: var(--o-ui-toad-400); + --o-ui-decorative-option7-icon: var(--o-ui-toad-900); + --o-ui-decorative-option7-surface-strong: var(--o-ui-toad-75); + --o-ui-decorative-option7-surface-hover: var(--o-ui-toad-75); + --o-ui-decorative-option7-surface: var(--o-ui-toad-50); + --o-ui-decorative-option7-text-weak: var(--o-ui-toad-500); + --o-ui-decorative-option7-text: var(--o-ui-toad-900); + --o-ui-decorative-option5-text-weak: var(--o-ui-coastal-50); + --o-ui-decorative-option5-text: var(--o-ui-coastal-900); + --o-ui-decorative-option5-surface-strong: var(--o-ui-coastal-100); + --o-ui-decorative-option5-surface-hover: var(--o-ui-coastal-100); + --o-ui-decorative-option5-surface: var(--o-ui-coastal-75); + --o-ui-decorative-option5-border: var(--o-ui-coastal-400); + --o-ui-decorative-option5-icon: var(--o-ui-coastal-900); + --o-ui-decorative-option6-surface-weak: var(--o-ui-sunken-treasure-25); + --o-ui-decorative-option6-surface-strong: var(--o-ui-sunken-treasure-100); + --o-ui-decorative-option6-surface-hover: var(--o-ui-sunken-treasure-100); + --o-ui-decorative-option6-surface: var(--o-ui-sunken-treasure-75); + --o-ui-decorative-option6-border: var(--o-ui-sunken-treasure-400); + --o-ui-decorative-option6-icon: var(--o-ui-sunken-treasure-900); + --o-ui-decorative-option6-text: var(--o-ui-sunken-treasure-900); + --o-ui-decorative-option6-text-weak: var(--o-ui-sunken-treasure-200); + --o-ui-decorative-option4-surface-strong: var(--o-ui-moss-100); + --o-ui-decorative-option4-surface-hover: var(--o-ui-moss-100); + --o-ui-decorative-option4-surface: var(--o-ui-moss-75); + --o-ui-decorative-option4-border: var(--o-ui-moss-400); + --o-ui-decorative-option4-icon: var(--o-ui-moss-900); + --o-ui-decorative-option4-text-weak: var(--o-ui-moss-400); + --o-ui-decorative-option4-text: var(--o-ui-moss-900); + --o-ui-decorative-option3-surface-strong: var(--o-ui-koi-200); + --o-ui-decorative-option3-surface-weakest: var(--o-ui-koi-25); + --o-ui-decorative-option3-surface-weak: var(--o-ui-koi-50); + --o-ui-decorative-option3-surface-hover: var(--o-ui-koi-200); + --o-ui-decorative-option3-surface: var(--o-ui-koi-100); + --o-ui-decorative-option3-border: var(--o-ui-koi-400); + --o-ui-decorative-option3-icon: var(--o-ui-koi-900); + --o-ui-decorative-option3-text: var(--o-ui-koi-900); + --o-ui-decorative-option3-text-weak: var(--o-ui-koi-50); + --o-ui-decorative-option2-surface-strong: var(--o-ui-quetzal-100); + --o-ui-decorative-option2-surface-hover: var(--o-ui-quetzal-100); + --o-ui-decorative-option2-surface: var(--o-ui-quetzal-75); + --o-ui-decorative-option2-text: var(--o-ui-quetzal-900); + --o-ui-decorative-option2-text-weak: var(--o-ui-quetzal-50); + --o-ui-decorative-option2-border: var(--o-ui-quetzal-400); + --o-ui-decorative-option2-icon: var(--o-ui-quetzal-900); + --o-ui-decorative-option1-surface-strong: var(--o-ui-sapphire-200); + --o-ui-decorative-option1-surface-weakest: var(--o-ui-sapphire-25); + --o-ui-decorative-option1-surface-weak: var(--o-ui-sapphire-50); + --o-ui-decorative-option1-surface-hover: var(--o-ui-sapphire-200); + --o-ui-decorative-option1-surface: var(--o-ui-sapphire-100); + --o-ui-decorative-option1-text-weak: var(--o-ui-sapphire-50); + --o-ui-decorative-option1-border: var(--o-ui-sapphire-400); + --o-ui-decorative-option1-icon: var(--o-ui-sapphire-900); + --o-ui-decorative-option1-text: var(--o-ui-sapphire-900); + --o-ui-neutral-text-hover: var(--o-ui-rock-50); + --o-ui-neutral-surface-weakest-hover: var(--o-ui-rock-800); + --o-ui-neutral-text-weak: var(--o-ui-rock-200); + --o-ui-neutral-surface-disabled: var(--o-ui-rock-700); + --o-ui-neutral-surface-active: var(--o-ui-toad-25); + --o-ui-neutral-surface-weak: var(--o-ui-rock-800); + --o-ui-neutral-surface: var(--o-ui-abyss); + --o-ui-neutral-text-disabled: var(--o-ui-rock-500); + --o-ui-neutral-text-active: var(--o-ui-rock-900); + --o-ui-neutral-text-strong: var(--o-ui-rock-900); + --o-ui-neutral-text: var(--o-ui-rock-25); + --o-ui-neutral-text-weakest: var(--o-ui-rock-400); + --o-ui-neutral-border-disabled: var(--o-ui-rock-800); + --o-ui-neutral-border-strong-hover: var(--o-ui-samoyed); + --o-ui-neutral-border-strong: var(--o-ui-samoyed); + --o-ui-neutral-surface-strong: var(--o-ui-samoyed); + --o-ui-neutral-surface-hover: var(--o-ui-rock-800); + --o-ui-neutral-icon-disabled: var(--o-ui-rock-500); + --o-ui-neutral-icon: var(--o-ui-rock-25); + --o-ui-neutral-icon-weak: var(--o-ui-rock-200); + --o-ui-neutral-border: var(--o-ui-rock-500); + --o-ui-neutral-border-weak: var(--o-ui-rock-800); + --o-ui-neutral-icon-weakest: var(--o-ui-rock-400); + --o-ui-neutral-icon-strong: var(--o-ui-rock-900); + --o-ui-neutral-icon-hover: var(--o-ui-rock-50); + --o-ui-neutral-icon-active: var(--o-ui-rock-900); + --o-ui-neutral-border-hover: var(--o-ui-rock-300); + --o-ui-neutral-border-active: var(--o-ui-toad-25); + --o-ui-neutral-surface-weak-hover: var(--o-ui-rock-700); + --o-ui-neutral-border-weakest: var(--o-ui-rock-800); + --o-ui-neutral-surface-weakest: var(--o-ui-rock-900); + --o-ui-warning-icon-weakest: var(--o-ui-koi-200); + --o-ui-warning-icon-weak: var(--o-ui-koi-75); + --o-ui-warning-text-weak: var(--o-ui-koi-75); + --o-ui-warning-surface: var(--o-ui-koi-75); + --o-ui-warning-surface-strong: var(--o-ui-koi-300); + --o-ui-warning-surface-weak: var(--o-ui-koi-800); + --o-ui-warning-border: var(--o-ui-koi-500); + --o-ui-warning-icon: var(--o-ui-koi-900); + --o-ui-warning-text: var(--o-ui-koi-900); + --o-ui-success-border: var(--o-ui-moss-500); + --o-ui-success-icon-weak: var(--o-ui-moss-75); + --o-ui-success-icon-weakest: var(--o-ui-moss-200); + --o-ui-success-text-weak: var(--o-ui-moss-75); + --o-ui-success-surface: var(--o-ui-moss-75); + --o-ui-success-surface-strong: var(--o-ui-moss-300); + --o-ui-success-text-hover: var(--o-ui-moss-700); + --o-ui-success-text: var(--o-ui-moss-900); + --o-ui-success-icon: var(--o-ui-moss-900); + --o-ui-success-surface-weak: var(--o-ui-moss-800); + --o-ui-information-icon-weakest: var(--o-ui-coastal-200); + --o-ui-information-surface-strong: var(--o-ui-coastal-300); + --o-ui-information-icon-weak: var(--o-ui-coastal-300); + --o-ui-information-text: var(--o-ui-coastal-900); + --o-ui-information-surface: var(--o-ui-coastal-75); + --o-ui-information-surface-weak: var(--o-ui-coastal-800); + --o-ui-information-text-weak: var(--o-ui-coastal-75); + --o-ui-information-icon: var(--o-ui-coastal-900); + --o-ui-information-border: var(--o-ui-coastal-400); + --o-ui-status-neutral-surface-strong: var(--o-ui-rock-100); + --o-ui-status-neutral-text: var(--o-ui-rock-25); + --o-ui-status-neutral-icon: var(--o-ui-rock-25); + --o-ui-status-neutral-surface: var(--o-ui-abyss); + --o-ui-status-progress-surface-strong: var(--o-ui-sapphire-200); + --o-ui-status-progress-icon: var(--o-ui-sapphire-900); + --o-ui-status-progress-surface: var(--o-ui-sapphire-100); + --o-ui-status-progress-text: var(--o-ui-sapphire-900); + --o-ui-status-option6-surface-strong: var(--o-ui-sunken-treasure-100); + --o-ui-status-option6-icon: var(--o-ui-sunken-treasure-900); + --o-ui-status-option6-surface: var(--o-ui-sunken-treasure-75); + --o-ui-status-option6-text: var(--o-ui-sunken-treasure-900); + --o-ui-status-option5-surface-strong: var(--o-ui-toad-100); + --o-ui-status-option5-icon: var(--o-ui-toad-900); + --o-ui-status-option5-surface: var(--o-ui-toad-200); + --o-ui-status-option5-text: var(--o-ui-toad-900); + --o-ui-status-option1-surface-strong: var(--o-ui-coastal-100); + --o-ui-status-option1-icon: var(--o-ui-coastal-900); + --o-ui-status-option1-surface: var(--o-ui-coastal-200); + --o-ui-status-option1-text: var(--o-ui-coastal-900); + --o-ui-status-option2-surface-strong: var(--o-ui-orchid-bloom-100); + --o-ui-status-option2-text: var(--o-ui-orchid-bloom-900); + --o-ui-status-option2-surface: var(--o-ui-orchid-bloom-200); + --o-ui-status-option2-icon: var(--o-ui-orchid-bloom-900); + --o-ui-status-option3-surface-strong: var(--o-ui-quetzal-100); + --o-ui-status-option3-icon: var(--o-ui-quetzal-900); + --o-ui-status-option3-surface: var(--o-ui-quetzal-200); + --o-ui-status-option3-text: var(--o-ui-quetzal-900); + --o-ui-status-option4-surface-strong: var(--o-ui-fog-100); + --o-ui-status-option4-icon: var(--o-ui-fog-900); + --o-ui-status-option4-surface: var(--o-ui-fog-200); + --o-ui-status-option4-text: var(--o-ui-fog-900); + --o-ui-status-inactive-surface-strong: var(--o-ui-rock-100); + --o-ui-status-inactive-icon: var(--o-ui-rock-800); + --o-ui-status-inactive-surface: var(--o-ui-rock-75); + --o-ui-status-inactive-text: var(--o-ui-rock-900); + --o-ui-status-caution-surface-strong: var(--o-ui-koi-200); + --o-ui-status-caution-icon: var(--o-ui-koi-900); + --o-ui-status-caution-surface: var(--o-ui-koi-75); + --o-ui-status-caution-text: var(--o-ui-koi-900); + --o-ui-status-negative-surface-strong: var(--o-ui-amanita-200); + --o-ui-status-negative-icon: var(--o-ui-amanita-900); + --o-ui-status-negative-surface: var(--o-ui-amanita-75); + --o-ui-status-negative-text: var(--o-ui-amanita-900); + --o-ui-status-positive-icon: var(--o-ui-moss-900); + --o-ui-status-positive-surface-strong: var(--o-ui-moss-200); + --o-ui-status-positive-surface: var(--o-ui-moss-75); + --o-ui-status-positive-text: var(--o-ui-moss-900); +} diff --git a/packages/components/src/styling/src/theming/index.ts b/packages/components/src/styling/src/theming/index.ts index d8883b4d9..7b26185fa 100644 --- a/packages/components/src/styling/src/theming/index.ts +++ b/packages/components/src/styling/src/theming/index.ts @@ -1,8 +1,3 @@ -export * from "./sharegateTheme"; -export * from "./createTheme"; export * from "./createThemeVars"; -export * from "./orbiterTheme"; -export * from "./themeAccessor"; -export * from "./ThemeContext"; export * from "./ThemeProvider"; export * from "./useThemeComputedStyle"; diff --git a/packages/components/src/styling/src/theming/orbiterTheme.ts b/packages/components/src/styling/src/theming/orbiterTheme.ts deleted file mode 100644 index 7d319bb64..000000000 --- a/packages/components/src/styling/src/theming/orbiterTheme.ts +++ /dev/null @@ -1,179 +0,0 @@ -import { ConditionalKeys, FixedLengthArray } from "type-fest"; - -import { CssColor } from "../styled-system"; - -export interface ColorSchemeSection { - common?: Partial; - light: Partial; - dark: Partial; -} - -export type SpaceValues = FixedLengthArray; - -export type SizingValues = FixedLengthArray; - -export interface FontSizeValues { - 1: string; - 2: string; - 3: string; - 4: string; - 5: string; - 6: string; - 7: string; - 8: string; - 9: string; - 10: string; - 11: string; -} - -export type FontWeightValues = FixedLengthArray; - -export type LineHeightValues = FixedLengthArray; - -export type BoxShadowValues = FixedLengthArray; - -export interface BoxShadowAliases { - "alias-lifted": string; - "alias-floating": string; -} - -export interface BorderRadiusValues { - 1: string; - 2: string; - 3: string; - 4: string; - "pill": string; - "circular": string; -} - -export type BoxShadowColorSchemes = ColorSchemeSection; - -export type ColorPalette = FixedLengthArray; - -export interface ColorPaletteSection { - "white": string; - "black": string; - "gray": string; - "purple": ColorPalette; - "green": ColorPalette; - "alert": ColorPalette; - "warning": ColorPalette; - "success": ColorPalette; - "neutral": ColorPalette; - "orange": ColorPalette; - "accent": ColorPalette; -} - -type AliasValue = - // Any color in palette $accent-5 - `$${ConditionalKeys}-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}` | - // Any static colors $white $black - `$${ConditionalKeys}` | - // hsl(a), rgb(a), #, etc... - CssColor; - -export interface ColorAliases { - // Background - "bg-alias-surface": AliasValue; - "bg-alias-body": AliasValue; - "bg-alias-soft-break": AliasValue; - "bg-alias-mid-break": AliasValue; - "bg-alias-hard-break": AliasValue; - "bg-alias-basic": AliasValue; - "bg-alias-basic-hover": AliasValue; - "bg-alias-basic-active": AliasValue; - "bg-alias-basic-transparent": AliasValue; - "bg-alias-basic-transparent-hover": AliasValue; - "bg-alias-basic-transparent-active": AliasValue; - "bg-alias-static-white": AliasValue; - "bg-alias-grey-hover": AliasValue; - "bg-alias-grey-active": AliasValue; - "bg-alias-accent": AliasValue; - "bg-alias-accent-hover": AliasValue; - "bg-alias-accent-active": AliasValue; - "bg-alias-accent-faint": AliasValue; - "bg-alias-accent-light": AliasValue; - "bg-alias-accent-transparent": AliasValue; - "bg-alias-accent-transparent-hover": AliasValue; - "bg-alias-accent-transparent-active": AliasValue; - "bg-alias-alert": AliasValue; - "bg-alias-alert-hover": AliasValue; - "bg-alias-alert-active": AliasValue; - "bg-alias-alert-faint": AliasValue; - "bg-alias-alert-light": AliasValue; - "bg-alias-alert-transparent": AliasValue; - "bg-alias-alert-transparent-hover": AliasValue; - "bg-alias-alert-transparent-active": AliasValue; - "bg-alias-warning": AliasValue; - "bg-alias-warning-hover": AliasValue; - "bg-alias-warning-active": AliasValue; - "bg-alias-warning-faint": AliasValue; - "bg-alias-warning-light": AliasValue; - "bg-alias-success": AliasValue; - "bg-alias-success-hover": AliasValue; - "bg-alias-success-active": AliasValue; - "bg-alias-success-faint": AliasValue; - "bg-alias-success-light": AliasValue; - "bg-alias-transparent": AliasValue; - "bg-alias-input-selection": AliasValue; - "bg-alias-underlay": AliasValue; - // Border - "b-alias-low-break": AliasValue; - "b-alias-mid-break": AliasValue; - "b-alias-high-break": AliasValue; - "b-alias-accent-active": AliasValue; - "b-alias-alert": AliasValue; - "b-alias-alert-hover": AliasValue; - "b-alias-alert-active": AliasValue; - "b-alias-warning": AliasValue; - "b-alias-warning-hover": AliasValue; - "b-alias-warning-active": AliasValue; - "b-alias-success": AliasValue; - "b-alias-success-hover": AliasValue; - "b-alias-success-active": AliasValue; - // Icon - "icon-alias-primary": AliasValue; - "icon-alias-primary-hover": AliasValue; - "icon-alias-secondary": AliasValue; - "icon-alias-tertiary": AliasValue; - "icon-alias-faint": AliasValue; - "icon-alias-accent": AliasValue; - "icon-alias-accent-hover": AliasValue; - "icon-alias-accent-active": AliasValue; - "icon-alias-alert": AliasValue; - "icon-alias-alert-hover": AliasValue; - "icon-alias-warning": AliasValue; - "icon-alias-success": AliasValue; - "icon-alias-static-white": AliasValue; - "icon-alias-input-placeholder": AliasValue; - // Text - "text-alias-primary": AliasValue; - "text-alias-primary-hover": AliasValue; - "text-alias-secondary": AliasValue; - "text-alias-tertiary": AliasValue; - "text-alias-faint": AliasValue; - "text-alias-accent": AliasValue; - "text-alias-accent-hover": AliasValue; - "text-alias-accent-active": AliasValue; - "text-alias-alert": AliasValue; - "text-alias-warning": AliasValue; - "text-alias-success": AliasValue; - "text-alias-static-white": AliasValue; - "text-alias-input-placeholder": AliasValue; - // Focus - "focus-ring-color-alias-default": AliasValue; -} - -export type ColorColorSchemes = ColorSchemeSection; - -export interface OrbiterTheme { - name: string; - sizing: SizingValues; - space: SpaceValues; - fontSizes: FontSizeValues; - fontWeights: FontWeightValues; - lineHeights: LineHeightValues; - borderRadii: BorderRadiusValues; - boxShadows: BoxShadowColorSchemes; - colors: ColorColorSchemes; -} diff --git a/packages/components/src/styling/src/theming/sharegate-theme.css b/packages/components/src/styling/src/theming/sharegate-theme.css new file mode 100644 index 000000000..a8ae3b09b --- /dev/null +++ b/packages/components/src/styling/src/theming/sharegate-theme.css @@ -0,0 +1,322 @@ +.o-ui.o-ui-orbiter { + --o-ui-sp-1: .25rem; + --o-ui-sp-2: .5rem; + --o-ui-sp-3: .75rem; + --o-ui-sp-4: 1rem; + --o-ui-sp-5: 1.25rem; + --o-ui-sp-6: 1.5rem; + --o-ui-sp-7: 2rem; + --o-ui-sp-8: 2.5rem; + --o-ui-sp-9: 3rem; + --o-ui-sp-10: 3.5rem; + --o-ui-sp-11: 4rem; + --o-ui-sp-12: 4.5rem; + --o-ui-sp-13: 5rem; + --o-ui-sz-1: .75rem; + --o-ui-sz-2: 1rem; + --o-ui-sz-3: 1.25rem; + --o-ui-sz-4: 1.5rem; + --o-ui-sz-5: 2rem; + --o-ui-sz-6: 2.5rem; + --o-ui-sz-7: 3rem; + --o-ui-sz-8: 3.5rem; + --o-ui-sz-9: 4rem; + --o-ui-sz-10: 4.5rem; + --o-ui-sz-11: 5rem; + --o-ui-sz-12: 6rem; + --o-ui-sz-13: 8rem; + --o-ui-sz-14: 12rem; + --o-ui-sz-15: 16rem; + --o-ui-sz-16: 20rem; + --o-ui-sz-17: 24rem; + --o-ui-sz-18: 30rem; + --o-ui-fs-1: .625rem; + --o-ui-fs-2: .75rem; + --o-ui-fs-3: .875rem; + --o-ui-fs-4: 1rem; + --o-ui-fs-5: 1.125rem; + --o-ui-fs-6: 1.375rem; + --o-ui-fs-7: 1.75rem; + --o-ui-fs-8: 2rem; + --o-ui-fs-9: 2.5rem; + --o-ui-fs-10: 3.75rem; + --o-ui-fs-11: 5rem; + --o-ui-fw-1: 400; + --o-ui-fw-2: 500; + --o-ui-fw-3: 600; + --o-ui-lh-1: 1; + --o-ui-lh-2: 1.2; + --o-ui-lh-3: 1.25; + --o-ui-lh-4: 1.3333333; + --o-ui-lh-5: 1.454595; + --o-ui-lh-6: 1.5; + --o-ui-br-1: .125rem; + --o-ui-br-2: .25rem; + --o-ui-br-3: .5rem; + --o-ui-br-4: 1rem; + --o-ui-br-pill: 999px; + --o-ui-br-circular: 100%; + --o-ui-bs-alias-lifted: var(--o-ui-bs-1); + --o-ui-bs-alias-floating: var(--o-ui-bs-2); + --o-ui-neutral-1: #F4F4F4; + --o-ui-neutral-2: #E5E5E5; + --o-ui-neutral-3: #C4C3C3; + --o-ui-neutral-4: #ADACAC; + --o-ui-neutral-5: #929292; + --o-ui-neutral-6: #777676; + --o-ui-neutral-7: #555454; + --o-ui-neutral-8: #434342; + --o-ui-neutral-9: #272626; + --o-ui-neutral-10: #111010; + --o-ui-green-1: #DBFBEA; + --o-ui-green-2: #CBEEDB; + --o-ui-green-3: #A5CDB8; + --o-ui-green-4: #78BA9B; + --o-ui-green-5: #27A57A; + --o-ui-green-6: #268563; + --o-ui-green-7: #2B5E48; + --o-ui-green-8: #27493A; + --o-ui-green-9: #1A2A23; + --o-ui-green-10: #0C110E; + --o-ui-orange-1: #FCF2E3; + --o-ui-orange-2: #FEE2BB; + --o-ui-orange-3: #FFB470; + --o-ui-orange-4: #FF9048; + --o-ui-orange-5: #FF5C00; + --o-ui-orange-6: #C7521A; + --o-ui-orange-7: #874020; + --o-ui-orange-8: #66351E; + --o-ui-orange-9: #392015; + --o-ui-orange-10: #170E09; + --o-ui-purple-1: #EEF3FD; + --o-ui-purple-2: #DBE6FD; + --o-ui-purple-3: #B6C2EF; + --o-ui-purple-4: #95A9F5; + --o-ui-purple-5: #7689FD; + --o-ui-purple-6: #5D65F6; + --o-ui-purple-7: #4B11FD; + --o-ui-purple-8: #362AAE; + --o-ui-purple-9: #1F2151; + --o-ui-purple-10: #0D0F1F; + --o-ui-success-1: #E3F8EC; + --o-ui-success-2: #CEEDD7; + --o-ui-success-3: #93D39B; + --o-ui-success-4: #61C06D; + --o-ui-success-5: #17A93C; + --o-ui-success-6: #2D8739; + --o-ui-success-7: #2E5F30; + --o-ui-success-8: #284929; + --o-ui-success-9: #1B2A1A; + --o-ui-success-10: #0C110B; + --o-ui-warning-1: #FCF3DF; + --o-ui-warning-2: #FBE3B5; + --o-ui-warning-3: #F6BA42; + --o-ui-warning-4: #D7A541; + --o-ui-warning-5: #B48C3F; + --o-ui-warning-6: #907239; + --o-ui-warning-7: #65522F; + --o-ui-warning-8: #4E4027; + --o-ui-warning-9: #2C2619; + --o-ui-warning-10: #12100B; + --o-ui-alert-1: #FBF1F1; + --o-ui-alert-2: #FADFDF; + --o-ui-alert-3: #FDB0AF; + --o-ui-alert-4: #F88F8D; + --o-ui-alert-5: #EB6A64; + --o-ui-alert-6: #D93C37; + --o-ui-alert-7: #A91414; + --o-ui-alert-8: #811B15; + --o-ui-alert-9: #461812; + --o-ui-alert-10: #1D0B09; + --o-ui-black: #000000; + --o-ui-gray: #F9F9F9; + --o-ui-white: #FFFFFF; + --o-ui-accent-1: #EEF3FD; + --o-ui-accent-2: #DBE6FD; + --o-ui-accent-3: #B6C2EF; + --o-ui-accent-4: #95A9F5; + --o-ui-accent-5: #7689FD; + --o-ui-accent-6: #5D65F6; + --o-ui-accent-7: #4B11FD; + --o-ui-accent-8: #362AAE; + --o-ui-accent-9: #1F2151; + --o-ui-accent-10: #0D0F1F; +} + +.o-ui.o-ui-orbiter-light { + --o-ui-bs-1: 0 0 0 1px rgba(93, 101, 246, 0.05), 0 5px 10px rgba(93, 101, 246, 0.1); + --o-ui-bs-2: 0 0 0 1px rgba(93, 101, 246, 0.05), 0 0.1px 0.3px rgba(93, 101, 246, 0.022), 0 0.3px 0.7px rgba(93, 101, 246, 0.032), 0 0.6px 1.3px rgba(93, 101, 246, 0.04), 0 1.1px 2.2px rgba(93, 101, 246, 0.048), 0 2.1px 4.2px rgba(93, 101, 246, 0.058), 0 5px 10px rgba(93, 101, 246, 0.08); + --o-ui-bg-alias-body: var(--o-ui-gray); + --o-ui-bg-alias-surface: var(--o-ui-white); + --o-ui-bg-alias-soft-break: var(--o-ui-gray); + --o-ui-bg-alias-mid-break: var(--o-ui-neutral-1); + --o-ui-bg-alias-hard-break: var(--o-ui-neutral-3); + --o-ui-bg-alias-basic: var(--o-ui-neutral-8); + --o-ui-bg-alias-basic-hover: var(--o-ui-neutral-9); + --o-ui-bg-alias-basic-active: var(--o-ui-neutral-10); + --o-ui-bg-alias-basic-transparent: var(--o-ui-transparent); + --o-ui-bg-alias-basic-transparent-hover: var(--o-ui-neutral-2); + --o-ui-bg-alias-basic-transparent-active: var(--o-ui-neutral-3); + --o-ui-bg-alias-static-white: var(--o-ui-white); + --o-ui-bg-alias-grey-hover: var(--o-ui-neutral-1); + --o-ui-bg-alias-grey-active: var(--o-ui-neutral-3); + --o-ui-bg-alias-accent: var(--o-ui-purple-6); + --o-ui-bg-alias-accent-hover: var(--o-ui-purple-8); + --o-ui-bg-alias-accent-active: var(--o-ui-purple-9); + --o-ui-bg-alias-accent-faint: var(--o-ui-purple-1); + --o-ui-bg-alias-accent-light: var(--o-ui-purple-2); + --o-ui-bg-alias-accent-transparent: var(--o-ui-transparent); + --o-ui-bg-alias-accent-transparent-hover: var(--o-ui-purple-1); + --o-ui-bg-alias-accent-transparent-active: var(--o-ui-purple-2); + --o-ui-bg-alias-alert: var(--o-ui-alert-6); + --o-ui-bg-alias-alert-hover: var(--o-ui-alert-8); + --o-ui-bg-alias-alert-active: var(--o-ui-alert-9); + --o-ui-bg-alias-alert-faint: var(--o-ui-alert-1); + --o-ui-bg-alias-alert-light: var(--o-ui-alert-2); + --o-ui-bg-alias-alert-transparent: var(--o-ui-transparent); + --o-ui-bg-alias-alert-transparent-hover: var(--o-ui-alert-1); + --o-ui-bg-alias-alert-transparent-active: var(--o-ui-alert-2); + --o-ui-bg-alias-warning: var(--o-ui-warning-3); + --o-ui-bg-alias-warning-hover: var(--o-ui-warning-8); + --o-ui-bg-alias-warning-active: var(--o-ui-warning-9); + --o-ui-bg-alias-warning-faint: var(--o-ui-warning-1); + --o-ui-bg-alias-warning-light: var(--o-ui-warning-2); + --o-ui-bg-alias-success: var(--o-ui-success-6); + --o-ui-bg-alias-success-hover: var(--o-ui-success-8); + --o-ui-bg-alias-success-active: var(--o-ui-success-9); + --o-ui-bg-alias-success-faint: var(--o-ui-success-1); + --o-ui-bg-alias-success-light: var(--o-ui-success-2); + --o-ui-bg-alias-transparent: transparent; + --o-ui-bg-alias-input-selection: var(--o-ui-accent-3); + --o-ui-bg-alias-underlay: rgba(31, 33, 81, 0.5); + --o-ui-b-alias-low-break: var(--o-ui-neutral-2); + --o-ui-b-alias-mid-break: var(--o-ui-neutral-4); + --o-ui-b-alias-high-break: var(--o-ui-neutral-6); + --o-ui-b-alias-accent-active: var(--o-ui-purple-6); + --o-ui-b-alias-alert: var(--o-ui-alert-6); + --o-ui-b-alias-alert-hover: var(--o-ui-alert-7); + --o-ui-b-alias-alert-active: var(--o-ui-alert-8); + --o-ui-b-alias-warning: var(--o-ui-warning-4); + --o-ui-b-alias-warning-hover: var(--o-ui-warning-8); + --o-ui-b-alias-warning-active: var(--o-ui-warning-9); + --o-ui-b-alias-success: var(--o-ui-success-4); + --o-ui-b-alias-success-hover: var(--o-ui-success-8); + --o-ui-b-alias-success-active: var(--o-ui-success-9); + --o-ui-icon-alias-primary: var(--o-ui-neutral-10); + --o-ui-icon-alias-primary-hover: var(--o-ui-black); + --o-ui-icon-alias-secondary: var(--o-ui-neutral-8); + --o-ui-icon-alias-tertiary: var(--o-ui-neutral-6); + --o-ui-icon-alias-faint: var(--o-ui-neutral-5); + --o-ui-icon-alias-accent: var(--o-ui-purple-6); + --o-ui-icon-alias-accent-hover: var(--o-ui-purple-8); + --o-ui-icon-alias-accent-active: var(--o-ui-purple-8); + --o-ui-icon-alias-alert: var(--o-ui-alert-6); + --o-ui-icon-alias-alert-hover: var(--o-ui-alert-8); + --o-ui-icon-alias-warning: var(--o-ui-warning-5); + --o-ui-icon-alias-success: var(--o-ui-success-6); + --o-ui-icon-alias-static-white: var(--o-ui-white); + --o-ui-icon-alias-input-placeholder: var(--o-ui-neutral-4); + --o-ui-text-alias-primary: var(--o-ui-neutral-10); + --o-ui-text-alias-primary-hover: var(--o-ui-black); + --o-ui-text-alias-secondary: var(--o-ui-neutral-8); + --o-ui-text-alias-tertiary: var(--o-ui-neutral-6); + --o-ui-text-alias-faint: var(--o-ui-neutral-5); + --o-ui-text-alias-accent: var(--o-ui-purple-6); + --o-ui-text-alias-accent-hover: var(--o-ui-purple-8); + --o-ui-text-alias-accent-active: var(--o-ui-purple-8); + --o-ui-text-alias-alert: var(--o-ui-alert-7); + --o-ui-text-alias-warning: var(--o-ui-warning-5); + --o-ui-text-alias-success: var(--o-ui-success-6); + --o-ui-text-alias-static-white: var(--o-ui-white); + --o-ui-text-alias-input-placeholder: var(--o-ui-neutral-4); + --o-ui-focus-ring-color-alias-default: rgba(31, 115, 183, .35); +} + +.o-ui.o-ui-orbiter-dark { + --o-ui-bs-1: 0 0 0 1px rgba(93, 101, 246, 0.15), 0 5px 10px rgba(93, 101, 246, 0.1); + --o-ui-bs-2: 0 0 0 1px rgba(93, 101, 246, 0.15), 0 0.1px 0.3px rgba(93, 101, 246, 0.022), 0 0.3px 0.7px rgba(93, 101, 246, 0.032), 0 0.6px 1.3px rgba(93, 101, 246, 0.04), 0 1.1px 2.2px rgba(93, 101, 246, 0.048), 0 2.1px 4.2px rgba(93, 101, 246, 0.058), 0 5px 10px rgba(93, 101, 246, 0.08); + --o-ui-bg-alias-body: var(--o-ui-neutral-10); + --o-ui-bg-alias-surface: var(--o-ui-neutral-9); + --o-ui-bg-alias-soft-break: var(--o-ui-neutral-10); + --o-ui-bg-alias-mid-break: var(--o-ui-neutral-8); + --o-ui-bg-alias-hard-break: var(--o-ui-neutral-6); + --o-ui-bg-alias-basic: var(--o-ui-neutral-5); + --o-ui-bg-alias-basic-hover: var(--o-ui-neutral-6); + --o-ui-bg-alias-basic-active: var(--o-ui-neutral-7); + --o-ui-bg-alias-basic-transparent: var(--o-ui-transparent); + --o-ui-bg-alias-basic-transparent-hover: var(--o-ui-neutral-7); + --o-ui-bg-alias-basic-transparent-active: var(--o-ui-neutral-8); + --o-ui-bg-alias-static-white: var(--o-ui-white); + --o-ui-bg-alias-grey-hover: var(--o-ui-neutral-6); + --o-ui-bg-alias-grey-active: var(--o-ui-neutral-7); + --o-ui-bg-alias-accent: var(--o-ui-purple-6); + --o-ui-bg-alias-accent-hover: var(--o-ui-purple-8); + --o-ui-bg-alias-accent-active: var(--o-ui-purple-9); + --o-ui-bg-alias-accent-faint: var(--o-ui-purple-9); + --o-ui-bg-alias-accent-transparent: var(--o-ui-transparent); + --o-ui-bg-alias-accent-transparent-hover: var(--o-ui-purple-9); + --o-ui-bg-alias-accent-transparent-active: var(--o-ui-purple-9); + --o-ui-bg-alias-accent-light: var(--o-ui-purple-8); + --o-ui-bg-alias-alert: var(--o-ui-alert-6); + --o-ui-bg-alias-alert-hover: var(--o-ui-alert-8); + --o-ui-bg-alias-alert-active: var(--o-ui-alert-9); + --o-ui-bg-alias-alert-faint: var(--o-ui-alert-9); + --o-ui-bg-alias-alert-light: var(--o-ui-alert-8); + --o-ui-bg-alias-alert-transparent: var(--o-ui-transparent); + --o-ui-bg-alias-alert-transparent-hover: var(--o-ui-alert-8); + --o-ui-bg-alias-alert-transparent-active: var(--o-ui-alert-9); + --o-ui-bg-alias-warning: var(--o-ui-warning-3); + --o-ui-bg-alias-warning-hover: var(--o-ui-warning-8); + --o-ui-bg-alias-warning-active: var(--o-ui-warning-9); + --o-ui-bg-alias-warning-faint: var(--o-ui-warning-8); + --o-ui-bg-alias-warning-light: var(--o-ui-warning-7); + --o-ui-bg-alias-success: var(--o-ui-success-6); + --o-ui-bg-alias-success-hover: var(--o-ui-success-8); + --o-ui-bg-alias-success-active: var(--o-ui-success-9); + --o-ui-bg-alias-success-faint: var(--o-ui-success-9); + --o-ui-bg-alias-success-light: var(--o-ui-success-8); + --o-ui-bg-alias-transparent: transparent; + --o-ui-bg-alias-input-selection: var(--o-ui-accent-5); + --o-ui-bg-alias-underlay: rgba(31, 33, 81, 0.5); + --o-ui-b-alias-low-break: var(--o-ui-neutral-8); + --o-ui-b-alias-mid-break: var(--o-ui-neutral-7); + --o-ui-b-alias-high-break: var(--o-ui-neutral-5); + --o-ui-b-alias-accent-active: var(--o-ui-purple-8); + --o-ui-b-alias-alert: var(--o-ui-alert-6); + --o-ui-b-alias-alert-hover: var(--o-ui-alert-7); + --o-ui-b-alias-alert-active: var(--o-ui-alert-8); + --o-ui-b-alias-warning: var(--o-ui-warning-5); + --o-ui-b-alias-warning-hover: var(--o-ui-warning-7); + --o-ui-b-alias-warning-active: var(--o-ui-warning-8); + --o-ui-b-alias-success: var(--o-ui-success-6); + --o-ui-b-alias-success-hover: var(--o-ui-success-7); + --o-ui-b-alias-success-active: var(--o-ui-success-8); + --o-ui-icon-alias-primary: var(--o-ui-white); + --o-ui-icon-alias-primary-hover: var(--o-ui-white); + --o-ui-icon-alias-secondary: var(--o-ui-neutral-1); + --o-ui-icon-alias-tertiary: var(--o-ui-neutral-2); + --o-ui-icon-alias-faint: var(--o-ui-neutral-3); + --o-ui-icon-alias-accent: var(--o-ui-purple-6); + --o-ui-icon-alias-accent-hover: var(--o-ui-purple-2); + --o-ui-icon-alias-accent-active: var(--o-ui-purple-2); + --o-ui-icon-alias-alert: var(--o-ui-alert-4); + --o-ui-icon-alias-alert-hover: var(--o-ui-alert-8); + --o-ui-icon-alias-warning: var(--o-ui-warning-3); + --o-ui-icon-alias-success: var(--o-ui-success-5); + --o-ui-icon-alias-static-white: var(--o-ui-white); + --o-ui-icon-alias-input-placeholder: var(--o-ui-neutral-3); + --o-ui-text-alias-primary: var(--o-ui-white); + --o-ui-text-alias-primary-hover: var(--o-ui-white); + --o-ui-text-alias-secondary: var(--o-ui-neutral-1); + --o-ui-text-alias-tertiary: var(--o-ui-neutral-2); + --o-ui-text-alias-faint: var(--o-ui-neutral-3); + --o-ui-text-alias-accent: var(--o-ui-purple-6); + --o-ui-text-alias-accent-hover: var(--o-ui-purple-2); + --o-ui-text-alias-accent-active: var(--o-ui-purple-2); + --o-ui-text-alias-alert: var(--o-ui-alert-6); + --o-ui-text-alias-warning: var(--o-ui-warning-3); + --o-ui-text-alias-success: var(--o-ui-success-5); + --o-ui-text-alias-static-white: var(--o-ui-white); + --o-ui-text-alias-input-placeholder: var(--o-ui-neutral-3); + --o-ui-focus-ring-color-alias-default: rgba(53, 144, 221, .35); +} diff --git a/packages/components/src/styling/src/theming/sharegateTheme.ts b/packages/components/src/styling/src/theming/sharegateTheme.ts deleted file mode 100644 index 311ca5356..000000000 --- a/packages/components/src/styling/src/theming/sharegateTheme.ts +++ /dev/null @@ -1,236 +0,0 @@ -import { createTheme } from "./createTheme"; - -export const ShareGateTheme = createTheme({ - name: "sharegate", - colors: { - white: "#fff", - black: "#000", - gray: "#f9f9f9", - accent: [ - "#eef3fd", - "#dbe6fd", - "#b6c2ef", - "#95a9f5", - "#7689fd", - "#5D65f6", - "#4B11fd", - "#362aae", - "#1f2151", - "#0d0f1f" - ], - light: { - // Background - "bg-alias-body": "$gray", - "bg-alias-surface": "$white", - "bg-alias-soft-break": "$gray", - "bg-alias-mid-break": "$neutral-1", - "bg-alias-hard-break": "$neutral-3", - "bg-alias-basic": "$neutral-8", - "bg-alias-basic-hover": "$neutral-9", - "bg-alias-basic-active": "$neutral-10", - "bg-alias-basic-transparent": "$transparent", - "bg-alias-basic-transparent-hover": "$neutral-2", - "bg-alias-basic-transparent-active": "$neutral-3", - "bg-alias-static-white": "$white", - "bg-alias-grey-hover": "$neutral-1", - "bg-alias-grey-active": "$neutral-3", - "bg-alias-accent": "$purple-6", - "bg-alias-accent-hover": "$purple-8", - "bg-alias-accent-active": "$purple-9", - "bg-alias-accent-faint": "$purple-1", - "bg-alias-accent-light": "$purple-2", - "bg-alias-accent-transparent": "$transparent", - "bg-alias-accent-transparent-hover": "$purple-1", - "bg-alias-accent-transparent-active": "$purple-2", - "bg-alias-alert": "$alert-6", - "bg-alias-alert-hover": "$alert-8", - "bg-alias-alert-active": "$alert-9", - "bg-alias-alert-faint": "$alert-1", - "bg-alias-alert-light": "$alert-2", - "bg-alias-alert-transparent": "$transparent", - "bg-alias-alert-transparent-hover": "$alert-1", - "bg-alias-alert-transparent-active": "$alert-2", - "bg-alias-warning": "$warning-3", - "bg-alias-warning-hover": "$warning-8", - "bg-alias-warning-active": "$warning-9", - "bg-alias-warning-faint": "$warning-1", - "bg-alias-warning-light": "$warning-2", - "bg-alias-success": "$success-6", - "bg-alias-success-hover": "$success-8", - "bg-alias-success-active": "$success-9", - "bg-alias-success-faint": "$success-1", - "bg-alias-success-light": "$success-2", - "bg-alias-transparent": "transparent", - "bg-alias-input-selection": "$accent-3", - "bg-alias-underlay": "rgba(31, 33, 81, 0.5)", - // Border - "b-alias-low-break": "$neutral-2", - "b-alias-mid-break": "$neutral-4", - "b-alias-high-break": "$neutral-6", - "b-alias-accent-active": "$purple-6", - "b-alias-alert": "$alert-6", - "b-alias-alert-hover": "$alert-7", - "b-alias-alert-active": "$alert-8", - "b-alias-warning": "$warning-4", - "b-alias-warning-hover": "$warning-8", - "b-alias-warning-active": "$warning-9", - "b-alias-success": "$success-4", - "b-alias-success-hover": "$success-8", - "b-alias-success-active": "$success-9", - // Icon - "icon-alias-primary": "$neutral-10", - "icon-alias-primary-hover": "$black", - "icon-alias-secondary": "$neutral-8", - "icon-alias-tertiary": "$neutral-6", - "icon-alias-faint": "$neutral-5", - "icon-alias-accent": "$purple-6", - "icon-alias-accent-hover": "$purple-8", - "icon-alias-accent-active": "$purple-8", - "icon-alias-alert": "$alert-6", - "icon-alias-alert-hover": "$alert-8", - "icon-alias-warning": "$warning-5", - "icon-alias-success": "$success-6", - "icon-alias-static-white": "$white", - "icon-alias-input-placeholder": "$neutral-4", - // Text - "text-alias-primary": "$neutral-10", - "text-alias-primary-hover": "$black", - "text-alias-secondary": "$neutral-8", - "text-alias-tertiary": "$neutral-6", - "text-alias-faint": "$neutral-5", - "text-alias-accent": "$purple-6", - "text-alias-accent-hover": "$purple-8", - "text-alias-accent-active": "$purple-8", - "text-alias-alert": "$alert-7", - "text-alias-warning": "$warning-5", - "text-alias-success": "$success-6", - "text-alias-static-white": "$white", - "text-alias-input-placeholder": "$neutral-4", - // Focus - "focus-ring-color-alias-default": "rgba(31, 115, 183, .35)" - }, - dark: { - // Background - "bg-alias-body": "$neutral-10", - "bg-alias-surface": "$neutral-9", - "bg-alias-soft-break": "$neutral-10", - "bg-alias-mid-break": "$neutral-8", - "bg-alias-hard-break": "$neutral-6", - "bg-alias-basic": "$neutral-5", - "bg-alias-basic-hover": "$neutral-6", - "bg-alias-basic-active": "$neutral-7", - "bg-alias-basic-transparent": "$transparent", - "bg-alias-basic-transparent-hover": "$neutral-7", - "bg-alias-basic-transparent-active": "$neutral-8", - "bg-alias-static-white": "$white", - "bg-alias-grey-hover": "$neutral-6", - "bg-alias-grey-active": "$neutral-7", - "bg-alias-accent": "$purple-6", - "bg-alias-accent-hover": "$purple-8", - "bg-alias-accent-active": "$purple-9", - "bg-alias-accent-faint": "$purple-9", - "bg-alias-accent-transparent": "$transparent", - "bg-alias-accent-transparent-hover": "$purple-9", - "bg-alias-accent-transparent-active": "$purple-9", - "bg-alias-accent-light": "$purple-8", - "bg-alias-alert": "$alert-6", - "bg-alias-alert-hover": "$alert-8", - "bg-alias-alert-active": "$alert-9", - "bg-alias-alert-faint": "$alert-9", - "bg-alias-alert-light": "$alert-8", - "bg-alias-alert-transparent": "$transparent", - "bg-alias-alert-transparent-hover": "$alert-8", - "bg-alias-alert-transparent-active": "$alert-9", - "bg-alias-warning": "$warning-3", - "bg-alias-warning-hover": "$warning-8", - "bg-alias-warning-active": "$warning-9", - "bg-alias-warning-faint": "$warning-8", - "bg-alias-warning-light": "$warning-7", - "bg-alias-success": "$success-6", - "bg-alias-success-hover": "$success-8", - "bg-alias-success-active": "$success-9", - "bg-alias-success-faint": "$success-9", - "bg-alias-success-light": "$success-8", - "bg-alias-transparent": "transparent", - "bg-alias-input-selection": "$accent-5", - "bg-alias-underlay": "rgba(31, 33, 81, 0.5)", - // Border - "b-alias-low-break": "$neutral-8", - "b-alias-mid-break": "$neutral-7", - "b-alias-high-break": "$neutral-5", - "b-alias-accent-active": "$purple-8", - "b-alias-alert": "$alert-6", - "b-alias-alert-hover": "$alert-7", - "b-alias-alert-active": "$alert-8", - "b-alias-warning": "$warning-5", - "b-alias-warning-hover": "$warning-7", - "b-alias-warning-active": "$warning-8", - "b-alias-success": "$success-6", - "b-alias-success-hover": "$success-7", - "b-alias-success-active": "$success-8", - // Icon - "icon-alias-primary": "$white", - "icon-alias-primary-hover": "$white", - "icon-alias-secondary": "$neutral-1", - "icon-alias-tertiary": "$neutral-2", - "icon-alias-faint": "$neutral-3", - "icon-alias-accent": "$purple-6", - "icon-alias-accent-hover": "$purple-2", - "icon-alias-accent-active": "$purple-2", - "icon-alias-alert": "$alert-4", - "icon-alias-alert-hover": "$alert-8", - "icon-alias-warning": "$warning-3", - "icon-alias-success": "$success-5", - "icon-alias-static-white": "$white", - "icon-alias-input-placeholder": "$neutral-3", - // Text - "text-alias-primary": "$white", - "text-alias-primary-hover": "$white", - "text-alias-secondary": "$neutral-1", - "text-alias-tertiary": "$neutral-2", - "text-alias-faint": "$neutral-3", - "text-alias-accent": "$purple-6", - "text-alias-accent-hover": "$purple-2", - "text-alias-accent-active": "$purple-2", - "text-alias-alert": "$alert-6", - "text-alias-warning": "$warning-3", - "text-alias-success": "$success-5", - "text-alias-static-white": "$white", - "text-alias-input-placeholder": "$neutral-3", - // Focus - "focus-ring-color-alias-default": "rgba(53, 144, 221, .35)" - } - }, - boxShadows: { - common: { - "alias-lifted": "$bs-1", - "alias-floating": "$bs-2" - }, - light: [ ` - 0 0 0 1px rgba(93, 101, 246, 0.05), - 0px 5px 10px rgba(93, 101, 246, 0.1) - `, ` - 0 0 0 1px rgba(93, 101, 246, 0.05), - 0px 0.1px 0.3px rgba(93, 101, 246, 0.022), - 0px 0.3px 0.7px rgba(93, 101, 246, 0.032), - 0px 0.6px 1.3px rgba(93, 101, 246, 0.04), - 0px 1.1px 2.2px rgba(93, 101, 246, 0.048), - 0px 2.1px 4.2px rgba(93, 101, 246, 0.058), - 0px 5px 10px rgba(93, 101, 246, 0.08); - ` - ], - dark: [ ` - 0 0 0 1px rgba(93, 101, 246, 0.15), - 0px 5px 10px rgba(93, 101, 246, 0.1) - `, ` - 0 0 0 1px rgba(93, 101, 246, 0.15), - 0px 0.1px 0.3px rgba(93, 101, 246, 0.022), - 0px 0.3px 0.7px rgba(93, 101, 246, 0.032), - 0px 0.6px 1.3px rgba(93, 101, 246, 0.04), - 0px 1.1px 2.2px rgba(93, 101, 246, 0.048), - 0px 2.1px 4.2px rgba(93, 101, 246, 0.058), - 0px 5px 10px rgba(93, 101, 246, 0.08); - ` - ] - } -}); diff --git a/packages/components/src/styling/src/theming/themeAccessor.ts b/packages/components/src/styling/src/theming/themeAccessor.ts deleted file mode 100644 index 4a77dc3ad..000000000 --- a/packages/components/src/styling/src/theming/themeAccessor.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { BoxShadowColorSchemes, ColorColorSchemes, ColorSchemeSection, FontSizeValues, OrbiterTheme } from "./orbiterTheme"; -import { isNil } from "../../../shared"; - -export class ThemeAccessor { - private theme; - - constructor(theme: OrbiterTheme) { - this.theme = theme; - } - - private getColorSchemeValue(values: ColorSchemeSection, key: string, colorScheme: keyof ColorSchemeSection) { - let section = values[colorScheme]; - - if (!isNil(section)) { - return section[key]; - } - - // Look in "common" if available. - section = values.common; - - if (!isNil(section)) { - return section[key]; - } - } - - getName() { - return !isNil(this.theme) ? this.theme.name : ""; - } - - getSpace(index: number): string { - return !isNil(this.theme) ? this.theme.space[index - 1] : ""; - } - - getSizing(index: number): string { - return !isNil(this.theme) ? this.theme.sizing[index - 1] : ""; - } - - getFontSize(key: keyof FontSizeValues): string { - return !isNil(this.theme) ? this.theme.fontSizes[key] : ""; - } - - getLineHeight(index: number): number { - return !isNil(this.theme) ? this.theme.lineHeights[index - 1] : 0; - } - - getBorderRadius(index: number): string { - return !isNil(this.theme) ? this.theme.borderRadii[index - 1] : ""; - } - - getBoxShadow(key: string, colorScheme: keyof BoxShadowColorSchemes = "light"): string { - return !isNil(this.theme) ? this.getColorSchemeValue(this.theme.boxShadows, key, colorScheme) : ""; - } - - getColor(key: string, colorScheme: keyof ColorColorSchemes = "light"): string { - return !isNil(this.theme) ? this.getColorSchemeValue(this.theme.colors, key, colorScheme) : ""; - } -} diff --git a/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx b/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx index 27c04495a..a2f60f224 100644 --- a/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx +++ b/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx @@ -1,4 +1,4 @@ -import { ShareGateTheme, ThemeProvider, useColorSchemeContext } from "@components/styling"; +import { ThemeProvider, useColorSchemeContext } from "@components/styling"; import { Box } from "@components/box"; import { Inline } from "@components/layout"; @@ -37,7 +37,7 @@ function PrimaryColors() { export const Sharegate: ThemeProviderStory = { storyName: "sharegate", render: () => ( - + ) @@ -46,7 +46,7 @@ export const Sharegate: ThemeProviderStory = { export const Light: ThemeProviderStory = { storyName: "light", render: () => ( - + ) @@ -55,7 +55,7 @@ export const Light: ThemeProviderStory = { export const Dark: ThemeProviderStory = { storyName: "dark", render: () => ( - + ) @@ -74,7 +74,7 @@ const SwitchColorScheme = () => { export const SetColorSchemeWithApi: ThemeProviderStory = { storyName: "set color scheme with api", render: () => ( - + diff --git a/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx b/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx index d6d2d6454..444a32c7d 100644 --- a/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx +++ b/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx @@ -7,7 +7,6 @@ import { FontWeightMapping, IconColorMapping, LineHeightMapping, - ShareGateTheme, SizingMapping, SpacingMapping, ThemeProvider @@ -51,7 +50,7 @@ export const BackgroundColor: ShareGateStory = { {Object.keys(BackgroundColorMapping).map(x => )} - + {Object.keys(BackgroundColorMapping).map(x => )} @@ -67,7 +66,7 @@ export const Border: ShareGateStory = { {Object.keys(BorderMapping).map(x => )} - + {Object.keys(BorderMapping).map(x => )} @@ -92,7 +91,7 @@ export const Color: ShareGateStory = { {Object.keys(ColorMapping).map(x => T)} - + {Object.keys(ColorMapping).map(x => T)} @@ -108,7 +107,7 @@ export const IconColors: ShareGateStory = { {Object.keys(IconColorMapping).map(x => )} - + {Object.keys(IconColorMapping).map(x => )} diff --git a/packages/components/src/tooltip/src/TooltipTrigger.tsx b/packages/components/src/tooltip/src/TooltipTrigger.tsx index 67eec83b9..cfd9aa8e1 100644 --- a/packages/components/src/tooltip/src/TooltipTrigger.tsx +++ b/packages/components/src/tooltip/src/TooltipTrigger.tsx @@ -14,7 +14,7 @@ import { useFocusScope } from "../../shared"; import { Overlay, OverlayArrow, OverlayPositionProp, isTargetParent, useOverlayPosition, useOverlayTrigger, useOverlayLightDismiss } from "../../overlay"; -import { useResponsiveValue, useThemeContext } from "../../styling"; +import { useResponsiveValue } from "../../styling"; import { Div } from "../../html"; import { TooltipTriggerContext } from "./TooltipTriggerContext"; @@ -94,8 +94,6 @@ export function InnerTooltipTrigger({ }: InnerTooltipTriggerProps) { const positionValue = useResponsiveValue(positionProp); - const { themeAccessor } = useThemeContext(); - const [isOpen, setIsOpen] = useControllableState(open, defaultOpen, false); const updateIsOpen = useCallback((event: SyntheticEvent, newValue: boolean) => { @@ -194,7 +192,7 @@ export function InnerTooltipTrigger({ rest, { as, - borderOffset: themeAccessor.getSpace(3), + borderOffset: "12px", ref: overlayRef, show: isOpen, zIndex diff --git a/tooling/test-utils/renderWithTheme.tsx b/tooling/test-utils/renderWithTheme.tsx index bddf74f43..ebd32cd35 100644 --- a/tooling/test-utils/renderWithTheme.tsx +++ b/tooling/test-utils/renderWithTheme.tsx @@ -1,4 +1,4 @@ -import { ShareGateTheme, ThemeProvider, ColorScheme } from "@components/styling"; +import { ThemeProvider, ColorScheme } from "@components/styling"; import { ReactElement, ReactNode } from "react"; import { RenderHookOptions, renderHook, render, RenderOptions } from "@testing-library/react"; @@ -9,7 +9,7 @@ export interface ThemeProviderWrapperOptions { function createThemeProviderWrapper({ colorScheme = "light" }: ThemeProviderWrapperOptions = {}) { return ({ children }: { children?: ReactNode }) => { return ( - + {children} );