Skip to content

Commit

Permalink
chore: abolish TW safelist, pre-compute theme values
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamiehenson
jamiehenson committed Oct 2, 2024
1 parent 400c147 commit c7862d7
Show file tree
Hide file tree
Showing 6 changed files with 730 additions and 155 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ably/ui",
"version": "14.6.4",
"version": "14.6.5",
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
"repository": {
"type": "git",
Expand Down
22 changes: 11 additions & 11 deletions src/core/Pricing/__snapshots__/PricingCards.stories.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
<div class=" p-32">
<div class="@container flex justify-center">
<div class="flex flex-col items-center @[920px]:flex-row gap-8">
<div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
<div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 transition-[colors,opacity] opacity-25">
</div>
<div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px]:flex-none">
Expand Down Expand Up @@ -385,7 +385,7 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
</use>
</svg>
</div>
<div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
<div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 transition-[colors,opacity] opacity-25">
</div>
<div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px]:flex-none">
Expand Down Expand Up @@ -480,7 +480,7 @@ exports[`Features/Pricing Cards ConsumptionLightMode smoke-test 1`] = `
</use>
</svg>
</div>
<div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
<div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group @[520px]:flex-row @[920px]:flex-col min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 transition-[colors,opacity] opacity-25">
</div>
<div class="relative z-10 flex flex-col gap-24 @[520px]:flex-1 @[920px]:flex-none">
Expand Down Expand Up @@ -1344,8 +1344,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
<div class=" p-32">
<div class="@container flex justify-center">
<div class="grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4 gap-8">
<div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
<div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
</div>
<div class="relative z-10 flex flex-col gap-24 ">
<div>
Expand Down Expand Up @@ -1454,8 +1454,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
</div>
</div>
</div>
<div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
<div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
</div>
<div class="relative z-10 flex flex-col gap-24 ">
<div>
Expand Down Expand Up @@ -1567,8 +1567,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
</div>
</div>
</div>
<div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
<div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
</div>
<div class="relative z-10 flex flex-col gap-24 ">
<div>
Expand Down Expand Up @@ -1691,8 +1691,8 @@ exports[`Features/Pricing Cards PlansLightMode smoke-test 1`] = `
</div>
</div>
</div>
<div class="relative border border-neutral-200 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-100 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
<div class="relative border border-neutral-1100 flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] overflow-hidden backdrop-blur">
<div class="absolute z-0 -top-32 -left-32 w-[calc(100%+64px)] h-[calc(100%+64px)] rounded-2xl bg-neutral-000 group-hover:bg-neutral-1200 group-hover:opacity-100 transition-[colors,opacity] opacity-25">
</div>
<div class="relative z-10 flex flex-col gap-24 ">
<div>
Expand Down
33 changes: 30 additions & 3 deletions src/core/styles/colors/Colors.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
import React from "react";
import { colorNames } from "./types";
import { determineThemeColor } from "./utils";
import Icon from "../../Icon";

export default {
title: "CSS/Colors",
};

const colorSet = (colors) =>
const colorSet = (colors, useClass = "") =>
colors.map((color) => (
<div
key={color}
className="rounded-lg w-128 ui-shadow-lg-soft flex flex-col"
>
<div
className={`h-[100px] rounded-t-lg`}
style={{ backgroundColor: `var(--color-${color})` }}
className={`h-[100px] rounded-t-lg ${useClass ?? ""}`}
style={{ backgroundColor: useClass ? `` : `var(--color-${color})` }}
/>
<div className="p-12 flex flex-col flex-1">
<p className="ui-text-p2 font-semibold flex-1">{color}</p>
Expand Down Expand Up @@ -100,3 +102,28 @@ export const GUIColors = {
},
},
};

export const DynamicTheming = {
render: () => (
<div className="flex items-center">
<div className="flex flex-wrap gap-24">
{colorSet(["orange-300"], "bg-orange-300")}
</div>
<Icon name="icon-gui-arrow-right" size="48" additionalCSS="m-16"></Icon>
<div className="flex flex-wrap gap-24">
{colorSet(
["orange-900"],
determineThemeColor("dark", "light", "bg-orange-300"),
)}
</div>
</div>
),
parameters: {
docs: {
description: {
story:
"We can generate alternatives for a color based on the theme. Example usage: `determineThemeColor('dark', 'light', 'bg-orange-300')` - this takes a base theme of 'dark', a target theme of 'light', and the colour to convert.",
},
},
},
};
Loading

0 comments on commit c7862d7

Please sign in to comment.