From 289f73f52625f74c0a19e37216dafecd43f8b8e2 Mon Sep 17 00:00:00 2001 From: Jamie Henson Date: Mon, 18 Nov 2024 22:17:53 +0000 Subject: [PATCH] feat: use Tailwind theming prefixes over custom approach --- scripts/compute-colors.ts | 81 - .../ContactFooter.stories.tsx.snap | 6 +- .../__snapshots__/Expander.stories.tsx.snap | 2 +- src/core/FeaturedLink.tsx | 4 +- .../FeaturedLink.stories.tsx.snap | 10 +- .../__snapshots__/Footer.stories.tsx.snap | 12 +- src/core/Icon.tsx | 101 +- src/core/Icon/EncapsulatedIcon.tsx | 12 +- src/core/Icon/Icon.stories.tsx | 66 +- .../Icon/__snapshots__/Icon.stories.tsx.snap | 1633 +++++++---------- src/core/Pricing/PricingCards.stories.tsx | 11 +- src/core/Pricing/PricingCards.tsx | 95 +- src/core/Pricing/data.tsx | 42 +- src/core/Pricing/types.ts | 6 +- src/core/ProductTile.tsx | 61 +- src/core/ProductTile/ProductTile.stories.tsx | 2 +- .../ProductTile.stories.tsx.snap | 206 +-- .../__snapshots__/Slider.stories.tsx.snap | 42 +- .../__snapshots__/Table.stories.tsx.snap | 30 +- src/core/Tooltip.tsx | 16 +- .../__snapshots__/Tooltip.stories.tsx.snap | 24 +- src/core/hooks/useTheming.tsx | 25 - .../__snapshots__/Button.stories.tsx.snap | 18 +- .../__snapshots__/Forms.stories.tsx.snap | 4 +- src/core/styles/colors/Colors.stories.tsx | 43 +- .../__snapshots__/Colors.stories.tsx.snap | 543 +++--- src/core/styles/colors/types.ts | 10 +- tailwind.config.js | 1 + 28 files changed, 1360 insertions(+), 1746 deletions(-) delete mode 100644 scripts/compute-colors.ts delete mode 100644 src/core/hooks/useTheming.tsx diff --git a/scripts/compute-colors.ts b/scripts/compute-colors.ts deleted file mode 100644 index 95e8a2511..000000000 --- a/scripts/compute-colors.ts +++ /dev/null @@ -1,81 +0,0 @@ -import fs from "fs"; -import path from "path"; -import { invertTailwindClassVariant } from "../src/core/styles/colors/utils"; -import { colors, prefixes, variants } from "../src/core/styles/colors/types"; - -const directoryPath = path.join(__dirname, "../src"); -const outputPath = path.join( - __dirname, - "../src/core/styles/colors", - "computed-colors.json", -); - -const joinedVariants = variants.join("|"); -const joinedPrefixes = prefixes.join("|"); -const joinedColors = colors.join("|"); -const pattern = `themeColor\\("((?:${joinedVariants}-)(${joinedPrefixes})-(${joinedColors})-(000|[1-9]00|1[0-3]00))"\\)`; -const regex = new RegExp(pattern, "g"); - -const findStringInFiles = (dir: string) => { - const results: string[] = []; - - const readDirectory = (dir: string) => { - let files: string[]; - try { - files = fs.readdirSync(dir); - } catch (error) { - console.error(`Error reading directory ${dir}:`, error); - return; - } - - files.forEach((file) => { - const filePath = path.join(dir, file); - let stat; - try { - stat = fs.statSync(filePath); - } catch (error) { - console.error(`Error accessing ${filePath}:`, error); - return; - } - - if (stat.isDirectory()) { - readDirectory(filePath); - } else if (filePath.endsWith(".tsx")) { - let content = ""; - try { - content = fs.readFileSync(filePath, "utf-8"); - const matches = [...content.matchAll(regex)].map((match) => match[1]); - - if (matches.length > 0) { - results.push(...matches); - } - } catch (error) { - console.error(`Error reading file ${filePath}:`, error); - return; - } - } - }); - }; - - readDirectory(dir); - return Array.from(new Set(results)).sort(); -}; - -const matches = findStringInFiles(directoryPath); - -const flippedMatches = matches.map((match) => - invertTailwindClassVariant(match), -); - -try { - const outputDir = path.dirname(outputPath); - if (!fs.existsSync(outputDir)) { - fs.mkdirSync(outputDir, { recursive: true }); - } - fs.writeFileSync(outputPath, JSON.stringify(flippedMatches)); - console.log( - `🎨 Tailwind theme classes have been computed and written to JSON files.`, - ); -} catch (error) { - console.error(`Error persisting computed colors:`, error); -} diff --git a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap index 9678682c5..82458df10 100644 --- a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap +++ b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap @@ -6,7 +6,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = ` >
- @@ -31,7 +31,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = `
- @@ -58,7 +58,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = `
- diff --git a/src/core/Expander/__snapshots__/Expander.stories.tsx.snap b/src/core/Expander/__snapshots__/Expander.stories.tsx.snap index 4e68d52d9..673fc874d 100644 --- a/src/core/Expander/__snapshots__/Expander.stories.tsx.snap +++ b/src/core/Expander/__snapshots__/Expander.stories.tsx.snap @@ -311,7 +311,7 @@ exports[`JS Components/Expander OverriddenControls play-test 1`] = ` > Away with you, knave. - diff --git a/src/core/FeaturedLink.tsx b/src/core/FeaturedLink.tsx index a3c946ba2..8ca468985 100644 --- a/src/core/FeaturedLink.tsx +++ b/src/core/FeaturedLink.tsx @@ -1,13 +1,13 @@ import React, { CSSProperties, ReactNode } from "react"; import Icon from "./Icon"; -import { ColorClass } from "./styles/colors/types"; +import { ColorClass, ColorThemeSet } from "./styles/colors/types"; type FeaturedLinkProps = { url: string; children: ReactNode; textSize?: string; - iconColor?: ColorClass; + iconColor?: ColorClass | ColorThemeSet; flush?: boolean; reverse?: boolean; additionalCSS?: string; diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap index fd12cdfdd..aae203bdb 100644 --- a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap +++ b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap @@ -6,7 +6,7 @@ exports[`JS Components/Featured Link Default smoke-test 1`] = ` style="--featured-link-icon-size: var(--fs-p2);" > Featured link - @@ -21,7 +21,7 @@ exports[`JS Components/Featured Link Disabled smoke-test 1`] = ` style="--featured-link-icon-size: var(--fs-p2);" > Featured link - @@ -36,7 +36,7 @@ exports[`JS Components/Featured Link Large smoke-test 1`] = ` style="--featured-link-icon-size: var(--fs-p1);" > Featured link - @@ -65,7 +65,7 @@ exports[`JS Components/Featured Link Reverse smoke-test 1`] = ` class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 " style="--featured-link-icon-size: var(--fs-p2);" > - @@ -81,7 +81,7 @@ exports[`JS Components/Featured Link Small smoke-test 1`] = ` style="--featured-link-icon-size: var(--fs-p3);" > Featured link - diff --git a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap index 0b6c5f6fd..91fcadf5f 100644 --- a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap +++ b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap @@ -312,7 +312,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = ` href="https://twitter.com/ablyrealtime" title="Ably on X" > - @@ -323,7 +323,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = ` href="https://www.linkedin.com/company/ably-realtime" title="Ably on LinkedIn" > - @@ -334,7 +334,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = ` href="https://github.com/ably/" title="Ably on Github" > - @@ -345,7 +345,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = ` href="https://discord.gg/jwBPhEZ9g5" title="Ably on Discord" > - @@ -360,7 +360,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = ` class="h-24 text-cool-black hover:text-icon-glassdoor" title="Ably reviews on glassdoor" > - @@ -388,7 +388,7 @@ exports[`JS Components/Footer Default smoke-test 1`] = ` href="https://www.glassdoor.co.uk/Overview/Working-at-Ably-EI_IE2184188.11,15.htm" title="Ably reviews on glassdoor" > - diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx index 7bc8f1592..885415d3e 100644 --- a/src/core/Icon.tsx +++ b/src/core/Icon.tsx @@ -1,14 +1,16 @@ -import React, { CSSProperties } from "react"; +import React, { CSSProperties, useCallback } from "react"; +import clsx from "clsx"; + import { defaultIconSecondaryColor } from "./Icon/secondary-colors"; import { IconName, IconSize } from "./Icon/types"; -import { ColorClass } from "./styles/colors/types"; +import { ColorClass, ColorThemeSet } from "./styles/colors/types"; import { convertTailwindClassToVar } from "./styles/colors/utils"; export type IconProps = { name: IconName; size?: IconSize; - color?: ColorClass; - secondaryColor?: ColorClass; + color?: ColorClass | ColorThemeSet; + secondaryColor?: ColorClass | ColorThemeSet; additionalCSS?: string; }; @@ -16,26 +18,79 @@ const Icon = ({ name, size = "0.75rem", color, - secondaryColor = defaultIconSecondaryColor(name), + secondaryColor, additionalCSS = "", ...additionalAttributes -}: IconProps) => ( - - - -); +}: IconProps) => { + const [lightSecondaryColor, darkSecondaryColor] = ( + secondaryColor ?? "" + ).split(" dark:") as [ColorClass, ColorClass | undefined]; + + const iconSvg = useCallback( + (secondaryColor?: ColorClass, isThemed?: boolean) => { + let secondaryColorValue; + if (secondaryColor) { + secondaryColorValue = convertTailwindClassToVar(secondaryColor); + } else if (defaultIconSecondaryColor(name)) { + secondaryColorValue = convertTailwindClassToVar( + defaultIconSecondaryColor(name), + ); + } + + return ( + + + + ); + }, + [ + name, + size, + color, + additionalCSS, + additionalAttributes, + lightSecondaryColor, + darkSecondaryColor, + ], + ); + + if (secondaryColor) { + return ( + <> + {iconSvg(lightSecondaryColor, !!darkSecondaryColor)} + {darkSecondaryColor ? iconSvg(darkSecondaryColor) : null} + + ); + } else { + return iconSvg(); + } +}; export default Icon; diff --git a/src/core/Icon/EncapsulatedIcon.tsx b/src/core/Icon/EncapsulatedIcon.tsx index 0e2b7976c..9f55f6565 100644 --- a/src/core/Icon/EncapsulatedIcon.tsx +++ b/src/core/Icon/EncapsulatedIcon.tsx @@ -1,11 +1,8 @@ import React from "react"; import Icon, { IconProps } from "../Icon"; -import useTheming from "../hooks/useTheming"; -import { Theme } from "../styles/colors/types"; import { IconSize } from "./types"; type EncapsulatedIconProps = { - theme?: Theme; className?: string; innerClassName?: string; iconSize?: IconSize; @@ -15,17 +12,12 @@ const ICON_SIZE_REDUCTION = 12; const ICON_HEIGHT_REDUCTION = 2; const EncapsulatedIcon = ({ - theme = "dark", size = "40px", iconSize, className, innerClassName, ...iconProps }: EncapsulatedIconProps) => { - const { themeColor } = useTheming({ - baseTheme: "dark", - theme, - }); let computedIconSize = size, computedIconHeight = size; @@ -43,11 +35,11 @@ const EncapsulatedIcon = ({ return (
diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx index dbd454ad0..a7daad380 100644 --- a/src/core/Icon/Icon.stories.tsx +++ b/src/core/Icon/Icon.stories.tsx @@ -3,7 +3,6 @@ import Icon from "../Icon"; import EncapsulatedIcon from "./EncapsulatedIcon"; import loadIcons from "../icons"; import { IconName, iconNames } from "./types"; -import { Theme } from "../styles/colors/types"; export default { title: "JS Components/Icon", @@ -14,25 +13,23 @@ export default { tags: ["autodocs"], }; -const renderIcons = ( - iconSet: IconName[], - encapsulated?: boolean, - theme?: Theme, -) => { +const renderIcons = (iconSet: IconName[], encapsulated?: boolean) => { loadIcons(); return (
{iconSet.map((icon) => (
- {icon} + + {icon} +
{encapsulated ? ( - + ) : ( renderIcons([...iconNames.product]), }; -export const DarkEncapsulatedIcons = { +export const EncapsulatedIcons = { render: () => renderIcons([...iconNames.product], true), }; -export const LightEncapsulatedIcons = { - render: () => renderIcons([...iconNames.product], true, "light"), -}; - export const OtherIcons = { render: () => renderIcons([...iconNames.other]), }; @@ -84,24 +77,45 @@ export const OtherIcons = { export const IconWithSecondaryColor = { render: () => (
- - +
+

+ Non-themed: +

+ + +
+
+

+ Themed: +

+ + +
), parameters: { docs: { description: { story: - "By setting the `secondaryColor` prop, you can change the color of the icon's secondary elements, if supported in the underlying SVG. You can set either a CSS variable directly, or use a Tailwind class.\n\nThe right-hand icon here (`icon-gui-check-circled-fill`) has this property applied, resulting in it having a dark checkmark.\n\nTo add support to an existing SVG, replace a `fill` attribute value with `var(--ui-icon-secondary-color)`.", + "By setting the `secondaryColor` prop, you can change the color of the icon's secondary elements, if supported in the underlying SVG. You can set either a CSS variable directly, or use a Tailwind class.\n\nThe right-hand icon here (`icon-gui-check-circled-fill`) has this property applied, resulting in it having a dark checkmark in the non-themed case, and inverted colors in the themed case.\n\nTo add support to an existing SVG, replace a `fill` attribute value with `var(--ui-icon-secondary-color)`.", }, }, }, diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap index 08789e47e..0a1e7b45d 100644 --- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap +++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap @@ -1,290 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = ` -
-
- - icon-product-asset-tracking-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-asset-tracking - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-chat-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-chat - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-liveobjects - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-livesync-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-livesync - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-platform-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-pubsub-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-pubsub - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-spaces-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-spaces - -
-
-
-
- - - - -
-
-
-
-
-
-`; - exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-48hrs
@@ -298,8 +17,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-ably-channels
@@ -313,8 +32,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-about-ably-col
@@ -328,8 +47,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-api-keys
@@ -343,8 +62,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-api
@@ -358,8 +77,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-architectural-guidance
@@ -373,8 +92,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-asset-tracking-col
@@ -388,8 +107,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-authentication
@@ -403,8 +122,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-avatar-stack
@@ -418,8 +137,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-browser
@@ -433,8 +152,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-calendar
@@ -448,8 +167,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-call-mobile
@@ -463,8 +182,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-careers-col
@@ -478,8 +197,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-case-studies-col
@@ -493,8 +212,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-chat-col
@@ -508,8 +227,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-chat-mono
@@ -523,8 +242,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-chat-stack-col
@@ -538,8 +257,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-chat-stack
@@ -553,8 +272,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-cloud-servers
@@ -568,8 +287,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-compare-tech-col
@@ -583,8 +302,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-connection-state-recovery
@@ -598,8 +317,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-consumer-groups
@@ -613,8 +332,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-custom-cname
@@ -628,8 +347,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-custom
@@ -643,8 +362,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-customers-col
@@ -658,8 +377,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-data-broadcast-col
@@ -673,8 +392,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-data-broadcast-mono
@@ -688,8 +407,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-data-synchronization-col
@@ -703,8 +422,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-dedicated-cluster
@@ -718,8 +437,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-deltas
@@ -733,8 +452,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-docs-col
@@ -748,8 +467,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-documentation
@@ -763,8 +482,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-dynamic-channel-groups
@@ -778,8 +497,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-edge-network
@@ -793,8 +512,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-elasticity
@@ -808,8 +527,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-equalisers-mono
@@ -823,8 +542,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-events-col
@@ -838,8 +557,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-exactly-once-delivery
@@ -853,8 +572,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-examples-col
@@ -868,8 +587,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-fan-out
@@ -883,8 +602,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-firehose
@@ -898,8 +617,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-gdpr
@@ -913,8 +632,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-general-comms
@@ -928,8 +647,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-granular-permissions
@@ -943,8 +662,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-hipaa-mono
@@ -958,8 +677,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-hipaa
@@ -973,8 +692,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-history
@@ -988,8 +707,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-integrations-col
@@ -1003,8 +722,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-integrations
@@ -1018,8 +737,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-it-support-access
@@ -1033,8 +752,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-it-support-helpdesk
@@ -1048,8 +767,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-kafka-at-the-edge-col
@@ -1063,8 +782,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-laptop
@@ -1078,8 +797,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-lightbulb-col
@@ -1093,8 +812,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-live-chat
@@ -1108,8 +827,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-live-updates-results-metrics-col
@@ -1123,8 +842,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-map-pin
@@ -1138,8 +857,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-message-batching
@@ -1153,8 +872,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-message-persistence
@@ -1168,8 +887,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-message-queues
@@ -1183,8 +902,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-message
@@ -1198,8 +917,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-multi-user-spaces-col
@@ -1213,8 +932,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-observe-analytics
@@ -1228,8 +947,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-padlock-closed
@@ -1243,8 +962,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-platform
@@ -1258,8 +977,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-play
@@ -1273,8 +992,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-premium-support
@@ -1288,8 +1007,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-privacy-shield-framework
@@ -1303,8 +1022,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-private-link
@@ -1318,8 +1037,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-push-notifications-col
@@ -1333,8 +1052,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-push-notifications-mono
@@ -1348,8 +1067,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-push-notifications
@@ -1363,8 +1082,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-quickstart-guides-col
@@ -1378,8 +1097,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-resources-col
@@ -1393,8 +1112,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-rewind
@@ -1408,8 +1127,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-sdks-col
@@ -1423,8 +1142,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-send-received-messages
@@ -1438,8 +1157,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-servers
@@ -1453,8 +1172,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-shopping-cart
@@ -1468,8 +1187,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-sla
@@ -1483,8 +1202,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-soc2-type2-mono
@@ -1498,8 +1217,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-soc2-type2
@@ -1513,8 +1232,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-subscription-filters
@@ -1528,8 +1247,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-support-chat-mono
@@ -1543,8 +1262,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-system-metadata
@@ -1558,8 +1277,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-tech-account-comms
@@ -1573,8 +1292,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-tutorials-demos-col
@@ -1588,8 +1307,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-virtual-events-col
@@ -1603,8 +1322,8 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
-
- +
+ icon-display-virtual-events
@@ -1621,41 +1340,322 @@ exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
`; -exports[`JS Components/Icon GUIIcons smoke-test 1`] = ` +exports[`JS Components/Icon EncapsulatedIcons smoke-test 1`] = `
-
- - icon-gui-ably-badge +
+ + icon-product-asset-tracking-mono
- - - - +
+ + + + +
+
-
- - icon-gui-arrow-bidirectional-horizontal +
+ + icon-product-asset-tracking
- - - - +
+ + + + +
+
-
- - icon-gui-arrow-bidirectional-vertical +
+ + icon-product-chat-mono + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-chat + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-liveobjects + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-livesync-mono + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-livesync + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-platform-mono + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-pubsub-mono + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-pubsub + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-spaces-mono + +
+
+
+
+ + + + +
+
+
+
+
+
+ + icon-product-spaces + +
+
+
+
+ + + + +
+
+
+
+
+
+`; + +exports[`JS Components/Icon GUIIcons smoke-test 1`] = ` +
+
+ + icon-gui-ably-badge + +
+
+ + + + +
+
+
+
+ + icon-gui-arrow-bidirectional-horizontal + +
+
+ + + + +
+
+
+
+ + icon-gui-arrow-bidirectional-vertical
@@ -1668,8 +1668,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-arrow-down
@@ -1683,8 +1683,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-arrow-left
@@ -1698,8 +1698,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-arrow-right
@@ -1713,8 +1713,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-arrow-up
@@ -1728,8 +1728,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-burger-menu
@@ -1743,8 +1743,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-check-circled-fill-black
@@ -1758,8 +1758,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-check-circled-fill
@@ -1773,8 +1773,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-check-circled
@@ -1788,8 +1788,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-checklist-checked
@@ -1803,8 +1803,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-chevron-down
@@ -1818,8 +1818,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-chevron-up
@@ -1833,8 +1833,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-clock
@@ -1848,8 +1848,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-close
@@ -1863,8 +1863,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-copy
@@ -1878,8 +1878,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-cross-circled-fill
@@ -1893,8 +1893,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-cross-circled
@@ -1908,8 +1908,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-dash-circled
@@ -1923,8 +1923,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-disclosure-arrow
@@ -1938,8 +1938,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-document-generic
@@ -1953,8 +1953,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-enlarge
@@ -1968,8 +1968,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-external-link
@@ -1983,8 +1983,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-filter-flow-step-1
@@ -1998,8 +1998,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-filter-flow-step-2
@@ -2013,8 +2013,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-filter-flow-step-3
@@ -2028,8 +2028,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-hand
@@ -2043,8 +2043,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-history
@@ -2058,8 +2058,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-info
@@ -2073,8 +2073,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-link-arrow
@@ -2088,8 +2088,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-link
@@ -2103,8 +2103,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-live-chat
@@ -2118,8 +2118,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-minus
@@ -2133,8 +2133,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-partial
@@ -2148,8 +2148,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-plus
@@ -2163,8 +2163,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-quote-marks-solid
@@ -2178,8 +2178,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-refresh
@@ -2193,8 +2193,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-resources
@@ -2208,8 +2208,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-search
@@ -2223,8 +2223,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-tick
@@ -2238,8 +2238,8 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = `
-
- +
+ icon-gui-warning
@@ -2258,306 +2258,53 @@ exports[`JS Components/Icon GUIIcons smoke-test 1`] = ` exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
- - - - - - - - -
-`; - -exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = ` -
-
- - icon-product-asset-tracking-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-asset-tracking - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-chat-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-chat - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-liveobjects - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-livesync-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-livesync - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-platform-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-pubsub-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-pubsub - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-spaces-mono - -
-
-
-
- - - - -
-
-
-
-
-
- - icon-product-spaces - -
-
-
-
- - - - -
-
-
-
+
+

+ Non-themed: +

+ + + + + + + + +
+
+

+ Themed: +

+ + + + + + + + +
`; exports[`JS Components/Icon OtherIcons smoke-test 1`] = `
-
- +
+ icon-other-quote
@@ -2576,8 +2323,8 @@ exports[`JS Components/Icon OtherIcons smoke-test 1`] = ` exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-asset-tracking-mono
@@ -2591,8 +2338,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-asset-tracking
@@ -2606,8 +2353,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-chat-mono
@@ -2621,8 +2368,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-chat
@@ -2636,8 +2383,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-liveobjects
@@ -2651,8 +2398,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-livesync-mono
@@ -2666,8 +2413,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-livesync
@@ -2681,8 +2428,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-platform-mono
@@ -2696,8 +2443,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-pubsub-mono
@@ -2711,8 +2458,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-pubsub
@@ -2726,8 +2473,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-spaces-mono
@@ -2741,8 +2488,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-
- +
+ icon-product-spaces
@@ -2761,8 +2508,8 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = ` exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-discord
@@ -2776,8 +2523,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-facebook
@@ -2791,8 +2538,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-github
@@ -2806,8 +2553,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-glassdoor
@@ -2821,8 +2568,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-google
@@ -2836,8 +2583,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-linkedin
@@ -2851,8 +2598,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-stackoverflow
@@ -2866,8 +2613,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-twitter
@@ -2881,8 +2628,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-x
@@ -2896,8 +2643,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = `
-
- +
+ icon-social-youtube
@@ -2916,8 +2663,8 @@ exports[`JS Components/Icon SocialIcons smoke-test 1`] = ` exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-amqp10
@@ -2931,8 +2678,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-apache-kafka
@@ -2946,8 +2693,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-apachepulsar
@@ -2961,8 +2708,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-awskinesis
@@ -2976,8 +2723,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-awslambda
@@ -2991,8 +2738,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-awssqs
@@ -3006,8 +2753,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-azureservicebus
@@ -3021,8 +2768,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-cloudflareworkers
@@ -3036,8 +2783,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-csharp
@@ -3051,8 +2798,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-flutter
@@ -3066,8 +2813,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-gcloudfunctions
@@ -3081,8 +2828,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-go
@@ -3096,8 +2843,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-ifttt
@@ -3111,8 +2858,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-java
@@ -3126,8 +2873,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-javascript
@@ -3141,8 +2888,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-net
@@ -3156,8 +2903,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-objectivec
@@ -3171,8 +2918,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-php
@@ -3186,8 +2933,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-python
@@ -3201,8 +2948,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-react
@@ -3216,8 +2963,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-ruby
@@ -3231,8 +2978,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-swift
@@ -3246,8 +2993,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-terraform
@@ -3261,8 +3008,8 @@ exports[`JS Components/Icon TechIcons smoke-test 1`] = `
-
- +
+ icon-tech-zapier
diff --git a/src/core/Pricing/PricingCards.stories.tsx b/src/core/Pricing/PricingCards.stories.tsx index 31df67ac4..8407e95c5 100644 --- a/src/core/Pricing/PricingCards.stories.tsx +++ b/src/core/Pricing/PricingCards.stories.tsx @@ -18,14 +18,9 @@ export default { }; const Template = ({ data, delimiter }: PricingCardsProps) => ( - <> -
- -
-
- -
- +
+ +
); export const Plans = { diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx index 0a2cc963f..d9ebf4dba 100644 --- a/src/core/Pricing/PricingCards.tsx +++ b/src/core/Pricing/PricingCards.tsx @@ -1,38 +1,17 @@ import React, { Fragment, useEffect, useRef, useState } from "react"; import throttle from "lodash.throttle"; import type { PricingDataFeature } from "./types"; -import { ColorClass, Theme } from "../styles/colors/types"; import Icon from "../Icon"; import FeaturedLink from "../FeaturedLink"; import { IconName } from "../Icon/types"; import Tooltip from "../Tooltip"; -import useTheming from "../hooks/useTheming"; - -/** - Pricing hack to get all the themes loaded - - themeColor("text-orange-600") - themeColor("text-orange-1000") - themeColor("text-neutral-000") - themeColor("text-neutral-500") - themeColor("text-neutral-600") - themeColor("text-neutral-700") - themeColor("text-neutral-1000") - themeColor("text-blue-400") - themeColor("text-blue-800") - */ export type PricingCardsProps = { data: PricingDataFeature[]; - theme?: Theme; delimiter?: IconName | "blank"; }; -const PricingCards = ({ - data, - theme = "dark", - delimiter, -}: PricingCardsProps) => { +const PricingCards = ({ data, delimiter }: PricingCardsProps) => { const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]); const [descriptionHeight, setDescriptionHeight] = useState(0); @@ -59,11 +38,6 @@ const PricingCards = ({ }; }, []); - const { themeColor } = useTheming({ - baseTheme: "dark", - theme, - }); - const delimiterColumn = (index: number) => delimiter && index % 2 === 1 ? (
) : null}
@@ -85,18 +59,24 @@ const PricingCards = ({ }; const borderClasses = (color?: "neutral" | "blue" | "orange") => { - const classes: Record = { + const classes: Record< + string, + { + border: string; + bg: string; + } + > = { neutral: { - border: themeColor("border-neutral-700"), - bg: themeColor("bg-neutral-700"), + border: "border-neutral-600 dark:border-neutral-700", + bg: "border-neutral-600 dark:bg-neutral-700", }, blue: { - border: themeColor("border-blue-600"), - bg: themeColor("bg-blue-600"), + border: "border-blue-400 dark:border-blue-600", + bg: "bg-blue-400 dark:bg-blue-600", }, orange: { - border: themeColor("border-orange-600"), - bg: themeColor("bg-orange-600"), + border: "border-orange-600 dark:border-orange-600", + bg: "bg-orange-600 dark:bg-orange-600", }, }; @@ -120,7 +100,7 @@ const PricingCards = ({ {delimiterColumn(index)}
) : null}
-

+

{title.content}

{title.tooltip ? ( {title.tooltip} @@ -155,7 +132,7 @@ const PricingCards = ({ ) : null}

(descriptionsRef.current[index] = el)}> @@ -167,12 +144,12 @@ const PricingCards = ({ className={`flex items-end gap-8 ${delimiter ? "@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end" : ""}`} >

{price.amount}

{price.content}
@@ -180,7 +157,7 @@ const PricingCards = ({ {cta ? (
) : delimiter ? null : (
-
+
)}
{sections.map(({ title, items, listItemColors, cta }) => (
-

+

{title}

@@ -209,12 +182,12 @@ const PricingCards = ({ Array.isArray(item) ? (
0 && index % 2 === 0 ? `${themeColor("bg-blue-900")} rounded-md` : ""}`} + className={`flex justify-between gap-16 px-8 -mx-8 ${index === 0 ? "py-8" : "py-4"} ${index > 0 && index % 2 === 0 ? `dark:bg-blue-900 rounded-md` : ""}`} > {item.map((subItem, subIndex) => ( {subItem} @@ -225,16 +198,14 @@ const PricingCards = ({ {listItemColors ? ( ) : null}
{item}
@@ -246,16 +217,14 @@ const PricingCards = ({
{cta.text} diff --git a/src/core/Pricing/data.tsx b/src/core/Pricing/data.tsx index 8f83e70b7..8471b2e60 100644 --- a/src/core/Pricing/data.tsx +++ b/src/core/Pricing/data.tsx @@ -6,12 +6,12 @@ export const planData: PricingDataFeature[] = [ title: { content: "Free", className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]", - color: "text-neutral-700", + color: "text-neutral-600 dark:text-neutral-700", }, description: { content: "Build a proof of concept.", className: "ui-text-p1", - color: "text-neutral-500", + color: "text-neutral-800 dark:text-neutral-500", }, price: { amount: "$0" }, cta: { text: "Start for free", url: "/sign-up" }, @@ -29,8 +29,8 @@ export const planData: PricingDataFeature[] = [ title: "Includes", items: ["Community & email support (best effort)", "No commitment"], listItemColors: { - foreground: "text-neutral-600", - background: "text-neutral-1000", + foreground: "text-neutral-700 dark:text-neutral-600", + background: "text-neutral-300 dark:text-neutral-1000", }, cta: { text: "See all features", @@ -43,12 +43,12 @@ export const planData: PricingDataFeature[] = [ title: { content: "Standard", className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]", - color: "text-neutral-000", + color: "text-neutral-1300 dark:text-neutral-000", }, description: { content: "Roll-out into production.", className: "ui-text-p1", - color: "text-neutral-500", + color: "text-neutral-800 dark:text-neutral-500", }, price: { amount: "$29", @@ -83,8 +83,8 @@ export const planData: PricingDataFeature[] = [ title: "Includes", items: ["1 day email support SLA", "Uptime SLO"], listItemColors: { - foreground: "text-blue-400", - background: "text-blue-800", + foreground: "text-blue-600 dark:text-blue-400", + background: "text-blue-200 dark:text-blue-800", }, cta: { text: "See all features", @@ -97,12 +97,12 @@ export const planData: PricingDataFeature[] = [ title: { content: "Pro", className: "font-mono text-p3 uppercase font-extrabold tracking-[0.16em]", - color: "text-neutral-000", + color: "text-neutral-1300 dark:text-neutral-000", }, description: { content: "Scale with confidence.", className: "ui-text-p1", - color: "text-neutral-500", + color: "text-neutral-800 dark:text-neutral-500", }, price: { amount: "$399", @@ -134,8 +134,8 @@ export const planData: PricingDataFeature[] = [ title: "Includes", items: ["2 hour support SLA", "Uptime SLO"], listItemColors: { - foreground: "text-blue-400", - background: "text-blue-800", + foreground: "text-blue-600 dark:text-blue-400", + background: "text-blue-200 dark:text-blue-800", }, cta: { text: "See all features", @@ -154,7 +154,7 @@ export const planData: PricingDataFeature[] = [ description: { content: "Deliver without limits.", className: "ui-text-p1", - color: "text-neutral-500", + color: "text-neutral-800 dark:text-neutral-500", }, price: { amount: "Custom" }, cta: { @@ -181,8 +181,8 @@ export const planData: PricingDataFeature[] = [ "CNAME, SSO, & more", ], listItemColors: { - foreground: "text-orange-600", - background: "text-orange-1000", + foreground: "text-orange-600 dark:text-orange-600", + background: "text-orange-200 dark:text-orange-1000", }, cta: { text: "See all features", @@ -198,13 +198,13 @@ export const consumptionData: PricingDataFeature[] = [ title: { content: "Messages", className: "ui-text-h3", - color: "text-neutral-000", + color: "text-neutral-1300 dark:text-neutral-000", }, description: { content: "Messages contain the data that a client is communicating, such as the contents of a chat message.", className: "ui-text-p3", - color: "text-neutral-600", + color: "text-neutral-700 dark:text-neutral-600", }, price: { amount: "$2.50", content: "/ million" }, sections: [ @@ -226,7 +226,7 @@ export const consumptionData: PricingDataFeature[] = [ title: { content: "Channels", className: "ui-text-h3", - color: "text-neutral-000", + color: "text-neutral-1300 dark:text-neutral-000", tooltip: (

We charge you for the amount of time a channel is active in our @@ -239,7 +239,7 @@ export const consumptionData: PricingDataFeature[] = [ content: "Channels are used to route messages from publishers to subscribers. Channels are billed by the minute when actively being used by a connected client.", className: "ui-text-p3", - color: "text-neutral-600", + color: "text-neutral-700 dark:text-neutral-600", }, price: { amount: "$1.00", content: "/ million mins" }, sections: [ @@ -261,7 +261,7 @@ export const consumptionData: PricingDataFeature[] = [ title: { content: "Connections", className: "ui-text-h3", - color: "text-neutral-000", + color: "text-neutral-1300 dark:text-neutral-000", tooltip: (

We charge you for the amount of time devices are connected to our @@ -274,7 +274,7 @@ export const consumptionData: PricingDataFeature[] = [ content: "Clients establish and maintain a connection to the Ably service, typically over WebSockets.", className: "ui-text-p3", - color: "text-neutral-600", + color: "text-neutral-700 dark:text-neutral-600", }, price: { amount: "$1.00", content: "/ million mins" }, sections: [ diff --git a/src/core/Pricing/types.ts b/src/core/Pricing/types.ts index 028970fbf..c25a668c1 100644 --- a/src/core/Pricing/types.ts +++ b/src/core/Pricing/types.ts @@ -1,10 +1,10 @@ import { ReactNode } from "react"; -import { ColorClass } from "../styles/colors/types"; +import { ColorClass, ColorThemeSet } from "../styles/colors/types"; type PricingDataHeader = { content: string; className?: string; - color?: ColorClass; + color?: ColorClass | ColorThemeSet; tooltip?: string | ReactNode; }; @@ -19,7 +19,7 @@ type PricingDataFeatureCta = { export type PricingDataFeatureSection = { title: string; items: string[] | string[][]; - listItemColors?: { foreground: ColorClass; background: ColorClass }; + listItemColors?: { foreground: ColorThemeSet; background: ColorThemeSet }; cta?: PricingDataFeatureCta; }; diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx index bf7b58801..991e3e145 100644 --- a/src/core/ProductTile.tsx +++ b/src/core/ProductTile.tsx @@ -2,7 +2,7 @@ import React from "react"; import EncapsulatedIcon from "./Icon/EncapsulatedIcon"; import FeaturedLink from "./FeaturedLink"; import { ProductName, products } from "./ProductTile/data"; -import useTheming from "./hooks/useTheming"; +import clsx from "clsx"; type ProductTileProps = { name: ProductName; @@ -19,31 +19,62 @@ const ProductTile = ({ className, onClick, }: ProductTileProps) => { - const { themeColor } = useTheming({ - baseTheme: "dark", - theme: selected ? "light" : "dark", - }); const { icon, label, description, link, unavailable } = products[name] ?? {}; return (

{icon ? ( - + ) : null}

Ably{" "}

{label}

@@ -51,19 +82,23 @@ const ProductTile = ({
{unavailable ? (
-
+
COMING SOON
) : null}

{description}

{selected && link ? ( diff --git a/src/core/ProductTile/ProductTile.stories.tsx b/src/core/ProductTile/ProductTile.stories.tsx index cdcb1cbf1..60a70eea9 100644 --- a/src/core/ProductTile/ProductTile.stories.tsx +++ b/src/core/ProductTile/ProductTile.stories.tsx @@ -53,7 +53,7 @@ export const ProductTileWithOverriddenStylesAndClick = { alert("yo congrats on the click")} /> ), diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap index 9c637e15b..6b38004dc 100644 --- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap +++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap @@ -1,15 +1,15 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = ` -
+
-
-
- @@ -17,16 +17,16 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
-
-

+

+

Ably

-

+

PubSub

-

+

Low-level APIs to build any realtime experience

@@ -34,15 +34,15 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-
+
-
-
- @@ -50,28 +50,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

PubSub

-

+

Low-level APIs to build any realtime experience

-
+
-
-
- @@ -79,28 +79,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

Chat

-

+

Rapidly build chat features and roll-out at scale

-
+
-
-
- @@ -108,28 +108,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

Spaces

-

+

Create collaborative environments in a few lines of code

-
+
-
-
- @@ -137,28 +137,28 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

LiveSync

-

+

Sync database changes with frontend clients

-
+
-
-
- @@ -166,36 +166,36 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

Asset Tracking

-

+

Simple APIs to build realtime tracking applications

-
+
-
-

+

+

Ably

-

+

LiveObjects

-
+
COMING SOON
-

+

Sync application state across multiple devices

@@ -204,15 +204,15 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = ` exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
+
-
-
- @@ -220,20 +220,20 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

PubSub

-

+

Low-level APIs to build any realtime experience

View docs @@ -245,15 +245,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
+
-
-
- @@ -261,28 +261,28 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

Chat

-

+

Rapidly build chat features and roll-out at scale

-
+
-
-
- @@ -290,20 +290,20 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

Spaces

-

+

Create collaborative environments in a few lines of code

Explore @@ -315,15 +315,15 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
+
-
-
- @@ -331,28 +331,28 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

LiveSync

-

+

Sync database changes with frontend clients

-
+
-
-
- @@ -360,20 +360,20 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
-

+

+

Ably

-

+

Asset Tracking

-

+

Simple APIs to build realtime tracking applications

Explore @@ -385,23 +385,23 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
-
+
-
-

+

+

Ably

-

+

LiveObjects

-
+
COMING SOON
-

+

Sync application state across multiple devices

diff --git a/src/core/Slider/__snapshots__/Slider.stories.tsx.snap b/src/core/Slider/__snapshots__/Slider.stories.tsx.snap index ade9273f2..f313ec89a 100644 --- a/src/core/Slider/__snapshots__/Slider.stories.tsx.snap +++ b/src/core/Slider/__snapshots__/Slider.stories.tsx.snap @@ -44,7 +44,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -97,7 +97,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -150,7 +150,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -171,7 +171,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
- @@ -179,7 +179,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
- @@ -205,7 +205,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
- @@ -213,7 +213,7 @@ exports[`JS Components/Slider FloatingControlPosition smoke-test 1`] = `
- @@ -270,7 +270,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -323,7 +323,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -376,7 +376,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -397,7 +397,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
- @@ -405,7 +405,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
- @@ -431,7 +431,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
- @@ -439,7 +439,7 @@ exports[`JS Components/Slider InlineControlPosition smoke-test 1`] = `
- @@ -496,7 +496,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -549,7 +549,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -602,7 +602,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = ` class="ui-btn self-start" > Read case study - @@ -623,7 +623,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
- @@ -631,7 +631,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
- @@ -673,7 +673,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
- @@ -681,7 +681,7 @@ exports[`JS Components/Slider WithoutIntervalIndicator smoke-test 1`] = `
- diff --git a/src/core/Table/__snapshots__/Table.stories.tsx.snap b/src/core/Table/__snapshots__/Table.stories.tsx.snap index 37894cec1..710ad157c 100644 --- a/src/core/Table/__snapshots__/Table.stories.tsx.snap +++ b/src/core/Table/__snapshots__/Table.stories.tsx.snap @@ -68,7 +68,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -148,7 +148,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -228,7 +228,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -308,7 +308,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -388,7 +388,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -479,7 +479,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -559,7 +559,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -639,7 +639,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -719,7 +719,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -799,7 +799,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -890,7 +890,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -970,7 +970,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -1050,7 +1050,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -1130,7 +1130,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -1210,7 +1210,7 @@ exports[`JS Components/Table PricingPage smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - diff --git a/src/core/Tooltip.tsx b/src/core/Tooltip.tsx index e0c5951f7..63375ce5c 100644 --- a/src/core/Tooltip.tsx +++ b/src/core/Tooltip.tsx @@ -11,14 +11,11 @@ import React, { } from "react"; import { createPortal } from "react-dom"; import Icon from "./Icon"; -import useTheming from "./hooks/useTheming"; -import { Theme } from "./styles/colors/types"; type TooltipProps = { triggerElement?: ReactNode; triggerProps?: ButtonHTMLAttributes; tooltipProps?: HTMLAttributes; - theme?: Theme; interactive?: boolean; } & HTMLAttributes; @@ -27,7 +24,6 @@ const Tooltip = ({ triggerElement, triggerProps, tooltipProps, - theme = "dark", interactive = false, ...rest }: PropsWithChildren) => { @@ -38,10 +34,6 @@ const Tooltip = ({ const reference = useRef(null); const floating = useRef(null); const fadeOutTimeoutRef = useRef(null); - const { themeColor } = useTheming({ - baseTheme: "light", - theme, - }); useEffect(() => { if (open) { @@ -164,11 +156,7 @@ const Tooltip = ({ }`} > {triggerElement ?? ( - + )} @@ -187,7 +175,7 @@ const Tooltip = ({ boxShadow: "4px 4px 15px rgba(0, 0, 0, 0.2)", }} {...tooltipProps} - className={`${themeColor("bg-neutral-1000")} ${themeColor("text-neutral-200")} ui-text-p3 font-medium p-16 ${interactive ? "" : "pointer-events-none"} rounded-lg absolute ${ + className={`bg-neutral-1000 text-neutral-200 ui-text-p3 font-medium p-16 ${interactive ? "" : "pointer-events-none"} rounded-lg absolute ${ tooltipProps?.className ?? "" } ${fadeOut ? "animate-[tooltipExit_0.25s_ease-in-out]" : "animate-[tooltipEntry_0.25s_ease-in-out]"}`} > diff --git a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap index b50df246d..072cc6481 100644 --- a/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap +++ b/src/core/Tooltip/__snapshots__/Tooltip.stories.tsx.snap @@ -14,7 +14,7 @@ exports[`JS Components/Tooltip Central smoke-test 1`] = ` aria-describedby="tooltip" class="p-0 relative focus:outline-none h-[1rem] " > - @@ -24,12 +24,14 @@ exports[`JS Components/Tooltip Central smoke-test 1`] = `
-
+
-
+
-
+
-

+

gui-blue-hover-dark

-

+

#2894ff

-

+

rgb(40, 148, 255)

@@ -138,13 +93,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-blue-active-dark

-

+

#0080ff

-

+

rgb(0, 128, 255)

@@ -155,13 +110,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-blue-focus

-

+

#80b9f2

-

+

rgb(128, 185, 242)

@@ -172,13 +127,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-unavailable

-

+

#a8a8a8

-

+

rgb(168, 168, 168)

@@ -189,13 +144,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-success-green

-

+

#11cb24

-

+

rgb(17, 203, 36)

@@ -206,13 +161,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-error-red

-

+

#fb0c0c

-

+

rgb(251, 12, 12)

@@ -223,13 +178,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-focus

-

+

#80b9f2

-

+

rgb(128, 185, 242)

@@ -240,13 +195,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-focus-outline

-

+

#80b9f2

-

+

rgb(128, 185, 242)

@@ -257,13 +212,13 @@ exports[`CSS/Colors GUIColors smoke-test 1`] = ` >
-

+

gui-visited

-

+

#4887c2

-

+

rgb(72, 135, 194)

@@ -279,13 +234,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-000

-

+

#ffffff

-

+

rgb(255, 255, 255)

@@ -296,13 +251,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-100

-

+

#f6f8fa

-

+

rgb(246, 248, 250)

@@ -313,13 +268,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-200

-

+

#eef1f6

-

+

rgb(238, 241, 246)

@@ -330,13 +285,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-300

-

+

#e6eaf0

-

+

rgb(230, 234, 240)

@@ -347,13 +302,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-400

-

+

#e2e7ef

-

+

rgb(226, 231, 239)

@@ -364,13 +319,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-500

-

+

#c6ced9

-

+

rgb(198, 206, 217)

@@ -381,13 +336,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-600

-

+

#adb6c2

-

+

rgb(173, 182, 194)

@@ -398,13 +353,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-700

-

+

#89929f

-

+

rgb(137, 146, 159)

@@ -415,13 +370,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-800

-

+

#667085

-

+

rgb(102, 112, 133)

@@ -432,13 +387,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-900

-

+

#39414e

-

+

rgb(57, 65, 78)

@@ -449,13 +404,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-1000

-

+

#2b303b

-

+

rgb(43, 48, 59)

@@ -466,13 +421,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-1100

-

+

#202531

-

+

rgb(32, 37, 49)

@@ -483,13 +438,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-1200

-

+

#141924

-

+

rgb(20, 25, 36)

@@ -500,13 +455,13 @@ exports[`CSS/Colors NeutralColors smoke-test 1`] = ` >
-

+

neutral-1300

-

+

#03020d

-

+

rgb(3, 2, 13)

@@ -522,13 +477,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-100

-

+

#fff5f1

-

+

rgb(255, 245, 241)

@@ -539,13 +494,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-200

-

+

#ffe3d8

-

+

rgb(255, 227, 216)

@@ -556,13 +511,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-300

-

+

#ffc4ae

-

+

rgb(255, 196, 174)

@@ -573,13 +528,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-400

-

+

#ff9c79

-

+

rgb(255, 156, 121)

@@ -590,13 +545,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-500

-

+

#ff723f

-

+

rgb(255, 114, 63)

@@ -607,13 +562,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-600

-

+

#ff5416

-

+

rgb(255, 84, 22)

@@ -624,13 +579,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-700

-

+

#ff2739

-

+

rgb(255, 39, 57)

@@ -641,13 +596,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-800

-

+

#e40000

-

+

rgb(228, 0, 0)

@@ -658,13 +613,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-900

-

+

#b82202

-

+

rgb(184, 34, 2)

@@ -675,13 +630,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-1000

-

+

#751500

-

+

rgb(117, 21, 0)

@@ -692,13 +647,13 @@ exports[`CSS/Colors OrangeColors smoke-test 1`] = ` >
-

+

orange-1100

-

+

#2a0b00

-

+

rgb(42, 11, 0)

@@ -714,13 +669,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-100

-

+

#fffbef

-

+

rgb(255, 251, 239)

@@ -731,13 +686,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-200

-

+

#fff0ba

-

+

rgb(255, 240, 186)

@@ -748,13 +703,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-300

-

+

#ffe27c

-

+

rgb(255, 226, 124)

@@ -765,13 +720,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-400

-

+

#ffd43d

-

+

rgb(255, 212, 61)

@@ -782,13 +737,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-500

-

+

#f8c100

-

+

rgb(248, 193, 0)

@@ -799,13 +754,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-600

-

+

#e8a700

-

+

rgb(232, 167, 0)

@@ -816,13 +771,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-700

-

+

#ac8600

-

+

rgb(172, 134, 0)

@@ -833,13 +788,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-800

-

+

#654f00

-

+

rgb(101, 79, 0)

@@ -850,13 +805,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

yellow-900

-

+

#291c01

-

+

rgb(41, 28, 1)

@@ -867,13 +822,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-100

-

+

#f1fff1

-

+

rgb(241, 255, 241)

@@ -884,13 +839,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-200

-

+

#b8ffbb

-

+

rgb(184, 255, 187)

@@ -901,13 +856,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-300

-

+

#80ff85

-

+

rgb(128, 255, 133)

@@ -918,13 +873,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-400

-

+

#08ff13

-

+

rgb(8, 255, 19)

@@ -935,13 +890,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-500

-

+

#00e80b

-

+

rgb(0, 232, 11)

@@ -952,13 +907,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-600

-

+

#00c008

-

+

rgb(0, 192, 8)

@@ -969,13 +924,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-700

-

+

#008e06

-

+

rgb(0, 142, 6)

@@ -986,13 +941,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-800

-

+

#005303

-

+

rgb(0, 83, 3)

@@ -1003,13 +958,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

green-900

-

+

#002a02

-

+

rgb(0, 42, 2)

@@ -1020,13 +975,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-100

-

+

#f1fbff

-

+

rgb(241, 251, 255)

@@ -1037,13 +992,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-200

-

+

#b8eaff

-

+

rgb(184, 234, 255)

@@ -1054,13 +1009,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-300

-

+

#80d9ff

-

+

rgb(128, 217, 255)

@@ -1071,13 +1026,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-400

-

+

#4ad4ff

-

+

rgb(74, 212, 255)

@@ -1088,13 +1043,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-500

-

+

#2cc0ff

-

+

rgb(44, 192, 255)

@@ -1105,13 +1060,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-600

-

+

#00a5ec

-

+

rgb(0, 165, 236)

@@ -1122,13 +1077,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-700

-

+

#0284cd

-

+

rgb(2, 132, 205)

@@ -1139,13 +1094,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-800

-

+

#004b75

-

+

rgb(0, 75, 117)

@@ -1156,13 +1111,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

blue-900

-

+

#001b2a

-

+

rgb(0, 27, 42)

@@ -1173,13 +1128,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-100

-

+

#f7f2fe

-

+

rgb(247, 242, 254)

@@ -1190,13 +1145,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-200

-

+

#d8bcfb

-

+

rgb(216, 188, 251)

@@ -1207,13 +1162,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-300

-

+

#b986f8

-

+

rgb(185, 134, 248)

@@ -1224,13 +1179,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-400

-

+

#9951f5

-

+

rgb(153, 81, 245)

@@ -1241,13 +1196,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-500

-

+

#7a1bf2

-

+

rgb(122, 27, 242)

@@ -1258,13 +1213,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-600

-

+

#5f0bc9

-

+

rgb(95, 11, 201)

@@ -1275,13 +1230,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-700

-

+

#460894

-

+

rgb(70, 8, 148)

@@ -1292,13 +1247,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-800

-

+

#2d055e

-

+

rgb(45, 5, 94)

@@ -1309,13 +1264,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

violet-900

-

+

#130228

-

+

rgb(19, 2, 40)

@@ -1326,13 +1281,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-100

-

+

#fff1fc

-

+

rgb(255, 241, 252)

@@ -1343,13 +1298,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-200

-

+

#ffb8f1

-

+

rgb(255, 184, 241)

@@ -1360,13 +1315,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-300

-

+

#ff80e6

-

+

rgb(255, 128, 230)

@@ -1377,13 +1332,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-400

-

+

#ff47db

-

+

rgb(255, 71, 219)

@@ -1394,13 +1349,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-500

-

+

#ff17d2

-

+

rgb(255, 23, 210)

@@ -1411,13 +1366,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-600

-

+

#d400ab

-

+

rgb(212, 0, 171)

@@ -1428,13 +1383,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-700

-

+

#9c007e

-

+

rgb(156, 0, 126)

@@ -1445,13 +1400,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-800

-

+

#630050

-

+

rgb(99, 0, 80)

@@ -1462,13 +1417,13 @@ exports[`CSS/Colors SecondaryColors smoke-test 1`] = ` >
-

+

pink-900

-

+

#2a0022

-

+

rgb(42, 0, 34)

diff --git a/src/core/styles/colors/types.ts b/src/core/styles/colors/types.ts index 6214a5a06..405114ed8 100644 --- a/src/core/styles/colors/types.ts +++ b/src/core/styles/colors/types.ts @@ -5,13 +5,7 @@ export type ColorName = | (typeof guiColors)[number] | (typeof aliasedColors)[number]; -export const variants = [ - "", - "hover:", - "focus:", - "group-hover:", - "group-focus:", -] as const; +export const variants = ["", "dark:"] as const; type ColorClassVariants = (typeof variants)[number]; @@ -36,6 +30,8 @@ export type Theme = "light" | "dark"; export type ColorClass = `${ColorClassVariants}${ColorClassPrefixes}-${ColorName}`; +export type ColorThemeSet = `${string} dark:${string}`; + export const neutralColors = [ "neutral-000", "neutral-100", diff --git a/tailwind.config.js b/tailwind.config.js index 119addbac..e2d596466 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,7 @@ module.exports = { content: ["./src/**/*.{js,ts,tsx,mdx,stories.tsx,json}"], safelist: [{ pattern: /^hljs.*/ }], + darkMode: ["selector"], theme: { screens: { // CSS custom properties can't be used in media queries