From a5262436673596b541847efa21286d74c2e6a9c4 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Thu, 29 Jun 2023 16:41:35 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(demo)=20demonstrate=20token?= =?UTF-8?q?=20references?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Demonstrate the use of token references by editing the greyscale color which is used by lots of components. --- apps/demo/cunningham.ts | 2 ++ apps/demo/src/App.tsx | 6 ++++-- apps/demo/src/cunningham-tokens.css | 11 ++--------- apps/demo/src/cunningham-tokens.ts | 2 +- 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/apps/demo/cunningham.ts b/apps/demo/cunningham.ts index 5b714ad..43e9220 100644 --- a/apps/demo/cunningham.ts +++ b/apps/demo/cunningham.ts @@ -4,6 +4,8 @@ const config: DefaultTokens = { theme: { colors: { "primary-500": "purple", + "success-700": "lime", + "greyscale-300": "#ff18e5", }, }, components: { diff --git a/apps/demo/src/App.tsx b/apps/demo/src/App.tsx index 2b591c5..569730a 100644 --- a/apps/demo/src/App.tsx +++ b/apps/demo/src/App.tsx @@ -1,9 +1,10 @@ import { Button, - usePagination, - Pagination, CunninghamProvider, + Pagination, SUPPORTED_LOCALES, + Switch, + usePagination, } from "@openfun/cunningham-react"; import React, { useState } from "react"; import { tokens } from "./cunningham-tokens"; @@ -26,6 +27,7 @@ export const App = () => { ))} +

Primary-500 color is {tokens.theme.colors["primary-500"]}

diff --git a/apps/demo/src/cunningham-tokens.css b/apps/demo/src/cunningham-tokens.css index 09d45b0..178046f 100644 --- a/apps/demo/src/cunningham-tokens.css +++ b/apps/demo/src/cunningham-tokens.css @@ -22,7 +22,7 @@ --c--theme--colors--greyscale-000: #FFFFFF; --c--theme--colors--greyscale-100: #FAFAFB; --c--theme--colors--greyscale-200: #F3F4F4; - --c--theme--colors--greyscale-300: #E7E8EA; + --c--theme--colors--greyscale-300: #ff18e5; --c--theme--colors--greyscale-400: #C2C6CA; --c--theme--colors--greyscale-500: #9EA3AA; --c--theme--colors--greyscale-600: #79818A; @@ -36,7 +36,7 @@ --c--theme--colors--success-400: #A0E659; --c--theme--colors--success-500: #76D628; --c--theme--colors--success-600: #5AB81D; - --c--theme--colors--success-700: #419A14; + --c--theme--colors--success-700: lime; --c--theme--colors--success-800: #2C7C0C; --c--theme--colors--success-900: #1D6607; --c--theme--colors--info-text: #FFFFFF; @@ -78,13 +78,6 @@ --c--theme--font--sizes--l: 1rem; --c--theme--font--sizes--m: 0.8125rem; --c--theme--font--sizes--s: 0.6875rem; - --c--theme--font--weights--thin: 200; - --c--theme--font--weights--light: 300; - --c--theme--font--weights--regular: 400; - --c--theme--font--weights--medium: 500; - --c--theme--font--weights--bold: 600; - --c--theme--font--weights--extrabold: 700; - --c--theme--font--weights--black: 800; --c--theme--font--families--base: "Roboto Flex Variable", sans-serif; --c--theme--font--families--accent: "Roboto Flex Variable", sans-serif; --c--theme--spacings--xl: 4rem; diff --git a/apps/demo/src/cunningham-tokens.ts b/apps/demo/src/cunningham-tokens.ts index 033eb73..0413d6c 100644 --- a/apps/demo/src/cunningham-tokens.ts +++ b/apps/demo/src/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"purple","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"button":{"border-radius":"30px"}}}; +export const tokens = {"theme":{"colors":{"primary-text":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"purple","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","greyscale-000":"#FFFFFF","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#ff18e5","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","success-text":"#FFFFFF","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"lime","success-800":"#2C7C0C","success-900":"#1D6607","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","warning-text":"#FFFFFF","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-text":"#FFFFFF","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":{},"light":{},"regular":{},"medium":{},"bold":{},"extrabold":{},"black":{}},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"button":{"border-radius":"30px"}}};