From eff1586fb52291499f6e9a2afbb0cd24ca67da08 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Sun, 27 Aug 2023 00:17:40 +0530 Subject: [PATCH 01/24] added design system tokens --- tokens.json | 1098 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1098 insertions(+) create mode 100644 tokens.json diff --git a/tokens.json b/tokens.json new file mode 100644 index 0000000..a11ec7f --- /dev/null +++ b/tokens.json @@ -0,0 +1,1098 @@ +{ + "core": { + "dimension": { + "scale": { + "value": "2", + "type": "dimension" + }, + "xs": { + "value": "4", + "type": "dimension" + }, + "sm": { + "value": "{dimension.xs} * {dimension.scale}", + "type": "dimension" + }, + "md": { + "value": "{dimension.sm} * {dimension.scale}", + "type": "dimension" + }, + "lg": { + "value": "{dimension.md} * {dimension.scale}", + "type": "dimension" + }, + "xl": { + "value": "{dimension.lg} * {dimension.scale}", + "type": "dimension" + } + }, + "spacing": { + "xs": { + "value": "{dimension.xs}", + "type": "spacing" + }, + "sm": { + "value": "{dimension.sm}", + "type": "spacing" + }, + "md": { + "value": "{dimension.md}", + "type": "spacing" + }, + "lg": { + "value": "{dimension.lg}", + "type": "spacing" + }, + "xl": { + "value": "{dimension.xl}", + "type": "spacing" + }, + "multi-value": { + "value": "{dimension.sm} {dimension.xl}", + "type": "spacing", + "description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens" + } + }, + "borderRadius": { + "sm": { + "value": "4", + "type": "borderRadius" + }, + "lg": { + "value": "8", + "type": "borderRadius" + }, + "xl": { + "value": "16", + "type": "borderRadius" + }, + "multi-value": { + "value": "{borderRadius.sm} {borderRadius.lg}", + "type": "borderRadius", + "description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values" + }, + "xs": { + "value": "2", + "type": "borderRadius" + }, + "md": { + "value": "6", + "type": "borderRadius" + } + }, + "colors": { + "black": { + "value": "#000000", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "gray": { + "50": { + "value": "#f7fafc", + "type": "color" + }, + "100": { + "value": "#edf2f7", + "type": "color" + }, + "200": { + "value": "#e2e8f0", + "type": "color" + }, + "300": { + "value": "#cbd5e0", + "type": "color" + }, + "400": { + "value": "#a0aec0", + "type": "color" + }, + "500": { + "value": "#718096", + "type": "color" + }, + "600": { + "value": "#4a5568", + "type": "color" + }, + "700": { + "value": "#2d3748", + "type": "color" + }, + "800": { + "value": "#1a202c", + "type": "color", + "description": "PRIMARY BACKGROUND" + }, + "900": { + "value": "#171923", + "type": "color" + } + }, + "red": { + "50": { + "value": "#fff5f5", + "type": "color" + }, + "100": { + "value": "#fed7d7", + "type": "color" + }, + "200": { + "value": "#feb2b2", + "type": "color" + }, + "300": { + "value": "#fc8181", + "type": "color" + }, + "400": { + "value": "#f56565", + "type": "color" + }, + "500": { + "value": "#ff3864", + "type": "color", + "description": "PRIMARY COLOR" + }, + "600": { + "value": "#c53030", + "type": "color" + }, + "700": { + "value": "#9b2c2c", + "type": "color" + }, + "800": { + "value": "#822727", + "type": "color" + }, + "900": { + "value": "#63171B", + "type": "color" + } + }, + "orange": { + "50": { + "value": "#fffaf0", + "type": "color" + }, + "100": { + "value": "#feebc8", + "type": "color" + }, + "200": { + "value": "#fbd38d", + "type": "color" + }, + "300": { + "value": "#f6ad55", + "type": "color" + }, + "400": { + "value": "#ed8936", + "type": "color" + }, + "500": { + "value": "#dd6b20", + "type": "color" + }, + "600": { + "value": "#c05621", + "type": "color" + }, + "700": { + "value": "#9c4221", + "type": "color" + }, + "800": { + "value": "#7b341e", + "type": "color" + }, + "900": { + "value": "#652b19", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "#fffff0", + "type": "color" + }, + "100": { + "value": "#fefcbf", + "type": "color" + }, + "200": { + "value": "#faf089", + "type": "color" + }, + "300": { + "value": "#f6e05e", + "type": "color" + }, + "400": { + "value": "#ecc94b", + "type": "color" + }, + "500": { + "value": "#D69E2E", + "type": "color" + }, + "600": { + "value": "#b7791f", + "type": "color" + }, + "700": { + "value": "#975a16", + "type": "color" + }, + "800": { + "value": "#744210", + "type": "color" + }, + "900": { + "value": "#5f370e", + "type": "color" + } + }, + "green": { + "50": { + "value": "#f0fff4", + "type": "color" + }, + "100": { + "value": "#c6f6d5", + "type": "color" + }, + "200": { + "value": "#9ae6b4", + "type": "color" + }, + "300": { + "value": "#68d391", + "type": "color" + }, + "400": { + "value": "#48bb78", + "type": "color" + }, + "500": { + "value": "#38a169", + "type": "color" + }, + "600": { + "value": "#2f855a", + "type": "color" + }, + "700": { + "value": "#276749", + "type": "color" + }, + "800": { + "value": "#22543d", + "type": "color" + }, + "900": { + "value": "#1c4532", + "type": "color" + } + }, + "teal": { + "50": { + "value": "#e6fffa", + "type": "color" + }, + "100": { + "value": "#b2f5ea", + "type": "color" + }, + "200": { + "value": "#81e6d9", + "type": "color" + }, + "300": { + "value": "#4fd1c5", + "type": "color" + }, + "400": { + "value": "#38b2ac", + "type": "color" + }, + "500": { + "value": "#319795", + "type": "color" + }, + "600": { + "value": "#2c7a7b", + "type": "color" + }, + "700": { + "value": "#285e61", + "type": "color" + }, + "800": { + "value": "#234e52", + "type": "color" + }, + "900": { + "value": "#1d4044", + "type": "color" + } + }, + "blue": { + "100": { + "value": "#ebf8ff", + "type": "color" + }, + "200": { + "value": "#bee3f8", + "type": "color" + }, + "300": { + "value": "#90cdf4", + "type": "color" + }, + "400": { + "value": "#63b3ed", + "type": "color" + }, + "500": { + "value": "#4299e1", + "type": "color" + }, + "600": { + "value": "#3182ce", + "type": "color" + }, + "700": { + "value": "#2b6cb0", + "type": "color" + }, + "800": { + "value": "#2c5282", + "type": "color" + }, + "900": { + "value": "#2a4365", + "type": "color" + } + }, + "cyan": { + "50": { + "value": "#edfdfd", + "type": "color" + }, + "100": { + "value": "#c4f1f9", + "type": "color" + }, + "200": { + "value": "#9decf9", + "type": "color" + }, + "300": { + "value": "#76e4f7", + "type": "color" + }, + "400": { + "value": "#0bc5ea", + "type": "color" + }, + "500": { + "value": "#00b5d8", + "type": "color" + }, + "600": { + "value": "#00a3c4", + "type": "color" + }, + "700": { + "value": "#0987a0", + "type": "color" + }, + "800": { + "value": "#086f83", + "type": "color" + }, + "900": { + "value": "#065666", + "type": "color" + } + }, + "purple": { + "50": { + "value": "#faf5ff", + "type": "color" + }, + "100": { + "value": "#e9d8fd", + "type": "color" + }, + "200": { + "value": "#d6bcfa", + "type": "color" + }, + "300": { + "value": "#b794f4", + "type": "color" + }, + "400": { + "value": "#9f7aea", + "type": "color" + }, + "500": { + "value": "#822ea6", + "type": "color" + }, + "600": { + "value": "#6b46c1", + "type": "color" + }, + "700": { + "value": "#553c9a", + "type": "color" + }, + "800": { + "value": "#44337a", + "type": "color" + }, + "900": { + "value": "#322659", + "type": "color" + } + }, + "pink": { + "50": { + "value": "#fff5f7", + "type": "color" + }, + "100": { + "value": "#fed7e2", + "type": "color" + }, + "200": { + "value": "#fbb6ce", + "type": "color" + }, + "300": { + "value": "#f687b3", + "type": "color" + }, + "400": { + "value": "#ed64a6", + "type": "color" + }, + "500": { + "value": "#d53f8c", + "type": "color" + }, + "600": { + "value": "#b83280", + "type": "color" + }, + "700": { + "value": "#97266d", + "type": "color" + }, + "800": { + "value": "#702459", + "type": "color" + }, + "900": { + "value": "#521b41", + "type": "color" + } + }, + "primary": { + "50": { + "value": "#ff95ad", + "type": "color" + }, + "200": { + "value": "#ff95ad", + "type": "color" + }, + "300": { + "value": "#ff6788", + "type": "color" + }, + "400": { + "value": "#ff577c", + "type": "color" + }, + "500": { + "value": "#ff3864", + "type": "color", + "description": "RAID GUILD RUBY RED (Primary Color)" + }, + "600": { + "value": "#ff194c", + "type": "color" + }, + "700": { + "value": "#ff0940", + "type": "color" + }, + "800": { + "value": "#da0030", + "type": "color" + } + }, + "whiteAlpha": { + "50": { + "value": "rgba(255,255,255,0.04)", + "type": "color" + }, + "100": { + "value": "rgba(255,255,255,0.06)", + "type": "color" + }, + "200": { + "value": "rgba(255,255,255,0.08)", + "type": "color" + }, + "300": { + "value": "rgba(255,255,255,0.16)", + "type": "color" + }, + "400": { + "value": "rgba(255,255,255,0.24)", + "type": "color" + }, + "500": { + "value": "rgba(255,255,255,0.36)", + "type": "color" + }, + "600": { + "value": "rgba(255,255,255,0.48)", + "type": "color" + }, + "700": { + "value": "rgba(255,255,255,0.64)", + "type": "color" + }, + "800": { + "value": "rgba(255,255,255,0.8)", + "type": "color" + }, + "900": { + "value": "rgba(255,255,255,0.92)", + "type": "color" + } + }, + "blackAlpha": { + "50": { + "value": "rgba(0,0,0,0.04)", + "type": "color" + }, + "100": { + "value": "rgba(0,0,0,0.06)", + "type": "color" + }, + "200": { + "value": "rgba(0,0,0,0.08)", + "type": "color" + }, + "300": { + "value": "rgba(0,0,0,0.16)", + "type": "color" + }, + "400": { + "value": "rgba(0,0,0,0.24)", + "type": "color" + }, + "500": { + "value": "rgba(0,0,0,0.36)", + "type": "color" + }, + "600": { + "value": "rgba(0,0,0,0.48)", + "type": "color" + }, + "700": { + "value": "rgba(0,0,0,0.64)", + "type": "color" + }, + "800": { + "value": "rgba(0,0,0,0.8)", + "type": "color" + }, + "900": { + "value": "rgba(0,0,0,0.92)", + "type": "color" + } + } + }, + "opacity": { + "low": { + "value": "10%", + "type": "opacity" + }, + "md": { + "value": "50%", + "type": "opacity" + }, + "high": { + "value": "90%", + "type": "opacity" + } + }, + "fontFamilies": { + "heading": { + "value": "Uncial Antiqua", + "type": "fontFamilies", + "description": "Heading Font" + }, + "body": { + "value": "Texturina", + "type": "fontFamilies" + }, + "links": { + "value": "Space Mono", + "type": "fontFamilies", + "description": "Use for Links and Button texts" + } + }, + "lineHeights": { + "heading": { + "value": "100%", + "type": "lineHeights" + }, + "body": { + "value": "120%", + "type": "lineHeights" + }, + "headingSmall": { + "value": "120%", + "type": "lineHeights" + }, + "bodySmall": { + "value": "160%", + "type": "lineHeights" + } + }, + "letterSpacing": { + "default": { + "value": "0", + "type": "letterSpacing" + }, + "increased": { + "value": "150%", + "type": "letterSpacing" + }, + "decreased": { + "value": "-5%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "h1": { + "value": "32", + "type": "paragraphSpacing" + }, + "h2": { + "value": "26", + "type": "paragraphSpacing" + } + }, + "fontWeights": { + "headingRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "headingBold": { + "value": "Bold", + "type": "fontWeights" + }, + "bodyRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "bodyBold": { + "value": "Bold", + "type": "fontWeights" + } + }, + "fontSizes": { + "4xl": { + "value": "72", + "type": "fontSizes" + }, + "3xl": { + "value": "60", + "type": "fontSizes" + }, + "2xl": { + "value": "48", + "type": "fontSizes" + }, + "xl": { + "value": "36", + "type": "fontSizes" + }, + "lg": { + "value": "30", + "type": "fontSizes" + }, + "md": { + "value": "20", + "type": "fontSizes" + }, + "sm": { + "value": "16", + "type": "fontSizes", + "description": "body" + }, + "xs": { + "value": "12", + "type": "fontSizes" + } + }, + "textShadow": { + "value": { + "x": "0", + "y": "0", + "blur": "8", + "spread": "0", + "color": "#ff3864", + "type": "dropShadow" + }, + "type": "boxShadow", + "description": "Heading Text Shadow" + }, + "heading": { + "4xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.4xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "3xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.3xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "2xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.2xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.lg}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.md}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + } + }, + "bodyText": { + "4xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.4xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "3xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.3xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "2xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.2xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.lg}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.md}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}" + }, + "type": "typography" + }, + "xs": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.bodySmall}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "xsBold": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyBold}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.default}", + "lineHeight": "8" + }, + "type": "typography" + } + }, + "buttonOrLink": { + "xl": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.lg}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyBold}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.md}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + } + }, + "borderWidth": { + "One": { + "value": "1", + "type": "borderWidth" + }, + "Half": { + "value": "0.5", + "type": "borderWidth" + }, + "Two": { + "value": "2", + "type": "borderWidth" + } + }, + "borderGray": { + "value": { + "color": "{colors.gray.500}", + "width": "{borderWidth.One}", + "style": "sloid" + }, + "type": "border" + }, + "boderRed": { + "value": { + "color": "{colors.red.500}", + "width": "{borderWidth.One}", + "style": "solid" + }, + "type": "border" + }, + "borderPrimary": { + "value": { + "color": "{colors.primary.500}", + "width": "1", + "style": "solid" + }, + "type": "border" + }, + "borderGreen": { + "value": { + "color": "{colors.green.500}", + "width": "{borderWidth.One}", + "style": "solid" + }, + "type": "border" + }, + "gradient": { + "redtoPurple-vertical": { + "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "purpletoRed-vertical": { + "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "redtoPurple-horizontal": { + "value": "linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "purpletoRed-diagonal": { + "value": "linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "pinkVioletBlue": { + "value": "linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)", + "type": "color" + }, + "orangeViolet": { + "value": "linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)", + "type": "color" + }, + "primaryDark": { + "value": "radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, rgba(0, 0, 0, 0.00) 100%)", + "type": "color" + } + }, + "borderPurple": { + "value": { + "color": "{colors.purple.600}", + "width": "{borderWidth.Two}", + "style": "solid" + }, + "type": "border" + }, + "borderWhite": { + "value": { + "color": "{colors.white}", + "width": "{borderWidth.Two}", + "style": "solid" + }, + "type": "border" + }, + "borderGradient": { + "value": { + "color": "{gradient.pinkVioletBlue}", + "width": "2", + "style": "solid" + }, + "type": "border" + } + }, + "$themes": [], + "$metadata": { + "tokenSetOrder": [ + "core" + ] + } +} \ No newline at end of file From 8f182a66f3c43d906f494037ff54075c761f42ff Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Sun, 27 Aug 2023 00:23:09 +0530 Subject: [PATCH 02/24] added design tokens From 72312fd19f608d1f135def62ac48ff3fa3eb8786 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Sun, 27 Aug 2023 00:33:44 +0530 Subject: [PATCH 03/24] Create tokens.md --- src/components/tokens/tokens.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/components/tokens/tokens.md diff --git a/src/components/tokens/tokens.md b/src/components/tokens/tokens.md new file mode 100644 index 0000000..6098622 --- /dev/null +++ b/src/components/tokens/tokens.md @@ -0,0 +1 @@ +## Design system tokens \ No newline at end of file From ddb0977041517775d03b322a03e55a8a24d5516d Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Sun, 27 Aug 2023 00:35:47 +0530 Subject: [PATCH 04/24] added design system tokens --- src/components/tokens/tokens.json | 1098 +++++++++++++++++++++++++++++ 1 file changed, 1098 insertions(+) create mode 100644 src/components/tokens/tokens.json diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json new file mode 100644 index 0000000..a11ec7f --- /dev/null +++ b/src/components/tokens/tokens.json @@ -0,0 +1,1098 @@ +{ + "core": { + "dimension": { + "scale": { + "value": "2", + "type": "dimension" + }, + "xs": { + "value": "4", + "type": "dimension" + }, + "sm": { + "value": "{dimension.xs} * {dimension.scale}", + "type": "dimension" + }, + "md": { + "value": "{dimension.sm} * {dimension.scale}", + "type": "dimension" + }, + "lg": { + "value": "{dimension.md} * {dimension.scale}", + "type": "dimension" + }, + "xl": { + "value": "{dimension.lg} * {dimension.scale}", + "type": "dimension" + } + }, + "spacing": { + "xs": { + "value": "{dimension.xs}", + "type": "spacing" + }, + "sm": { + "value": "{dimension.sm}", + "type": "spacing" + }, + "md": { + "value": "{dimension.md}", + "type": "spacing" + }, + "lg": { + "value": "{dimension.lg}", + "type": "spacing" + }, + "xl": { + "value": "{dimension.xl}", + "type": "spacing" + }, + "multi-value": { + "value": "{dimension.sm} {dimension.xl}", + "type": "spacing", + "description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens" + } + }, + "borderRadius": { + "sm": { + "value": "4", + "type": "borderRadius" + }, + "lg": { + "value": "8", + "type": "borderRadius" + }, + "xl": { + "value": "16", + "type": "borderRadius" + }, + "multi-value": { + "value": "{borderRadius.sm} {borderRadius.lg}", + "type": "borderRadius", + "description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values" + }, + "xs": { + "value": "2", + "type": "borderRadius" + }, + "md": { + "value": "6", + "type": "borderRadius" + } + }, + "colors": { + "black": { + "value": "#000000", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "gray": { + "50": { + "value": "#f7fafc", + "type": "color" + }, + "100": { + "value": "#edf2f7", + "type": "color" + }, + "200": { + "value": "#e2e8f0", + "type": "color" + }, + "300": { + "value": "#cbd5e0", + "type": "color" + }, + "400": { + "value": "#a0aec0", + "type": "color" + }, + "500": { + "value": "#718096", + "type": "color" + }, + "600": { + "value": "#4a5568", + "type": "color" + }, + "700": { + "value": "#2d3748", + "type": "color" + }, + "800": { + "value": "#1a202c", + "type": "color", + "description": "PRIMARY BACKGROUND" + }, + "900": { + "value": "#171923", + "type": "color" + } + }, + "red": { + "50": { + "value": "#fff5f5", + "type": "color" + }, + "100": { + "value": "#fed7d7", + "type": "color" + }, + "200": { + "value": "#feb2b2", + "type": "color" + }, + "300": { + "value": "#fc8181", + "type": "color" + }, + "400": { + "value": "#f56565", + "type": "color" + }, + "500": { + "value": "#ff3864", + "type": "color", + "description": "PRIMARY COLOR" + }, + "600": { + "value": "#c53030", + "type": "color" + }, + "700": { + "value": "#9b2c2c", + "type": "color" + }, + "800": { + "value": "#822727", + "type": "color" + }, + "900": { + "value": "#63171B", + "type": "color" + } + }, + "orange": { + "50": { + "value": "#fffaf0", + "type": "color" + }, + "100": { + "value": "#feebc8", + "type": "color" + }, + "200": { + "value": "#fbd38d", + "type": "color" + }, + "300": { + "value": "#f6ad55", + "type": "color" + }, + "400": { + "value": "#ed8936", + "type": "color" + }, + "500": { + "value": "#dd6b20", + "type": "color" + }, + "600": { + "value": "#c05621", + "type": "color" + }, + "700": { + "value": "#9c4221", + "type": "color" + }, + "800": { + "value": "#7b341e", + "type": "color" + }, + "900": { + "value": "#652b19", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "#fffff0", + "type": "color" + }, + "100": { + "value": "#fefcbf", + "type": "color" + }, + "200": { + "value": "#faf089", + "type": "color" + }, + "300": { + "value": "#f6e05e", + "type": "color" + }, + "400": { + "value": "#ecc94b", + "type": "color" + }, + "500": { + "value": "#D69E2E", + "type": "color" + }, + "600": { + "value": "#b7791f", + "type": "color" + }, + "700": { + "value": "#975a16", + "type": "color" + }, + "800": { + "value": "#744210", + "type": "color" + }, + "900": { + "value": "#5f370e", + "type": "color" + } + }, + "green": { + "50": { + "value": "#f0fff4", + "type": "color" + }, + "100": { + "value": "#c6f6d5", + "type": "color" + }, + "200": { + "value": "#9ae6b4", + "type": "color" + }, + "300": { + "value": "#68d391", + "type": "color" + }, + "400": { + "value": "#48bb78", + "type": "color" + }, + "500": { + "value": "#38a169", + "type": "color" + }, + "600": { + "value": "#2f855a", + "type": "color" + }, + "700": { + "value": "#276749", + "type": "color" + }, + "800": { + "value": "#22543d", + "type": "color" + }, + "900": { + "value": "#1c4532", + "type": "color" + } + }, + "teal": { + "50": { + "value": "#e6fffa", + "type": "color" + }, + "100": { + "value": "#b2f5ea", + "type": "color" + }, + "200": { + "value": "#81e6d9", + "type": "color" + }, + "300": { + "value": "#4fd1c5", + "type": "color" + }, + "400": { + "value": "#38b2ac", + "type": "color" + }, + "500": { + "value": "#319795", + "type": "color" + }, + "600": { + "value": "#2c7a7b", + "type": "color" + }, + "700": { + "value": "#285e61", + "type": "color" + }, + "800": { + "value": "#234e52", + "type": "color" + }, + "900": { + "value": "#1d4044", + "type": "color" + } + }, + "blue": { + "100": { + "value": "#ebf8ff", + "type": "color" + }, + "200": { + "value": "#bee3f8", + "type": "color" + }, + "300": { + "value": "#90cdf4", + "type": "color" + }, + "400": { + "value": "#63b3ed", + "type": "color" + }, + "500": { + "value": "#4299e1", + "type": "color" + }, + "600": { + "value": "#3182ce", + "type": "color" + }, + "700": { + "value": "#2b6cb0", + "type": "color" + }, + "800": { + "value": "#2c5282", + "type": "color" + }, + "900": { + "value": "#2a4365", + "type": "color" + } + }, + "cyan": { + "50": { + "value": "#edfdfd", + "type": "color" + }, + "100": { + "value": "#c4f1f9", + "type": "color" + }, + "200": { + "value": "#9decf9", + "type": "color" + }, + "300": { + "value": "#76e4f7", + "type": "color" + }, + "400": { + "value": "#0bc5ea", + "type": "color" + }, + "500": { + "value": "#00b5d8", + "type": "color" + }, + "600": { + "value": "#00a3c4", + "type": "color" + }, + "700": { + "value": "#0987a0", + "type": "color" + }, + "800": { + "value": "#086f83", + "type": "color" + }, + "900": { + "value": "#065666", + "type": "color" + } + }, + "purple": { + "50": { + "value": "#faf5ff", + "type": "color" + }, + "100": { + "value": "#e9d8fd", + "type": "color" + }, + "200": { + "value": "#d6bcfa", + "type": "color" + }, + "300": { + "value": "#b794f4", + "type": "color" + }, + "400": { + "value": "#9f7aea", + "type": "color" + }, + "500": { + "value": "#822ea6", + "type": "color" + }, + "600": { + "value": "#6b46c1", + "type": "color" + }, + "700": { + "value": "#553c9a", + "type": "color" + }, + "800": { + "value": "#44337a", + "type": "color" + }, + "900": { + "value": "#322659", + "type": "color" + } + }, + "pink": { + "50": { + "value": "#fff5f7", + "type": "color" + }, + "100": { + "value": "#fed7e2", + "type": "color" + }, + "200": { + "value": "#fbb6ce", + "type": "color" + }, + "300": { + "value": "#f687b3", + "type": "color" + }, + "400": { + "value": "#ed64a6", + "type": "color" + }, + "500": { + "value": "#d53f8c", + "type": "color" + }, + "600": { + "value": "#b83280", + "type": "color" + }, + "700": { + "value": "#97266d", + "type": "color" + }, + "800": { + "value": "#702459", + "type": "color" + }, + "900": { + "value": "#521b41", + "type": "color" + } + }, + "primary": { + "50": { + "value": "#ff95ad", + "type": "color" + }, + "200": { + "value": "#ff95ad", + "type": "color" + }, + "300": { + "value": "#ff6788", + "type": "color" + }, + "400": { + "value": "#ff577c", + "type": "color" + }, + "500": { + "value": "#ff3864", + "type": "color", + "description": "RAID GUILD RUBY RED (Primary Color)" + }, + "600": { + "value": "#ff194c", + "type": "color" + }, + "700": { + "value": "#ff0940", + "type": "color" + }, + "800": { + "value": "#da0030", + "type": "color" + } + }, + "whiteAlpha": { + "50": { + "value": "rgba(255,255,255,0.04)", + "type": "color" + }, + "100": { + "value": "rgba(255,255,255,0.06)", + "type": "color" + }, + "200": { + "value": "rgba(255,255,255,0.08)", + "type": "color" + }, + "300": { + "value": "rgba(255,255,255,0.16)", + "type": "color" + }, + "400": { + "value": "rgba(255,255,255,0.24)", + "type": "color" + }, + "500": { + "value": "rgba(255,255,255,0.36)", + "type": "color" + }, + "600": { + "value": "rgba(255,255,255,0.48)", + "type": "color" + }, + "700": { + "value": "rgba(255,255,255,0.64)", + "type": "color" + }, + "800": { + "value": "rgba(255,255,255,0.8)", + "type": "color" + }, + "900": { + "value": "rgba(255,255,255,0.92)", + "type": "color" + } + }, + "blackAlpha": { + "50": { + "value": "rgba(0,0,0,0.04)", + "type": "color" + }, + "100": { + "value": "rgba(0,0,0,0.06)", + "type": "color" + }, + "200": { + "value": "rgba(0,0,0,0.08)", + "type": "color" + }, + "300": { + "value": "rgba(0,0,0,0.16)", + "type": "color" + }, + "400": { + "value": "rgba(0,0,0,0.24)", + "type": "color" + }, + "500": { + "value": "rgba(0,0,0,0.36)", + "type": "color" + }, + "600": { + "value": "rgba(0,0,0,0.48)", + "type": "color" + }, + "700": { + "value": "rgba(0,0,0,0.64)", + "type": "color" + }, + "800": { + "value": "rgba(0,0,0,0.8)", + "type": "color" + }, + "900": { + "value": "rgba(0,0,0,0.92)", + "type": "color" + } + } + }, + "opacity": { + "low": { + "value": "10%", + "type": "opacity" + }, + "md": { + "value": "50%", + "type": "opacity" + }, + "high": { + "value": "90%", + "type": "opacity" + } + }, + "fontFamilies": { + "heading": { + "value": "Uncial Antiqua", + "type": "fontFamilies", + "description": "Heading Font" + }, + "body": { + "value": "Texturina", + "type": "fontFamilies" + }, + "links": { + "value": "Space Mono", + "type": "fontFamilies", + "description": "Use for Links and Button texts" + } + }, + "lineHeights": { + "heading": { + "value": "100%", + "type": "lineHeights" + }, + "body": { + "value": "120%", + "type": "lineHeights" + }, + "headingSmall": { + "value": "120%", + "type": "lineHeights" + }, + "bodySmall": { + "value": "160%", + "type": "lineHeights" + } + }, + "letterSpacing": { + "default": { + "value": "0", + "type": "letterSpacing" + }, + "increased": { + "value": "150%", + "type": "letterSpacing" + }, + "decreased": { + "value": "-5%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "h1": { + "value": "32", + "type": "paragraphSpacing" + }, + "h2": { + "value": "26", + "type": "paragraphSpacing" + } + }, + "fontWeights": { + "headingRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "headingBold": { + "value": "Bold", + "type": "fontWeights" + }, + "bodyRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "bodyBold": { + "value": "Bold", + "type": "fontWeights" + } + }, + "fontSizes": { + "4xl": { + "value": "72", + "type": "fontSizes" + }, + "3xl": { + "value": "60", + "type": "fontSizes" + }, + "2xl": { + "value": "48", + "type": "fontSizes" + }, + "xl": { + "value": "36", + "type": "fontSizes" + }, + "lg": { + "value": "30", + "type": "fontSizes" + }, + "md": { + "value": "20", + "type": "fontSizes" + }, + "sm": { + "value": "16", + "type": "fontSizes", + "description": "body" + }, + "xs": { + "value": "12", + "type": "fontSizes" + } + }, + "textShadow": { + "value": { + "x": "0", + "y": "0", + "blur": "8", + "spread": "0", + "color": "#ff3864", + "type": "dropShadow" + }, + "type": "boxShadow", + "description": "Heading Text Shadow" + }, + "heading": { + "4xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.4xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "3xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.3xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "2xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.heading}", + "fontSize": "{fontSizes.2xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.lg}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.md}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{fontFamilies.heading}", + "fontWeight": "{fontWeights.headingRegular}", + "lineHeight": "{lineHeights.headingSmall}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + } + }, + "bodyText": { + "4xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.4xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "3xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.3xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h1}" + }, + "type": "typography" + }, + "2xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.2xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.lg}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.md}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}" + }, + "type": "typography" + }, + "xs": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.bodySmall}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "xsBold": { + "value": { + "fontFamily": "{fontFamilies.body}", + "fontWeight": "{fontWeights.bodyBold}", + "fontSize": "{fontSizes.xs}", + "letterSpacing": "{letterSpacing.default}", + "lineHeight": "8" + }, + "type": "typography" + } + }, + "buttonOrLink": { + "xl": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.xl}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.lg}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyBold}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.md}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "{fontFamilies.links}", + "fontWeight": "{fontWeights.bodyRegular}", + "lineHeight": "{lineHeights.body}", + "fontSize": "{fontSizes.sm}", + "letterSpacing": "{letterSpacing.default}", + "paragraphSpacing": "{paragraphSpacing.h2}" + }, + "type": "typography" + } + }, + "borderWidth": { + "One": { + "value": "1", + "type": "borderWidth" + }, + "Half": { + "value": "0.5", + "type": "borderWidth" + }, + "Two": { + "value": "2", + "type": "borderWidth" + } + }, + "borderGray": { + "value": { + "color": "{colors.gray.500}", + "width": "{borderWidth.One}", + "style": "sloid" + }, + "type": "border" + }, + "boderRed": { + "value": { + "color": "{colors.red.500}", + "width": "{borderWidth.One}", + "style": "solid" + }, + "type": "border" + }, + "borderPrimary": { + "value": { + "color": "{colors.primary.500}", + "width": "1", + "style": "solid" + }, + "type": "border" + }, + "borderGreen": { + "value": { + "color": "{colors.green.500}", + "width": "{borderWidth.One}", + "style": "solid" + }, + "type": "border" + }, + "gradient": { + "redtoPurple-vertical": { + "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "purpletoRed-vertical": { + "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "redtoPurple-horizontal": { + "value": "linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "purpletoRed-diagonal": { + "value": "linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "pinkVioletBlue": { + "value": "linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)", + "type": "color" + }, + "orangeViolet": { + "value": "linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)", + "type": "color" + }, + "primaryDark": { + "value": "radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, rgba(0, 0, 0, 0.00) 100%)", + "type": "color" + } + }, + "borderPurple": { + "value": { + "color": "{colors.purple.600}", + "width": "{borderWidth.Two}", + "style": "solid" + }, + "type": "border" + }, + "borderWhite": { + "value": { + "color": "{colors.white}", + "width": "{borderWidth.Two}", + "style": "solid" + }, + "type": "border" + }, + "borderGradient": { + "value": { + "color": "{gradient.pinkVioletBlue}", + "width": "2", + "style": "solid" + }, + "type": "border" + } + }, + "$themes": [], + "$metadata": { + "tokenSetOrder": [ + "core" + ] + } +} \ No newline at end of file From 43b6e4f580cf6d9dc8804ca952f0a394466a0089 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Sun, 27 Aug 2023 00:37:21 +0530 Subject: [PATCH 05/24] Delete tokens.json --- tokens.json | 1098 --------------------------------------------------- 1 file changed, 1098 deletions(-) delete mode 100644 tokens.json diff --git a/tokens.json b/tokens.json deleted file mode 100644 index a11ec7f..0000000 --- a/tokens.json +++ /dev/null @@ -1,1098 +0,0 @@ -{ - "core": { - "dimension": { - "scale": { - "value": "2", - "type": "dimension" - }, - "xs": { - "value": "4", - "type": "dimension" - }, - "sm": { - "value": "{dimension.xs} * {dimension.scale}", - "type": "dimension" - }, - "md": { - "value": "{dimension.sm} * {dimension.scale}", - "type": "dimension" - }, - "lg": { - "value": "{dimension.md} * {dimension.scale}", - "type": "dimension" - }, - "xl": { - "value": "{dimension.lg} * {dimension.scale}", - "type": "dimension" - } - }, - "spacing": { - "xs": { - "value": "{dimension.xs}", - "type": "spacing" - }, - "sm": { - "value": "{dimension.sm}", - "type": "spacing" - }, - "md": { - "value": "{dimension.md}", - "type": "spacing" - }, - "lg": { - "value": "{dimension.lg}", - "type": "spacing" - }, - "xl": { - "value": "{dimension.xl}", - "type": "spacing" - }, - "multi-value": { - "value": "{dimension.sm} {dimension.xl}", - "type": "spacing", - "description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens" - } - }, - "borderRadius": { - "sm": { - "value": "4", - "type": "borderRadius" - }, - "lg": { - "value": "8", - "type": "borderRadius" - }, - "xl": { - "value": "16", - "type": "borderRadius" - }, - "multi-value": { - "value": "{borderRadius.sm} {borderRadius.lg}", - "type": "borderRadius", - "description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values" - }, - "xs": { - "value": "2", - "type": "borderRadius" - }, - "md": { - "value": "6", - "type": "borderRadius" - } - }, - "colors": { - "black": { - "value": "#000000", - "type": "color" - }, - "white": { - "value": "#ffffff", - "type": "color" - }, - "gray": { - "50": { - "value": "#f7fafc", - "type": "color" - }, - "100": { - "value": "#edf2f7", - "type": "color" - }, - "200": { - "value": "#e2e8f0", - "type": "color" - }, - "300": { - "value": "#cbd5e0", - "type": "color" - }, - "400": { - "value": "#a0aec0", - "type": "color" - }, - "500": { - "value": "#718096", - "type": "color" - }, - "600": { - "value": "#4a5568", - "type": "color" - }, - "700": { - "value": "#2d3748", - "type": "color" - }, - "800": { - "value": "#1a202c", - "type": "color", - "description": "PRIMARY BACKGROUND" - }, - "900": { - "value": "#171923", - "type": "color" - } - }, - "red": { - "50": { - "value": "#fff5f5", - "type": "color" - }, - "100": { - "value": "#fed7d7", - "type": "color" - }, - "200": { - "value": "#feb2b2", - "type": "color" - }, - "300": { - "value": "#fc8181", - "type": "color" - }, - "400": { - "value": "#f56565", - "type": "color" - }, - "500": { - "value": "#ff3864", - "type": "color", - "description": "PRIMARY COLOR" - }, - "600": { - "value": "#c53030", - "type": "color" - }, - "700": { - "value": "#9b2c2c", - "type": "color" - }, - "800": { - "value": "#822727", - "type": "color" - }, - "900": { - "value": "#63171B", - "type": "color" - } - }, - "orange": { - "50": { - "value": "#fffaf0", - "type": "color" - }, - "100": { - "value": "#feebc8", - "type": "color" - }, - "200": { - "value": "#fbd38d", - "type": "color" - }, - "300": { - "value": "#f6ad55", - "type": "color" - }, - "400": { - "value": "#ed8936", - "type": "color" - }, - "500": { - "value": "#dd6b20", - "type": "color" - }, - "600": { - "value": "#c05621", - "type": "color" - }, - "700": { - "value": "#9c4221", - "type": "color" - }, - "800": { - "value": "#7b341e", - "type": "color" - }, - "900": { - "value": "#652b19", - "type": "color" - } - }, - "yellow": { - "50": { - "value": "#fffff0", - "type": "color" - }, - "100": { - "value": "#fefcbf", - "type": "color" - }, - "200": { - "value": "#faf089", - "type": "color" - }, - "300": { - "value": "#f6e05e", - "type": "color" - }, - "400": { - "value": "#ecc94b", - "type": "color" - }, - "500": { - "value": "#D69E2E", - "type": "color" - }, - "600": { - "value": "#b7791f", - "type": "color" - }, - "700": { - "value": "#975a16", - "type": "color" - }, - "800": { - "value": "#744210", - "type": "color" - }, - "900": { - "value": "#5f370e", - "type": "color" - } - }, - "green": { - "50": { - "value": "#f0fff4", - "type": "color" - }, - "100": { - "value": "#c6f6d5", - "type": "color" - }, - "200": { - "value": "#9ae6b4", - "type": "color" - }, - "300": { - "value": "#68d391", - "type": "color" - }, - "400": { - "value": "#48bb78", - "type": "color" - }, - "500": { - "value": "#38a169", - "type": "color" - }, - "600": { - "value": "#2f855a", - "type": "color" - }, - "700": { - "value": "#276749", - "type": "color" - }, - "800": { - "value": "#22543d", - "type": "color" - }, - "900": { - "value": "#1c4532", - "type": "color" - } - }, - "teal": { - "50": { - "value": "#e6fffa", - "type": "color" - }, - "100": { - "value": "#b2f5ea", - "type": "color" - }, - "200": { - "value": "#81e6d9", - "type": "color" - }, - "300": { - "value": "#4fd1c5", - "type": "color" - }, - "400": { - "value": "#38b2ac", - "type": "color" - }, - "500": { - "value": "#319795", - "type": "color" - }, - "600": { - "value": "#2c7a7b", - "type": "color" - }, - "700": { - "value": "#285e61", - "type": "color" - }, - "800": { - "value": "#234e52", - "type": "color" - }, - "900": { - "value": "#1d4044", - "type": "color" - } - }, - "blue": { - "100": { - "value": "#ebf8ff", - "type": "color" - }, - "200": { - "value": "#bee3f8", - "type": "color" - }, - "300": { - "value": "#90cdf4", - "type": "color" - }, - "400": { - "value": "#63b3ed", - "type": "color" - }, - "500": { - "value": "#4299e1", - "type": "color" - }, - "600": { - "value": "#3182ce", - "type": "color" - }, - "700": { - "value": "#2b6cb0", - "type": "color" - }, - "800": { - "value": "#2c5282", - "type": "color" - }, - "900": { - "value": "#2a4365", - "type": "color" - } - }, - "cyan": { - "50": { - "value": "#edfdfd", - "type": "color" - }, - "100": { - "value": "#c4f1f9", - "type": "color" - }, - "200": { - "value": "#9decf9", - "type": "color" - }, - "300": { - "value": "#76e4f7", - "type": "color" - }, - "400": { - "value": "#0bc5ea", - "type": "color" - }, - "500": { - "value": "#00b5d8", - "type": "color" - }, - "600": { - "value": "#00a3c4", - "type": "color" - }, - "700": { - "value": "#0987a0", - "type": "color" - }, - "800": { - "value": "#086f83", - "type": "color" - }, - "900": { - "value": "#065666", - "type": "color" - } - }, - "purple": { - "50": { - "value": "#faf5ff", - "type": "color" - }, - "100": { - "value": "#e9d8fd", - "type": "color" - }, - "200": { - "value": "#d6bcfa", - "type": "color" - }, - "300": { - "value": "#b794f4", - "type": "color" - }, - "400": { - "value": "#9f7aea", - "type": "color" - }, - "500": { - "value": "#822ea6", - "type": "color" - }, - "600": { - "value": "#6b46c1", - "type": "color" - }, - "700": { - "value": "#553c9a", - "type": "color" - }, - "800": { - "value": "#44337a", - "type": "color" - }, - "900": { - "value": "#322659", - "type": "color" - } - }, - "pink": { - "50": { - "value": "#fff5f7", - "type": "color" - }, - "100": { - "value": "#fed7e2", - "type": "color" - }, - "200": { - "value": "#fbb6ce", - "type": "color" - }, - "300": { - "value": "#f687b3", - "type": "color" - }, - "400": { - "value": "#ed64a6", - "type": "color" - }, - "500": { - "value": "#d53f8c", - "type": "color" - }, - "600": { - "value": "#b83280", - "type": "color" - }, - "700": { - "value": "#97266d", - "type": "color" - }, - "800": { - "value": "#702459", - "type": "color" - }, - "900": { - "value": "#521b41", - "type": "color" - } - }, - "primary": { - "50": { - "value": "#ff95ad", - "type": "color" - }, - "200": { - "value": "#ff95ad", - "type": "color" - }, - "300": { - "value": "#ff6788", - "type": "color" - }, - "400": { - "value": "#ff577c", - "type": "color" - }, - "500": { - "value": "#ff3864", - "type": "color", - "description": "RAID GUILD RUBY RED (Primary Color)" - }, - "600": { - "value": "#ff194c", - "type": "color" - }, - "700": { - "value": "#ff0940", - "type": "color" - }, - "800": { - "value": "#da0030", - "type": "color" - } - }, - "whiteAlpha": { - "50": { - "value": "rgba(255,255,255,0.04)", - "type": "color" - }, - "100": { - "value": "rgba(255,255,255,0.06)", - "type": "color" - }, - "200": { - "value": "rgba(255,255,255,0.08)", - "type": "color" - }, - "300": { - "value": "rgba(255,255,255,0.16)", - "type": "color" - }, - "400": { - "value": "rgba(255,255,255,0.24)", - "type": "color" - }, - "500": { - "value": "rgba(255,255,255,0.36)", - "type": "color" - }, - "600": { - "value": "rgba(255,255,255,0.48)", - "type": "color" - }, - "700": { - "value": "rgba(255,255,255,0.64)", - "type": "color" - }, - "800": { - "value": "rgba(255,255,255,0.8)", - "type": "color" - }, - "900": { - "value": "rgba(255,255,255,0.92)", - "type": "color" - } - }, - "blackAlpha": { - "50": { - "value": "rgba(0,0,0,0.04)", - "type": "color" - }, - "100": { - "value": "rgba(0,0,0,0.06)", - "type": "color" - }, - "200": { - "value": "rgba(0,0,0,0.08)", - "type": "color" - }, - "300": { - "value": "rgba(0,0,0,0.16)", - "type": "color" - }, - "400": { - "value": "rgba(0,0,0,0.24)", - "type": "color" - }, - "500": { - "value": "rgba(0,0,0,0.36)", - "type": "color" - }, - "600": { - "value": "rgba(0,0,0,0.48)", - "type": "color" - }, - "700": { - "value": "rgba(0,0,0,0.64)", - "type": "color" - }, - "800": { - "value": "rgba(0,0,0,0.8)", - "type": "color" - }, - "900": { - "value": "rgba(0,0,0,0.92)", - "type": "color" - } - } - }, - "opacity": { - "low": { - "value": "10%", - "type": "opacity" - }, - "md": { - "value": "50%", - "type": "opacity" - }, - "high": { - "value": "90%", - "type": "opacity" - } - }, - "fontFamilies": { - "heading": { - "value": "Uncial Antiqua", - "type": "fontFamilies", - "description": "Heading Font" - }, - "body": { - "value": "Texturina", - "type": "fontFamilies" - }, - "links": { - "value": "Space Mono", - "type": "fontFamilies", - "description": "Use for Links and Button texts" - } - }, - "lineHeights": { - "heading": { - "value": "100%", - "type": "lineHeights" - }, - "body": { - "value": "120%", - "type": "lineHeights" - }, - "headingSmall": { - "value": "120%", - "type": "lineHeights" - }, - "bodySmall": { - "value": "160%", - "type": "lineHeights" - } - }, - "letterSpacing": { - "default": { - "value": "0", - "type": "letterSpacing" - }, - "increased": { - "value": "150%", - "type": "letterSpacing" - }, - "decreased": { - "value": "-5%", - "type": "letterSpacing" - } - }, - "paragraphSpacing": { - "h1": { - "value": "32", - "type": "paragraphSpacing" - }, - "h2": { - "value": "26", - "type": "paragraphSpacing" - } - }, - "fontWeights": { - "headingRegular": { - "value": "Regular", - "type": "fontWeights" - }, - "headingBold": { - "value": "Bold", - "type": "fontWeights" - }, - "bodyRegular": { - "value": "Regular", - "type": "fontWeights" - }, - "bodyBold": { - "value": "Bold", - "type": "fontWeights" - } - }, - "fontSizes": { - "4xl": { - "value": "72", - "type": "fontSizes" - }, - "3xl": { - "value": "60", - "type": "fontSizes" - }, - "2xl": { - "value": "48", - "type": "fontSizes" - }, - "xl": { - "value": "36", - "type": "fontSizes" - }, - "lg": { - "value": "30", - "type": "fontSizes" - }, - "md": { - "value": "20", - "type": "fontSizes" - }, - "sm": { - "value": "16", - "type": "fontSizes", - "description": "body" - }, - "xs": { - "value": "12", - "type": "fontSizes" - } - }, - "textShadow": { - "value": { - "x": "0", - "y": "0", - "blur": "8", - "spread": "0", - "color": "#ff3864", - "type": "dropShadow" - }, - "type": "boxShadow", - "description": "Heading Text Shadow" - }, - "heading": { - "4xl": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.4xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h1}" - }, - "type": "typography" - }, - "3xl": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.3xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h1}" - }, - "type": "typography" - }, - "2xl": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.heading}", - "fontSize": "{fontSizes.2xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "xl": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.headingSmall}", - "fontSize": "{fontSizes.xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "lg": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.headingSmall}", - "fontSize": "{fontSizes.lg}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "md": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.headingSmall}", - "fontSize": "{fontSizes.md}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "sm": { - "value": { - "fontFamily": "{fontFamilies.heading}", - "fontWeight": "{fontWeights.headingRegular}", - "lineHeight": "{lineHeights.headingSmall}", - "fontSize": "{fontSizes.sm}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - } - }, - "bodyText": { - "4xl": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.4xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h1}" - }, - "type": "typography" - }, - "3xl": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.3xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h1}" - }, - "type": "typography" - }, - "2xl": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.2xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "xl": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "lg": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.lg}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "md": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.md}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "sm": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.sm}", - "letterSpacing": "{letterSpacing.default}" - }, - "type": "typography" - }, - "xs": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.bodySmall}", - "fontSize": "{fontSizes.xs}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "xsBold": { - "value": { - "fontFamily": "{fontFamilies.body}", - "fontWeight": "{fontWeights.bodyBold}", - "fontSize": "{fontSizes.xs}", - "letterSpacing": "{letterSpacing.default}", - "lineHeight": "8" - }, - "type": "typography" - } - }, - "buttonOrLink": { - "xl": { - "value": { - "fontFamily": "{fontFamilies.links}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.xl}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "lg": { - "value": { - "fontFamily": "{fontFamilies.links}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.lg}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "md": { - "value": { - "fontFamily": "{fontFamilies.links}", - "fontWeight": "{fontWeights.bodyBold}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.md}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - }, - "sm": { - "value": { - "fontFamily": "{fontFamilies.links}", - "fontWeight": "{fontWeights.bodyRegular}", - "lineHeight": "{lineHeights.body}", - "fontSize": "{fontSizes.sm}", - "letterSpacing": "{letterSpacing.default}", - "paragraphSpacing": "{paragraphSpacing.h2}" - }, - "type": "typography" - } - }, - "borderWidth": { - "One": { - "value": "1", - "type": "borderWidth" - }, - "Half": { - "value": "0.5", - "type": "borderWidth" - }, - "Two": { - "value": "2", - "type": "borderWidth" - } - }, - "borderGray": { - "value": { - "color": "{colors.gray.500}", - "width": "{borderWidth.One}", - "style": "sloid" - }, - "type": "border" - }, - "boderRed": { - "value": { - "color": "{colors.red.500}", - "width": "{borderWidth.One}", - "style": "solid" - }, - "type": "border" - }, - "borderPrimary": { - "value": { - "color": "{colors.primary.500}", - "width": "1", - "style": "solid" - }, - "type": "border" - }, - "borderGreen": { - "value": { - "color": "{colors.green.500}", - "width": "{borderWidth.One}", - "style": "solid" - }, - "type": "border" - }, - "gradient": { - "redtoPurple-vertical": { - "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", - "type": "color" - }, - "purpletoRed-vertical": { - "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", - "type": "color" - }, - "redtoPurple-horizontal": { - "value": "linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", - "type": "color" - }, - "purpletoRed-diagonal": { - "value": "linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", - "type": "color" - }, - "pinkVioletBlue": { - "value": "linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)", - "type": "color" - }, - "orangeViolet": { - "value": "linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)", - "type": "color" - }, - "primaryDark": { - "value": "radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, rgba(0, 0, 0, 0.00) 100%)", - "type": "color" - } - }, - "borderPurple": { - "value": { - "color": "{colors.purple.600}", - "width": "{borderWidth.Two}", - "style": "solid" - }, - "type": "border" - }, - "borderWhite": { - "value": { - "color": "{colors.white}", - "width": "{borderWidth.Two}", - "style": "solid" - }, - "type": "border" - }, - "borderGradient": { - "value": { - "color": "{gradient.pinkVioletBlue}", - "width": "2", - "style": "solid" - }, - "type": "border" - } - }, - "$themes": [], - "$metadata": { - "tokenSetOrder": [ - "core" - ] - } -} \ No newline at end of file From e42bdcdc6c22d5d05cc28501fafa95293d599e85 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Sun, 27 Aug 2023 00:38:58 +0530 Subject: [PATCH 06/24] update primary 500 --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index a11ec7f..b5885c1 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#ff3864", + "value": "#000000", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From cecb33c753e5c75cbe02420b45e2fa7266110a91 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Sun, 27 Aug 2023 00:42:47 +0530 Subject: [PATCH 07/24] update primary 500 --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index b5885c1..a11ec7f 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#000000", + "value": "#ff3864", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From 1b90a3ead0f58831b2e7f891735386605d34072b Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Tue, 29 Aug 2023 23:45:36 +0530 Subject: [PATCH 08/24] Update tokens.json --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index a11ec7f..2bbe972 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -154,7 +154,7 @@ "type": "color" }, "500": { - "value": "#ff3864", + "value": "#000000", "type": "color", "description": "PRIMARY COLOR" }, From 53658968350a8985a10024daafc15d86e3d4af5a Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Tue, 29 Aug 2023 23:46:52 +0530 Subject: [PATCH 09/24] Update tokens.json --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index 2bbe972..7406d13 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#ff3864", + "value": "#000000", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From c7e7fb8bf1ca9cacaeca26b818a8ce0df74fd33e Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Tue, 29 Aug 2023 23:49:55 +0530 Subject: [PATCH 10/24] updated color --- src/components/tokens/tokens.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index 7406d13..faa0c44 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -154,7 +154,7 @@ "type": "color" }, "500": { - "value": "#000000", + "value": "#FF3864", "type": "color", "description": "PRIMARY COLOR" }, @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#000000", + "value": "#FF3864", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From 4e67d8f6fac4dea83f153f45847b532ae273a936 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Tue, 5 Sep 2023 23:50:37 +0530 Subject: [PATCH 11/24] color update --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index faa0c44..b4cdc5c 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#FF3864", + "value": "#000000", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From d9042adf08dab83b633c57a5f89874ac4080c818 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Tue, 5 Sep 2023 23:52:08 +0530 Subject: [PATCH 12/24] Update tokens.json --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index b4cdc5c..faa0c44 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#000000", + "value": "#FF3864", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From 45b39c95c8ddfb85817f5d5287c4efc7583a20cb Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Tue, 5 Sep 2023 23:55:33 +0530 Subject: [PATCH 13/24] update to yellow --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index faa0c44..b8a15c4 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#FF3864", + "value": "#ECC94B", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From 943bb6030d0fb0935628448b7afcb83d16d108e8 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Tue, 5 Sep 2023 23:57:02 +0530 Subject: [PATCH 14/24] Update tokens.json --- src/components/tokens/tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index b8a15c4..faa0c44 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -525,7 +525,7 @@ "type": "color" }, "500": { - "value": "#ECC94B", + "value": "#FF3864", "type": "color", "description": "RAID GUILD RUBY RED (Primary Color)" }, From d2c899260d42a094955515e2b0d628fed2fded94 Mon Sep 17 00:00:00 2001 From: memosys <82053242+memosys@users.noreply.github.com> Date: Tue, 10 Oct 2023 12:52:28 +0530 Subject: [PATCH 15/24] wip check changes for more info --- package.json | 2 + src/components/RGThemeProvider/index.tsx | 1 - src/components/tokens/index.ts | 1105 ++++++++++++++++++++++ src/components/tokens/tokens.md | 9 +- src/theme/colors.ts | 34 +- src/theme/gradientStyles.ts | 13 + tsconfig.json | 23 +- yarn.lock | 213 ++++- 8 files changed, 1371 insertions(+), 29 deletions(-) create mode 100644 src/components/tokens/index.ts diff --git a/package.json b/package.json index 67bd5f1..6b809c9 100644 --- a/package.json +++ b/package.json @@ -95,6 +95,7 @@ "@rollup/plugin-replace": "^3.0.0", "@storybook/react": "^7.0.21", "@storybook/theming": "^7.0.21", + "@tokens-studio/sd-transforms": "^0.11.3", "@types/react-datepicker": "^4.8.0", "chakra-react-select": "^4.6.0", "framer-motion": "^10.12.16", @@ -107,6 +108,7 @@ "react-icons": "^4.3.1", "rollup-plugin-copy": "^3.4.0", "rollup-plugin-css-porter": "^1.0.2", + "token-transformer": "^0.0.33", "tsconfig-paths-webpack-plugin": "^4.0.0" } } diff --git a/src/components/RGThemeProvider/index.tsx b/src/components/RGThemeProvider/index.tsx index 59ee32a..d16c7fa 100644 --- a/src/components/RGThemeProvider/index.tsx +++ b/src/components/RGThemeProvider/index.tsx @@ -33,5 +33,4 @@ const RGThemeProvider: React.FC = ({ }; export default RGThemeProvider; - export { Fonts }; diff --git a/src/components/tokens/index.ts b/src/components/tokens/index.ts new file mode 100644 index 0000000..1602d04 --- /dev/null +++ b/src/components/tokens/index.ts @@ -0,0 +1,1105 @@ +export const RGTokens = { + dimension: { + scale: { + value: 2, + type: 'dimension', + }, + xs: { + value: 4, + type: 'dimension', + }, + sm: { + value: 8, + type: 'dimension', + }, + md: { + value: 16, + type: 'dimension', + }, + lg: { + value: 32, + type: 'dimension', + }, + xl: { + value: 64, + type: 'dimension', + }, + }, + spacing: { + xs: { + value: 4, + type: 'spacing', + }, + sm: { + value: 8, + type: 'spacing', + }, + md: { + value: 16, + type: 'spacing', + }, + lg: { + value: 32, + type: 'spacing', + }, + xl: { + value: 64, + type: 'spacing', + }, + 'multi-value': { + value: '8 64', + type: 'spacing', + description: + 'You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens', + }, + }, + borderRadius: { + sm: { + value: 4, + type: 'borderRadius', + }, + lg: { + value: 8, + type: 'borderRadius', + }, + xl: { + value: 16, + type: 'borderRadius', + }, + 'multi-value': { + value: '4 8', + type: 'borderRadius', + description: + 'You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values', + }, + xs: { + value: 2, + type: 'borderRadius', + }, + md: { + value: 6, + type: 'borderRadius', + }, + }, + colors: { + black: { + value: '#000000', + type: 'color', + }, + white: { + value: '#ffffff', + type: 'color', + }, + gray: { + '50': { + value: '#f7fafc', + type: 'color', + }, + '100': { + value: '#edf2f7', + type: 'color', + }, + '200': { + value: '#e2e8f0', + type: 'color', + }, + '300': { + value: '#cbd5e0', + type: 'color', + }, + '400': { + value: '#a0aec0', + type: 'color', + }, + '500': { + value: '#718096', + type: 'color', + }, + '600': { + value: '#4a5568', + type: 'color', + }, + '700': { + value: '#2d3748', + type: 'color', + }, + '800': { + value: '#1a202c', + type: 'color', + description: 'PRIMARY BACKGROUND', + }, + '900': { + value: '#171923', + type: 'color', + }, + }, + red: { + '50': { + value: '#fff5f5', + type: 'color', + }, + '100': { + value: '#fed7d7', + type: 'color', + }, + '200': { + value: '#feb2b2', + type: 'color', + }, + '300': { + value: '#fc8181', + type: 'color', + }, + '400': { + value: '#f56565', + type: 'color', + }, + '500': { + value: '#FF3864', + type: 'color', + description: 'PRIMARY COLOR', + }, + '600': { + value: '#c53030', + type: 'color', + }, + '700': { + value: '#9b2c2c', + type: 'color', + }, + '800': { + value: '#822727', + type: 'color', + }, + '900': { + value: '#63171B', + type: 'color', + }, + }, + orange: { + '50': { + value: '#fffaf0', + type: 'color', + }, + '100': { + value: '#feebc8', + type: 'color', + }, + '200': { + value: '#fbd38d', + type: 'color', + }, + '300': { + value: '#f6ad55', + type: 'color', + }, + '400': { + value: '#ed8936', + type: 'color', + }, + '500': { + value: '#dd6b20', + type: 'color', + }, + '600': { + value: '#c05621', + type: 'color', + }, + '700': { + value: '#9c4221', + type: 'color', + }, + '800': { + value: '#7b341e', + type: 'color', + }, + '900': { + value: '#652b19', + type: 'color', + }, + }, + yellow: { + '50': { + value: '#fffff0', + type: 'color', + }, + '100': { + value: '#fefcbf', + type: 'color', + }, + '200': { + value: '#faf089', + type: 'color', + }, + '300': { + value: '#f6e05e', + type: 'color', + }, + '400': { + value: '#ecc94b', + type: 'color', + }, + '500': { + value: '#D69E2E', + type: 'color', + }, + '600': { + value: '#b7791f', + type: 'color', + }, + '700': { + value: '#975a16', + type: 'color', + }, + '800': { + value: '#744210', + type: 'color', + }, + '900': { + value: '#5f370e', + type: 'color', + }, + }, + green: { + '50': { + value: '#f0fff4', + type: 'color', + }, + '100': { + value: '#c6f6d5', + type: 'color', + }, + '200': { + value: '#9ae6b4', + type: 'color', + }, + '300': { + value: '#68d391', + type: 'color', + }, + '400': { + value: '#48bb78', + type: 'color', + }, + '500': { + value: '#38a169', + type: 'color', + }, + '600': { + value: '#2f855a', + type: 'color', + }, + '700': { + value: '#276749', + type: 'color', + }, + '800': { + value: '#22543d', + type: 'color', + }, + '900': { + value: '#1c4532', + type: 'color', + }, + }, + teal: { + '50': { + value: '#e6fffa', + type: 'color', + }, + '100': { + value: '#b2f5ea', + type: 'color', + }, + '200': { + value: '#81e6d9', + type: 'color', + }, + '300': { + value: '#4fd1c5', + type: 'color', + }, + '400': { + value: '#38b2ac', + type: 'color', + }, + '500': { + value: '#319795', + type: 'color', + }, + '600': { + value: '#2c7a7b', + type: 'color', + }, + '700': { + value: '#285e61', + type: 'color', + }, + '800': { + value: '#234e52', + type: 'color', + }, + '900': { + value: '#1d4044', + type: 'color', + }, + }, + blue: { + '100': { + value: '#ebf8ff', + type: 'color', + }, + '200': { + value: '#bee3f8', + type: 'color', + }, + '300': { + value: '#90cdf4', + type: 'color', + }, + '400': { + value: '#63b3ed', + type: 'color', + }, + '500': { + value: '#4299e1', + type: 'color', + }, + '600': { + value: '#3182ce', + type: 'color', + }, + '700': { + value: '#2b6cb0', + type: 'color', + }, + '800': { + value: '#2c5282', + type: 'color', + }, + '900': { + value: '#2a4365', + type: 'color', + }, + }, + cyan: { + '50': { + value: '#edfdfd', + type: 'color', + }, + '100': { + value: '#c4f1f9', + type: 'color', + }, + '200': { + value: '#9decf9', + type: 'color', + }, + '300': { + value: '#76e4f7', + type: 'color', + }, + '400': { + value: '#0bc5ea', + type: 'color', + }, + '500': { + value: '#00b5d8', + type: 'color', + }, + '600': { + value: '#00a3c4', + type: 'color', + }, + '700': { + value: '#0987a0', + type: 'color', + }, + '800': { + value: '#086f83', + type: 'color', + }, + '900': { + value: '#065666', + type: 'color', + }, + }, + purple: { + '50': { + value: '#faf5ff', + type: 'color', + }, + '100': { + value: '#e9d8fd', + type: 'color', + }, + '200': { + value: '#d6bcfa', + type: 'color', + }, + '300': { + value: '#b794f4', + type: 'color', + }, + '400': { + value: '#9f7aea', + type: 'color', + }, + '500': { + value: '#822ea6', + type: 'color', + }, + '600': { + value: '#6b46c1', + type: 'color', + }, + '700': { + value: '#553c9a', + type: 'color', + }, + '800': { + value: '#44337a', + type: 'color', + }, + '900': { + value: '#322659', + type: 'color', + }, + }, + pink: { + '50': { + value: '#fff5f7', + type: 'color', + }, + '100': { + value: '#fed7e2', + type: 'color', + }, + '200': { + value: '#fbb6ce', + type: 'color', + }, + '300': { + value: '#f687b3', + type: 'color', + }, + '400': { + value: '#ed64a6', + type: 'color', + }, + '500': { + value: '#d53f8c', + type: 'color', + }, + '600': { + value: '#b83280', + type: 'color', + }, + '700': { + value: '#97266d', + type: 'color', + }, + '800': { + value: '#702459', + type: 'color', + }, + '900': { + value: '#521b41', + type: 'color', + }, + }, + primary: { + '50': { + value: '#ff95ad', + type: 'color', + }, + '200': { + value: '#ff95ad', + type: 'color', + }, + '300': { + value: '#ff6788', + type: 'color', + }, + '400': { + value: '#ff577c', + type: 'color', + }, + '500': { + value: '#FF3864', + type: 'color', + description: 'RAID GUILD RUBY RED (Primary Color)', + }, + '600': { + value: '#ff194c', + type: 'color', + }, + '700': { + value: '#ff0940', + type: 'color', + }, + '800': { + value: '#da0030', + type: 'color', + }, + }, + whiteAlpha: { + '50': { + value: '#ffffff0a', + type: 'color', + }, + '100': { + value: '#ffffff0f', + type: 'color', + }, + '200': { + value: '#ffffff14', + type: 'color', + }, + '300': { + value: '#ffffff29', + type: 'color', + }, + '400': { + value: '#ffffff3d', + type: 'color', + }, + '500': { + value: '#ffffff5c', + type: 'color', + }, + '600': { + value: '#ffffff7a', + type: 'color', + }, + '700': { + value: '#ffffffa3', + type: 'color', + }, + '800': { + value: '#ffffffcc', + type: 'color', + }, + '900': { + value: '#ffffffeb', + type: 'color', + }, + }, + blackAlpha: { + '50': { + value: '#0000000a', + type: 'color', + }, + '100': { + value: '#0000000f', + type: 'color', + }, + '200': { + value: '#00000014', + type: 'color', + }, + '300': { + value: '#00000029', + type: 'color', + }, + '400': { + value: '#0000003d', + type: 'color', + }, + '500': { + value: '#0000005c', + type: 'color', + }, + '600': { + value: '#0000007a', + type: 'color', + }, + '700': { + value: '#000000a3', + type: 'color', + }, + '800': { + value: '#000000cc', + type: 'color', + }, + '900': { + value: '#000000eb', + type: 'color', + }, + }, + }, + opacity: { + low: { + value: '10%', + type: 'opacity', + }, + md: { + value: '50%', + type: 'opacity', + }, + high: { + value: '90%', + type: 'opacity', + }, + }, + fontFamilies: { + heading: { + value: 'Uncial Antiqua', + type: 'fontFamilies', + description: 'Heading Font', + }, + body: { + value: 'Texturina', + type: 'fontFamilies', + }, + links: { + value: 'Space Mono', + type: 'fontFamilies', + description: 'Use for Links and Button texts', + }, + }, + lineHeights: { + heading: { + value: '100%', + type: 'lineHeights', + }, + body: { + value: '120%', + type: 'lineHeights', + }, + headingSmall: { + value: '120%', + type: 'lineHeights', + }, + bodySmall: { + value: '160%', + type: 'lineHeights', + }, + }, + letterSpacing: { + default: { + value: 0, + type: 'letterSpacing', + }, + increased: { + value: '150%', + type: 'letterSpacing', + }, + decreased: { + value: '-5%', + type: 'letterSpacing', + }, + }, + paragraphSpacing: { + h1: { + value: 32, + type: 'paragraphSpacing', + }, + h2: { + value: 26, + type: 'paragraphSpacing', + }, + }, + fontWeights: { + headingRegular: { + value: 'Regular', + type: 'fontWeights', + }, + headingBold: { + value: 'Bold', + type: 'fontWeights', + }, + bodyRegular: { + value: 'Regular', + type: 'fontWeights', + }, + bodyBold: { + value: 'Bold', + type: 'fontWeights', + }, + }, + fontSizes: { + '4xl': { + value: 72, + type: 'fontSizes', + }, + '3xl': { + value: 60, + type: 'fontSizes', + }, + '2xl': { + value: 48, + type: 'fontSizes', + }, + xl: { + value: 36, + type: 'fontSizes', + }, + lg: { + value: 30, + type: 'fontSizes', + }, + md: { + value: 20, + type: 'fontSizes', + }, + sm: { + value: 16, + type: 'fontSizes', + description: 'body', + }, + xs: { + value: 12, + type: 'fontSizes', + }, + }, + textShadow: { + value: { + x: 0, + y: 0, + blur: 8, + spread: 0, + color: '#ff3864', + type: 'dropShadow', + }, + type: 'boxShadow', + description: 'Heading Text Shadow', + }, + heading: { + '4xl': { + value: { + fontFamily: 'Uncial Antiqua', + fontWeight: 'Regular', + lineHeight: '100%', + fontSize: 72, + letterSpacing: 0, + paragraphSpacing: 32, + }, + type: 'typography', + }, + '3xl': { + value: { + fontFamily: 'Uncial Antiqua', + fontWeight: 'Regular', + lineHeight: '100%', + fontSize: 60, + letterSpacing: 0, + paragraphSpacing: 32, + }, + type: 'typography', + }, + '2xl': { + value: { + fontFamily: 'Uncial Antiqua', + fontWeight: 'Regular', + lineHeight: '100%', + fontSize: 48, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + xl: { + value: { + fontFamily: 'Uncial Antiqua', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 36, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + lg: { + value: { + fontFamily: 'Uncial Antiqua', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 30, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + md: { + value: { + fontFamily: 'Uncial Antiqua', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 20, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + sm: { + value: { + fontFamily: 'Uncial Antiqua', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 16, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + }, + bodyText: { + '4xl': { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 72, + letterSpacing: 0, + paragraphSpacing: 32, + }, + type: 'typography', + }, + '3xl': { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 60, + letterSpacing: 0, + paragraphSpacing: 32, + }, + type: 'typography', + }, + '2xl': { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 48, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + xl: { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 36, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + lg: { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 30, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + md: { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 20, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + sm: { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 16, + letterSpacing: 0, + }, + type: 'typography', + }, + xs: { + value: { + fontFamily: 'Texturina', + fontWeight: 'Regular', + lineHeight: '160%', + fontSize: 12, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + xsBold: { + value: { + fontFamily: 'Texturina', + fontWeight: 'Bold', + fontSize: 12, + letterSpacing: 0, + lineHeight: 8, + }, + type: 'typography', + }, + }, + buttonOrLink: { + xl: { + value: { + fontFamily: 'Space Mono', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 36, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + lg: { + value: { + fontFamily: 'Space Mono', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 30, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + md: { + value: { + fontFamily: 'Space Mono', + fontWeight: 'Bold', + lineHeight: '120%', + fontSize: 20, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + sm: { + value: { + fontFamily: 'Space Mono', + fontWeight: 'Regular', + lineHeight: '120%', + fontSize: 16, + letterSpacing: 0, + paragraphSpacing: 26, + }, + type: 'typography', + }, + }, + borderWidth: { + One: { + value: 1, + type: 'borderWidth', + }, + Half: { + value: 0.5, + type: 'borderWidth', + }, + Two: { + value: 2, + type: 'borderWidth', + }, + }, + borderGray: { + value: { + color: '#718096', + width: 1, + style: 'sloid', + }, + type: 'border', + }, + boderRed: { + value: { + color: '#FF3864', + width: 1, + style: 'solid', + }, + type: 'border', + }, + borderPrimary: { + value: { + color: '#FF3864', + width: 1, + style: 'solid', + }, + type: 'border', + }, + borderGreen: { + value: { + color: '#38a169', + width: 1, + style: 'solid', + }, + type: 'border', + }, + gradient: { + 'redtoPurple-vertical': { + value: + 'linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', + type: 'color', + }, + 'purpletoRed-vertical': { + value: + 'linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', + type: 'color', + }, + 'redtoPurple-horizontal': { + value: + 'linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', + type: 'color', + }, + 'purpletoRed-diagonal': { + value: + 'linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', + type: 'color', + }, + pinkVioletBlue: { + value: + 'linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)', + type: 'color', + }, + orangeViolet: { + value: 'linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)', + type: 'color', + }, + primaryDark: { + value: + 'radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, #00000000 100%)', + type: 'color', + }, + }, + borderPurple: { + value: { + color: '#6b46c1', + width: 2, + style: 'solid', + }, + type: 'border', + }, + borderWhite: { + value: { + color: '#ffffff', + width: 2, + style: 'solid', + }, + type: 'border', + }, + borderGradient: { + value: { + color: + 'linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)', + width: 2, + style: 'solid', + }, + type: 'border', + }, + tokenSetOrder: { + '0': { + value: 'core', + type: 'other', + }, + }, +}; diff --git a/src/components/tokens/tokens.md b/src/components/tokens/tokens.md index 6098622..7f076eb 100644 --- a/src/components/tokens/tokens.md +++ b/src/components/tokens/tokens.md @@ -1 +1,8 @@ -## Design system tokens \ No newline at end of file +## Design system tokens + +cd into this directory and run +`npx token-transformer tokens.json token-output.json` + +* tokens.json is the raw file generated by `token-studio` figma plugin +* once transformed into `token-output.json` it can be used as regular json import for tokens +* More info: https://bootcamp.uxdesign.cc/installing-syncing-design-tokens-ec3b65c4012 diff --git a/src/theme/colors.ts b/src/theme/colors.ts index cb97de4..e691822 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -1,31 +1,23 @@ +import _ from 'lodash'; +import { RGTokens } from 'components/tokens'; + +interface colorTokenInterface { + value: string; + type: string; +} + +const chakraColors = _.mapValues(RGTokens.colors, (colors) => + _.mapValues(colors, (color: colorTokenInterface) => color.value) +); + const Colors = { - white: '#fffffe', - purple: { - 500: '#822EA6', - }, - red: { - 500: '#ff3864', - }, - yellow: { - 500: '#F2E857', - }, + ...chakraColors, headerGradient: { 500: 'linear-gradient(96.18deg, rgb(255, 56, 100) -44.29%, rgb(139, 29, 186) 53.18%, rgb(67, 83, 223) 150.65%)', }, rgGradient: { 500: 'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)', }, - primary: { - // Base colour is at 500 - 50: '#ff95ad', - 200: '#ff95ad', - 300: '#ff6788', - 400: '#ff577c', - 500: '#ff3864', - 600: '#ff194c', - 700: '#ff0940', - 800: '#da0030', - }, }; export default Colors; diff --git a/src/theme/gradientStyles.ts b/src/theme/gradientStyles.ts index 697cbcf..7d5b622 100644 --- a/src/theme/gradientStyles.ts +++ b/src/theme/gradientStyles.ts @@ -1,4 +1,17 @@ +import { RGTokens } from 'components/tokens'; +import _ from 'lodash'; + +interface gradientTokenInterface { + value: string; + type: string; +} + +const chakraGradients = _.mapValues(RGTokens.gradient, (gradients) => + _.mapValues(gradients, (gradient: gradientTokenInterface) => gradient.value) +); + const GradientStyles = { + ...chakraGradients, primaryGradient: { bgGradient: ` radial-gradient(97.27% 170.54% at 98.7% 2.73%, #24003A 0%, rgba(0, 0, 0, 0) 100%), diff --git a/tsconfig.json b/tsconfig.json index e04f98f..208f0ac 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,14 +1,29 @@ { // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs - "include": ["src", "types", "src/stories", "src/test", ".eslintrc.js"], - "exclude": ["dist"], + "include": [ + "src", + "types", + "src/stories", + "src/test", + ".eslintrc.js" + ], + "exclude": [ + "dist" + ], "compilerOptions": { "baseUrl": "./src", + // used to import token.json wherever required + "resolveJsonModule": true, "paths": { - "@/*": ["/*"] + "@/*": [ + "/*" + ] }, "module": "esnext", - "lib": ["dom", "esnext"], + "lib": [ + "dom", + "esnext" + ], "importHelpers": true, // output .d.ts declaration files for consumers "declaration": true, diff --git a/yarn.lock b/yarn.lock index 52c4272..d7d1874 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4207,6 +4207,26 @@ deepmerge "^4.2.2" svgo "^1.2.2" +"@tokens-studio/sd-transforms@^0.11.3": + version "0.11.3" + resolved "https://registry.yarnpkg.com/@tokens-studio/sd-transforms/-/sd-transforms-0.11.3.tgz#3f3d22d6638df7acf00a337e3b3507920b42d191" + integrity sha512-Z+AArpiOFDWXnviQqxXe3l+7eYJTEIHw9tr1GS8Y7m2hxeNgJ9i51H7nC94I4J3/U27QY1Mr7dV/wwxWxFex/g== + dependencies: + "@tokens-studio/types" "^0.2.4" + browser-style-dictionary "^3.1.1-browser.1" + color2k "^2.0.1" + colorjs.io "^0.4.3" + deepmerge "^4.3.1" + expr-eval "^2.0.2" + is-mergeable-object "^1.1.1" + postcss-calc-ast-parser "^0.1.4" + style-dictionary "^3.7.2" + +"@tokens-studio/types@^0.2.4": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.2.5.tgz#fbddad1d0040f1316ee74dbd42a389f2f3d2fcbc" + integrity sha512-pJ0zWxGnEjca4dznFIHC9/oXuovu3DKHUhLDNJVzTRZEVXhWkIRIUbjDwIRihxBr39c776W+3thYvWMgChT0Rw== + "@trysound/sax@0.2.0": version "0.2.0" resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad" @@ -5923,6 +5943,21 @@ browser-resolve@^1.11.3: dependencies: resolve "1.1.7" +browser-style-dictionary@^3.1.1-browser.1: + version "3.1.1-browser.2" + resolved "https://registry.yarnpkg.com/browser-style-dictionary/-/browser-style-dictionary-3.1.1-browser.2.tgz#b5e5d3859ca3940dc3c5ba6225a610b434875383" + integrity sha512-1jUbF3iTqp/JdzUm1Ts4VwmHYXNxM2CddcvDlC5Z84ZVgDWF1KOAgFzupSZaZcZURHvTZB0BeVwCsSqJ/zV7ag== + dependencies: + chalk "^4.0.0" + change-case "^4.1.2" + commander "^8.3.0" + fs-extra "^10.0.0" + glob "^7.2.0" + json5 "^2.2.0" + jsonc-parser "^3.0.0" + lodash "^4.17.15" + tinycolor2 "^1.4.1" + browserify-aes@^1.0.0, browserify-aes@^1.0.4: version "1.2.0" resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48" @@ -6172,6 +6207,15 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001451.tgz#2e197c698fc1373d63e1406d6607ea4617c613f1" integrity sha512-XY7UbUpGRatZzoRft//5xOa69/1iGJRBlrieH6QYrkKLIFn3m7OVEJ81dSrKoy2BnKsdbX5cLrOispZNYo9v2w== +capital-case@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669" + integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case-first "^2.0.2" + capture-exit@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4" @@ -6221,6 +6265,24 @@ chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.2: ansi-styles "^4.1.0" supports-color "^7.1.0" +change-case@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12" + integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A== + dependencies: + camel-case "^4.1.2" + capital-case "^1.0.4" + constant-case "^3.0.4" + dot-case "^3.0.4" + header-case "^2.0.4" + no-case "^3.0.4" + param-case "^3.0.4" + pascal-case "^3.1.2" + path-case "^3.0.4" + sentence-case "^3.0.4" + snake-case "^3.0.4" + tslib "^2.0.3" + chardet@^0.7.0: version "0.7.0" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" @@ -6398,6 +6460,15 @@ cliui@^7.0.2: strip-ansi "^6.0.0" wrap-ansi "^7.0.0" +cliui@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa" + integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ== + dependencies: + string-width "^4.2.0" + strip-ansi "^6.0.1" + wrap-ansi "^7.0.0" + clone-deep@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387" @@ -6468,7 +6539,7 @@ color-support@^1.1.2: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== -color2k@^2.0.0: +color2k@^2.0.0, color2k@^2.0.1: version "2.0.2" resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.2.tgz#ac2b4aea11c822a6bcb70c768b5a289f4fffcebb" integrity sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w== @@ -6488,6 +6559,11 @@ colorette@^2.0.10, colorette@^2.0.19: resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798" integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ== +colorjs.io@^0.4.3: + version "0.4.5" + resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.4.5.tgz#7775f787ff90aca7a38f6edb7b7c0f8cce1e6418" + integrity sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow== + combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6: version "1.0.8" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" @@ -6585,6 +6661,15 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0: resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e" integrity sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ== +constant-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1" + integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case "^2.0.2" + constants-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" @@ -7040,6 +7125,11 @@ deepmerge@^4.2.2: resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.0.tgz#65491893ec47756d44719ae520e0e2609233b59b" integrity sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og== +deepmerge@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a" + integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A== + default-browser-id@3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/default-browser-id/-/default-browser-id-3.0.0.tgz#bee7bbbef1f4e75d31f98f4d3f1556a14cea790c" @@ -8183,6 +8273,11 @@ expect@^25.5.0: jest-message-util "^25.5.0" jest-regex-util "^25.2.6" +expr-eval@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/expr-eval/-/expr-eval-2.0.2.tgz#fa6f044a7b0c93fde830954eb9c5b0f7fbc7e201" + integrity sha512-4EMSHGOPSwAfBiibw3ndnP0AvjDWLsMvGOvWEZ2F96IGk0bIVdjQisOHxReSkE13mHcfbuCiXw+G4y0zv6N8Eg== + express@^4.17.3: version "4.18.2" resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59" @@ -9183,6 +9278,14 @@ he@^1.2.0: resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +header-case@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063" + integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q== + dependencies: + capital-case "^1.0.4" + tslib "^2.0.3" + hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -9673,6 +9776,11 @@ is-map@^2.0.1, is-map@^2.0.2: resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127" integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg== +is-mergeable-object@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz#faaa3ed1cfce87d6f7d2f5885e92cc30af3e2ebf" + integrity sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA== + is-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591" @@ -10525,7 +10633,7 @@ json-stringify-safe@~5.0.1: resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb" integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA== -json5@2.x, json5@^2.1.2, json5@^2.2.2: +json5@2.x, json5@^2.1.2, json5@^2.2.0, json5@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== @@ -10537,6 +10645,11 @@ json5@^1.0.1: dependencies: minimist "^1.2.0" +jsonc-parser@^3.0.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76" + integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w== + jsonfile@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" @@ -11769,6 +11882,14 @@ path-browserify@^1.0.1: resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd" integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g== +path-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f" + integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + path-dirname@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0" @@ -11949,6 +12070,13 @@ posix-character-classes@^0.1.0: resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg== +postcss-calc-ast-parser@^0.1.4: + version "0.1.4" + resolved "https://registry.yarnpkg.com/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz#9aeee3650a91c0b2902789689bc044c9f83bc447" + integrity sha512-CebpbHc96zgFjGgdQ6BqBy6XIUgRx1xXWCAAk6oke02RZ5nxwo9KQejTg8y7uYEeI9kv8jKQPYjoe6REsY23vw== + dependencies: + postcss-value-parser "^3.3.1" + postcss-calc@^8.2.3: version "8.2.4" resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-8.2.4.tgz#77b9c29bfcbe8a07ff6693dc87050828889739a5" @@ -12182,6 +12310,11 @@ postcss-unique-selectors@^5.1.1: dependencies: postcss-selector-parser "^6.0.5" +postcss-value-parser@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" + integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== + postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" @@ -13305,6 +13438,15 @@ send@0.18.0: range-parser "~1.2.1" statuses "2.0.1" +sentence-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f" + integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg== + dependencies: + no-case "^3.0.4" + tslib "^2.0.3" + upper-case-first "^2.0.2" + serialize-javascript@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" @@ -13480,6 +13622,14 @@ slice-ansi@^2.1.0: astral-regex "^1.0.0" is-fullwidth-code-point "^2.0.0" +snake-case@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c" + integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg== + dependencies: + dot-case "^3.0.4" + tslib "^2.0.3" + snapdragon-node@^2.0.1: version "2.1.1" resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b" @@ -13868,6 +14018,21 @@ strip-outer@^1.0.1: dependencies: escape-string-regexp "^1.0.2" +style-dictionary@^3.7.2: + version "3.8.0" + resolved "https://registry.yarnpkg.com/style-dictionary/-/style-dictionary-3.8.0.tgz#7cb8d64360c53431f768d44def665f61e971a73e" + integrity sha512-wHlB/f5eO3mDcYv6WtOz6gvQC477jBKrwuIXe+PtHskTCBsJdAOvL8hCquczJxDui2TnwpeNE+2msK91JJomZg== + dependencies: + chalk "^4.0.0" + change-case "^4.1.2" + commander "^8.3.0" + fs-extra "^10.0.0" + glob "^7.2.0" + json5 "^2.2.2" + jsonc-parser "^3.0.0" + lodash "^4.17.15" + tinycolor2 "^1.4.1" + style-loader@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-2.0.0.tgz#9669602fd4690740eaaec137799a03addbbc393c" @@ -14175,6 +14340,11 @@ tiny-invariant@^1.0.6: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642" integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw== +tinycolor2@^1.4.1: + version "1.6.0" + resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e" + integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw== + tmp@^0.0.33: version "0.0.33" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9" @@ -14239,6 +14409,13 @@ toidentifier@1.0.1: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35" integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== +token-transformer@^0.0.33: + version "0.0.33" + resolved "https://registry.yarnpkg.com/token-transformer/-/token-transformer-0.0.33.tgz#c990e86160aa09a2df639a79f4567e5fbbee176b" + integrity sha512-0h7Cvo8trUcv6sZPyA+iNHsFEwIhN4FhXtYqgndHQNYub+dTDW8ZCQURBNDNa0PvJ8Xg2wqG1V/5WSwV0l6yOw== + dependencies: + yargs "^17.6.2" + totalist@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df" @@ -14690,6 +14867,20 @@ update-browserslist-db@^1.0.10: escalade "^3.1.1" picocolors "^1.0.0" +upper-case-first@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324" + integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg== + dependencies: + tslib "^2.0.3" + +upper-case@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a" + integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg== + dependencies: + tslib "^2.0.3" + uri-js@^4.2.2: version "4.4.1" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e" @@ -15292,6 +15483,11 @@ yargs-parser@^20.2.2, yargs-parser@^20.2.9: resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== +yargs-parser@^21.1.1: + version "21.1.1" + resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35" + integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw== + yargs@^15.3.1: version "15.4.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8" @@ -15322,6 +15518,19 @@ yargs@^16.2.0: y18n "^5.0.5" yargs-parser "^20.2.2" +yargs@^17.6.2: + version "17.7.2" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269" + integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w== + dependencies: + cliui "^8.0.1" + escalade "^3.1.1" + get-caller-file "^2.0.5" + require-directory "^2.1.1" + string-width "^4.2.3" + y18n "^5.0.5" + yargs-parser "^21.1.1" + yauzl@^2.10.0: version "2.10.0" resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9" From a84337dbb0eb65f28a88b687247ced1ffa706fcf Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Thu, 12 Oct 2023 22:28:22 +0530 Subject: [PATCH 16/24] gradient update --- src/components/tokens/tokens.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index faa0c44..98744f8 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -1035,31 +1035,31 @@ "type": "border" }, "gradient": { - "redtoPurple-vertical": { + "redToPurpleVerticalGradient": { "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "purpletoRed-vertical": { + "purpleToRedVerticalGradient": { "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "redtoPurple-horizontal": { + "redToPurpleHorizontalGradient": { "value": "linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "purpletoRed-diagonal": { + "purpleToRedDiagonalGradient": { "value": "linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "pinkVioletBlue": { + "pinkToPurpleGradient": { "value": "linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)", "type": "color" }, - "orangeViolet": { + "orangeToPurpleGradient": { "value": "linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)", "type": "color" }, - "primaryDark": { + "primaryGradient": { "value": "radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, rgba(0, 0, 0, 0.00) 100%)", "type": "color" } @@ -1082,7 +1082,7 @@ }, "borderGradient": { "value": { - "color": "{gradient.pinkVioletBlue}", + "color": "{gradient.pinkToPurpleGradient}", "width": "2", "style": "solid" }, From 564cba306adfa3ab5023caeeadf23cac771c5f0b Mon Sep 17 00:00:00 2001 From: memosys Date: Thu, 19 Oct 2023 12:55:46 +0530 Subject: [PATCH 17/24] generated token-output.json --- src/components/tokens/token-output.json | 1096 +++++++++++++++++++++++ 1 file changed, 1096 insertions(+) create mode 100644 src/components/tokens/token-output.json diff --git a/src/components/tokens/token-output.json b/src/components/tokens/token-output.json new file mode 100644 index 0000000..e7e2b86 --- /dev/null +++ b/src/components/tokens/token-output.json @@ -0,0 +1,1096 @@ +{ + "dimension": { + "scale": { + "value": 2, + "type": "dimension" + }, + "xs": { + "value": 4, + "type": "dimension" + }, + "sm": { + "value": 8, + "type": "dimension" + }, + "md": { + "value": 16, + "type": "dimension" + }, + "lg": { + "value": 32, + "type": "dimension" + }, + "xl": { + "value": 64, + "type": "dimension" + } + }, + "spacing": { + "xs": { + "value": 4, + "type": "spacing" + }, + "sm": { + "value": 8, + "type": "spacing" + }, + "md": { + "value": 16, + "type": "spacing" + }, + "lg": { + "value": 32, + "type": "spacing" + }, + "xl": { + "value": 64, + "type": "spacing" + }, + "multi-value": { + "value": "8 64", + "type": "spacing", + "description": "You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens" + } + }, + "borderRadius": { + "sm": { + "value": 4, + "type": "borderRadius" + }, + "lg": { + "value": 8, + "type": "borderRadius" + }, + "xl": { + "value": 16, + "type": "borderRadius" + }, + "multi-value": { + "value": "4 8", + "type": "borderRadius", + "description": "You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values" + }, + "xs": { + "value": 2, + "type": "borderRadius" + }, + "md": { + "value": 6, + "type": "borderRadius" + } + }, + "colors": { + "black": { + "value": "#000000", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + }, + "gray": { + "50": { + "value": "#f7fafc", + "type": "color" + }, + "100": { + "value": "#edf2f7", + "type": "color" + }, + "200": { + "value": "#e2e8f0", + "type": "color" + }, + "300": { + "value": "#cbd5e0", + "type": "color" + }, + "400": { + "value": "#a0aec0", + "type": "color" + }, + "500": { + "value": "#718096", + "type": "color" + }, + "600": { + "value": "#4a5568", + "type": "color" + }, + "700": { + "value": "#2d3748", + "type": "color" + }, + "800": { + "value": "#1a202c", + "type": "color", + "description": "PRIMARY BACKGROUND" + }, + "900": { + "value": "#171923", + "type": "color" + } + }, + "red": { + "50": { + "value": "#fff5f5", + "type": "color" + }, + "100": { + "value": "#fed7d7", + "type": "color" + }, + "200": { + "value": "#feb2b2", + "type": "color" + }, + "300": { + "value": "#fc8181", + "type": "color" + }, + "400": { + "value": "#f56565", + "type": "color" + }, + "500": { + "value": "#FF3864", + "type": "color", + "description": "PRIMARY COLOR" + }, + "600": { + "value": "#c53030", + "type": "color" + }, + "700": { + "value": "#9b2c2c", + "type": "color" + }, + "800": { + "value": "#822727", + "type": "color" + }, + "900": { + "value": "#63171B", + "type": "color" + } + }, + "orange": { + "50": { + "value": "#fffaf0", + "type": "color" + }, + "100": { + "value": "#feebc8", + "type": "color" + }, + "200": { + "value": "#fbd38d", + "type": "color" + }, + "300": { + "value": "#f6ad55", + "type": "color" + }, + "400": { + "value": "#ed8936", + "type": "color" + }, + "500": { + "value": "#dd6b20", + "type": "color" + }, + "600": { + "value": "#c05621", + "type": "color" + }, + "700": { + "value": "#9c4221", + "type": "color" + }, + "800": { + "value": "#7b341e", + "type": "color" + }, + "900": { + "value": "#652b19", + "type": "color" + } + }, + "yellow": { + "50": { + "value": "#fffff0", + "type": "color" + }, + "100": { + "value": "#fefcbf", + "type": "color" + }, + "200": { + "value": "#faf089", + "type": "color" + }, + "300": { + "value": "#f6e05e", + "type": "color" + }, + "400": { + "value": "#ecc94b", + "type": "color" + }, + "500": { + "value": "#D69E2E", + "type": "color" + }, + "600": { + "value": "#b7791f", + "type": "color" + }, + "700": { + "value": "#975a16", + "type": "color" + }, + "800": { + "value": "#744210", + "type": "color" + }, + "900": { + "value": "#5f370e", + "type": "color" + } + }, + "green": { + "50": { + "value": "#f0fff4", + "type": "color" + }, + "100": { + "value": "#c6f6d5", + "type": "color" + }, + "200": { + "value": "#9ae6b4", + "type": "color" + }, + "300": { + "value": "#68d391", + "type": "color" + }, + "400": { + "value": "#48bb78", + "type": "color" + }, + "500": { + "value": "#38a169", + "type": "color" + }, + "600": { + "value": "#2f855a", + "type": "color" + }, + "700": { + "value": "#276749", + "type": "color" + }, + "800": { + "value": "#22543d", + "type": "color" + }, + "900": { + "value": "#1c4532", + "type": "color" + } + }, + "teal": { + "50": { + "value": "#e6fffa", + "type": "color" + }, + "100": { + "value": "#b2f5ea", + "type": "color" + }, + "200": { + "value": "#81e6d9", + "type": "color" + }, + "300": { + "value": "#4fd1c5", + "type": "color" + }, + "400": { + "value": "#38b2ac", + "type": "color" + }, + "500": { + "value": "#319795", + "type": "color" + }, + "600": { + "value": "#2c7a7b", + "type": "color" + }, + "700": { + "value": "#285e61", + "type": "color" + }, + "800": { + "value": "#234e52", + "type": "color" + }, + "900": { + "value": "#1d4044", + "type": "color" + } + }, + "blue": { + "100": { + "value": "#ebf8ff", + "type": "color" + }, + "200": { + "value": "#bee3f8", + "type": "color" + }, + "300": { + "value": "#90cdf4", + "type": "color" + }, + "400": { + "value": "#63b3ed", + "type": "color" + }, + "500": { + "value": "#4299e1", + "type": "color" + }, + "600": { + "value": "#3182ce", + "type": "color" + }, + "700": { + "value": "#2b6cb0", + "type": "color" + }, + "800": { + "value": "#2c5282", + "type": "color" + }, + "900": { + "value": "#2a4365", + "type": "color" + } + }, + "cyan": { + "50": { + "value": "#edfdfd", + "type": "color" + }, + "100": { + "value": "#c4f1f9", + "type": "color" + }, + "200": { + "value": "#9decf9", + "type": "color" + }, + "300": { + "value": "#76e4f7", + "type": "color" + }, + "400": { + "value": "#0bc5ea", + "type": "color" + }, + "500": { + "value": "#00b5d8", + "type": "color" + }, + "600": { + "value": "#00a3c4", + "type": "color" + }, + "700": { + "value": "#0987a0", + "type": "color" + }, + "800": { + "value": "#086f83", + "type": "color" + }, + "900": { + "value": "#065666", + "type": "color" + } + }, + "purple": { + "50": { + "value": "#faf5ff", + "type": "color" + }, + "100": { + "value": "#e9d8fd", + "type": "color" + }, + "200": { + "value": "#d6bcfa", + "type": "color" + }, + "300": { + "value": "#b794f4", + "type": "color" + }, + "400": { + "value": "#9f7aea", + "type": "color" + }, + "500": { + "value": "#822ea6", + "type": "color" + }, + "600": { + "value": "#6b46c1", + "type": "color" + }, + "700": { + "value": "#553c9a", + "type": "color" + }, + "800": { + "value": "#44337a", + "type": "color" + }, + "900": { + "value": "#322659", + "type": "color" + } + }, + "pink": { + "50": { + "value": "#fff5f7", + "type": "color" + }, + "100": { + "value": "#fed7e2", + "type": "color" + }, + "200": { + "value": "#fbb6ce", + "type": "color" + }, + "300": { + "value": "#f687b3", + "type": "color" + }, + "400": { + "value": "#ed64a6", + "type": "color" + }, + "500": { + "value": "#d53f8c", + "type": "color" + }, + "600": { + "value": "#b83280", + "type": "color" + }, + "700": { + "value": "#97266d", + "type": "color" + }, + "800": { + "value": "#702459", + "type": "color" + }, + "900": { + "value": "#521b41", + "type": "color" + } + }, + "primary": { + "50": { + "value": "#ff95ad", + "type": "color" + }, + "200": { + "value": "#ff95ad", + "type": "color" + }, + "300": { + "value": "#ff6788", + "type": "color" + }, + "400": { + "value": "#ff577c", + "type": "color" + }, + "500": { + "value": "#FF3864", + "type": "color", + "description": "RAID GUILD RUBY RED (Primary Color)" + }, + "600": { + "value": "#ff194c", + "type": "color" + }, + "700": { + "value": "#ff0940", + "type": "color" + }, + "800": { + "value": "#da0030", + "type": "color" + } + }, + "whiteAlpha": { + "50": { + "value": "#ffffff0a", + "type": "color" + }, + "100": { + "value": "#ffffff0f", + "type": "color" + }, + "200": { + "value": "#ffffff14", + "type": "color" + }, + "300": { + "value": "#ffffff29", + "type": "color" + }, + "400": { + "value": "#ffffff3d", + "type": "color" + }, + "500": { + "value": "#ffffff5c", + "type": "color" + }, + "600": { + "value": "#ffffff7a", + "type": "color" + }, + "700": { + "value": "#ffffffa3", + "type": "color" + }, + "800": { + "value": "#ffffffcc", + "type": "color" + }, + "900": { + "value": "#ffffffeb", + "type": "color" + } + }, + "blackAlpha": { + "50": { + "value": "#0000000a", + "type": "color" + }, + "100": { + "value": "#0000000f", + "type": "color" + }, + "200": { + "value": "#00000014", + "type": "color" + }, + "300": { + "value": "#00000029", + "type": "color" + }, + "400": { + "value": "#0000003d", + "type": "color" + }, + "500": { + "value": "#0000005c", + "type": "color" + }, + "600": { + "value": "#0000007a", + "type": "color" + }, + "700": { + "value": "#000000a3", + "type": "color" + }, + "800": { + "value": "#000000cc", + "type": "color" + }, + "900": { + "value": "#000000eb", + "type": "color" + } + } + }, + "opacity": { + "low": { + "value": "10%", + "type": "opacity" + }, + "md": { + "value": "50%", + "type": "opacity" + }, + "high": { + "value": "90%", + "type": "opacity" + } + }, + "fontFamilies": { + "heading": { + "value": "Uncial Antiqua", + "type": "fontFamilies", + "description": "Heading Font" + }, + "body": { + "value": "Texturina", + "type": "fontFamilies" + }, + "links": { + "value": "Space Mono", + "type": "fontFamilies", + "description": "Use for Links and Button texts" + } + }, + "lineHeights": { + "heading": { + "value": "100%", + "type": "lineHeights" + }, + "body": { + "value": "120%", + "type": "lineHeights" + }, + "headingSmall": { + "value": "120%", + "type": "lineHeights" + }, + "bodySmall": { + "value": "160%", + "type": "lineHeights" + } + }, + "letterSpacing": { + "default": { + "value": 0, + "type": "letterSpacing" + }, + "increased": { + "value": "150%", + "type": "letterSpacing" + }, + "decreased": { + "value": "-5%", + "type": "letterSpacing" + } + }, + "paragraphSpacing": { + "h1": { + "value": 32, + "type": "paragraphSpacing" + }, + "h2": { + "value": 26, + "type": "paragraphSpacing" + } + }, + "fontWeights": { + "headingRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "headingBold": { + "value": "Bold", + "type": "fontWeights" + }, + "bodyRegular": { + "value": "Regular", + "type": "fontWeights" + }, + "bodyBold": { + "value": "Bold", + "type": "fontWeights" + } + }, + "fontSizes": { + "4xl": { + "value": 72, + "type": "fontSizes" + }, + "3xl": { + "value": 60, + "type": "fontSizes" + }, + "2xl": { + "value": 48, + "type": "fontSizes" + }, + "xl": { + "value": 36, + "type": "fontSizes" + }, + "lg": { + "value": 30, + "type": "fontSizes" + }, + "md": { + "value": 20, + "type": "fontSizes" + }, + "sm": { + "value": 16, + "type": "fontSizes", + "description": "body" + }, + "xs": { + "value": 12, + "type": "fontSizes" + } + }, + "textShadow": { + "value": { + "x": 0, + "y": 0, + "blur": 8, + "spread": 0, + "color": "#ff3864", + "type": "dropShadow" + }, + "type": "boxShadow", + "description": "Heading Text Shadow" + }, + "heading": { + "4xl": { + "value": { + "fontFamily": "Uncial Antiqua", + "fontWeight": "Regular", + "lineHeight": "100%", + "fontSize": 72, + "letterSpacing": 0, + "paragraphSpacing": 32 + }, + "type": "typography" + }, + "3xl": { + "value": { + "fontFamily": "Uncial Antiqua", + "fontWeight": "Regular", + "lineHeight": "100%", + "fontSize": 60, + "letterSpacing": 0, + "paragraphSpacing": 32 + }, + "type": "typography" + }, + "2xl": { + "value": { + "fontFamily": "Uncial Antiqua", + "fontWeight": "Regular", + "lineHeight": "100%", + "fontSize": 48, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "Uncial Antiqua", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 36, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "Uncial Antiqua", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 30, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "Uncial Antiqua", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 20, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "Uncial Antiqua", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 16, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + } + }, + "bodyText": { + "4xl": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 72, + "letterSpacing": 0, + "paragraphSpacing": 32 + }, + "type": "typography" + }, + "3xl": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 60, + "letterSpacing": 0, + "paragraphSpacing": 32 + }, + "type": "typography" + }, + "2xl": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 48, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "xl": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 36, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 30, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 20, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 16, + "letterSpacing": 0 + }, + "type": "typography" + }, + "xs": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Regular", + "lineHeight": "160%", + "fontSize": 12, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "xsBold": { + "value": { + "fontFamily": "Texturina", + "fontWeight": "Bold", + "fontSize": 12, + "letterSpacing": 0, + "lineHeight": 8 + }, + "type": "typography" + } + }, + "buttonOrLink": { + "xl": { + "value": { + "fontFamily": "Space Mono", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 36, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "lg": { + "value": { + "fontFamily": "Space Mono", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 30, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "md": { + "value": { + "fontFamily": "Space Mono", + "fontWeight": "Bold", + "lineHeight": "120%", + "fontSize": 20, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + }, + "sm": { + "value": { + "fontFamily": "Space Mono", + "fontWeight": "Regular", + "lineHeight": "120%", + "fontSize": 16, + "letterSpacing": 0, + "paragraphSpacing": 26 + }, + "type": "typography" + } + }, + "borderWidth": { + "One": { + "value": 1, + "type": "borderWidth" + }, + "Half": { + "value": 0.5, + "type": "borderWidth" + }, + "Two": { + "value": 2, + "type": "borderWidth" + } + }, + "borderGray": { + "value": { + "color": "#718096", + "width": 1, + "style": "sloid" + }, + "type": "border" + }, + "boderRed": { + "value": { + "color": "#FF3864", + "width": 1, + "style": "solid" + }, + "type": "border" + }, + "borderPrimary": { + "value": { + "color": "#FF3864", + "width": 1, + "style": "solid" + }, + "type": "border" + }, + "borderGreen": { + "value": { + "color": "#38a169", + "width": 1, + "style": "solid" + }, + "type": "border" + }, + "gradient": { + "redtoPurple-vertical": { + "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "purpletoRed-vertical": { + "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "redtoPurple-horizontal": { + "value": "linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "purpletoRed-diagonal": { + "value": "linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", + "type": "color" + }, + "pinkVioletBlue": { + "value": "linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)", + "type": "color" + }, + "orangeViolet": { + "value": "linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)", + "type": "color" + }, + "primaryDark": { + "value": "radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, #00000000 100%)", + "type": "color" + } + }, + "borderPurple": { + "value": { + "color": "#6b46c1", + "width": 2, + "style": "solid" + }, + "type": "border" + }, + "borderWhite": { + "value": { + "color": "#ffffff", + "width": 2, + "style": "solid" + }, + "type": "border" + }, + "borderGradient": { + "value": { + "color": "linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)", + "width": 2, + "style": "solid" + }, + "type": "border" + }, + "tokenSetOrder": { + "0": { + "value": "core", + "type": "other" + } + } +} \ No newline at end of file From 23ca54564d3f38e0aface9de732c8b3e4e61b80a Mon Sep 17 00:00:00 2001 From: memosys Date: Thu, 19 Oct 2023 13:26:36 +0530 Subject: [PATCH 18/24] better token import handling --- src/components/tokens/index.ts | 1108 +------------------------------- src/theme/colors.ts | 4 +- src/theme/gradientStyles.ts | 4 +- 3 files changed, 9 insertions(+), 1107 deletions(-) diff --git a/src/components/tokens/index.ts b/src/components/tokens/index.ts index 1602d04..e822961 100644 --- a/src/components/tokens/index.ts +++ b/src/components/tokens/index.ts @@ -1,1105 +1,3 @@ -export const RGTokens = { - dimension: { - scale: { - value: 2, - type: 'dimension', - }, - xs: { - value: 4, - type: 'dimension', - }, - sm: { - value: 8, - type: 'dimension', - }, - md: { - value: 16, - type: 'dimension', - }, - lg: { - value: 32, - type: 'dimension', - }, - xl: { - value: 64, - type: 'dimension', - }, - }, - spacing: { - xs: { - value: 4, - type: 'spacing', - }, - sm: { - value: 8, - type: 'spacing', - }, - md: { - value: 16, - type: 'spacing', - }, - lg: { - value: 32, - type: 'spacing', - }, - xl: { - value: 64, - type: 'spacing', - }, - 'multi-value': { - value: '8 64', - type: 'spacing', - description: - 'You can have multiple values in a single spacing token. Read more on these: https://docs.tokens.studio/available-tokens/spacing-tokens#multi-value-spacing-tokens', - }, - }, - borderRadius: { - sm: { - value: 4, - type: 'borderRadius', - }, - lg: { - value: 8, - type: 'borderRadius', - }, - xl: { - value: 16, - type: 'borderRadius', - }, - 'multi-value': { - value: '4 8', - type: 'borderRadius', - description: - 'You can have multiple values in a single radius token. Read more on these: https://docs.tokens.studio/available-tokens/border-radius-tokens#single--multiple-values', - }, - xs: { - value: 2, - type: 'borderRadius', - }, - md: { - value: 6, - type: 'borderRadius', - }, - }, - colors: { - black: { - value: '#000000', - type: 'color', - }, - white: { - value: '#ffffff', - type: 'color', - }, - gray: { - '50': { - value: '#f7fafc', - type: 'color', - }, - '100': { - value: '#edf2f7', - type: 'color', - }, - '200': { - value: '#e2e8f0', - type: 'color', - }, - '300': { - value: '#cbd5e0', - type: 'color', - }, - '400': { - value: '#a0aec0', - type: 'color', - }, - '500': { - value: '#718096', - type: 'color', - }, - '600': { - value: '#4a5568', - type: 'color', - }, - '700': { - value: '#2d3748', - type: 'color', - }, - '800': { - value: '#1a202c', - type: 'color', - description: 'PRIMARY BACKGROUND', - }, - '900': { - value: '#171923', - type: 'color', - }, - }, - red: { - '50': { - value: '#fff5f5', - type: 'color', - }, - '100': { - value: '#fed7d7', - type: 'color', - }, - '200': { - value: '#feb2b2', - type: 'color', - }, - '300': { - value: '#fc8181', - type: 'color', - }, - '400': { - value: '#f56565', - type: 'color', - }, - '500': { - value: '#FF3864', - type: 'color', - description: 'PRIMARY COLOR', - }, - '600': { - value: '#c53030', - type: 'color', - }, - '700': { - value: '#9b2c2c', - type: 'color', - }, - '800': { - value: '#822727', - type: 'color', - }, - '900': { - value: '#63171B', - type: 'color', - }, - }, - orange: { - '50': { - value: '#fffaf0', - type: 'color', - }, - '100': { - value: '#feebc8', - type: 'color', - }, - '200': { - value: '#fbd38d', - type: 'color', - }, - '300': { - value: '#f6ad55', - type: 'color', - }, - '400': { - value: '#ed8936', - type: 'color', - }, - '500': { - value: '#dd6b20', - type: 'color', - }, - '600': { - value: '#c05621', - type: 'color', - }, - '700': { - value: '#9c4221', - type: 'color', - }, - '800': { - value: '#7b341e', - type: 'color', - }, - '900': { - value: '#652b19', - type: 'color', - }, - }, - yellow: { - '50': { - value: '#fffff0', - type: 'color', - }, - '100': { - value: '#fefcbf', - type: 'color', - }, - '200': { - value: '#faf089', - type: 'color', - }, - '300': { - value: '#f6e05e', - type: 'color', - }, - '400': { - value: '#ecc94b', - type: 'color', - }, - '500': { - value: '#D69E2E', - type: 'color', - }, - '600': { - value: '#b7791f', - type: 'color', - }, - '700': { - value: '#975a16', - type: 'color', - }, - '800': { - value: '#744210', - type: 'color', - }, - '900': { - value: '#5f370e', - type: 'color', - }, - }, - green: { - '50': { - value: '#f0fff4', - type: 'color', - }, - '100': { - value: '#c6f6d5', - type: 'color', - }, - '200': { - value: '#9ae6b4', - type: 'color', - }, - '300': { - value: '#68d391', - type: 'color', - }, - '400': { - value: '#48bb78', - type: 'color', - }, - '500': { - value: '#38a169', - type: 'color', - }, - '600': { - value: '#2f855a', - type: 'color', - }, - '700': { - value: '#276749', - type: 'color', - }, - '800': { - value: '#22543d', - type: 'color', - }, - '900': { - value: '#1c4532', - type: 'color', - }, - }, - teal: { - '50': { - value: '#e6fffa', - type: 'color', - }, - '100': { - value: '#b2f5ea', - type: 'color', - }, - '200': { - value: '#81e6d9', - type: 'color', - }, - '300': { - value: '#4fd1c5', - type: 'color', - }, - '400': { - value: '#38b2ac', - type: 'color', - }, - '500': { - value: '#319795', - type: 'color', - }, - '600': { - value: '#2c7a7b', - type: 'color', - }, - '700': { - value: '#285e61', - type: 'color', - }, - '800': { - value: '#234e52', - type: 'color', - }, - '900': { - value: '#1d4044', - type: 'color', - }, - }, - blue: { - '100': { - value: '#ebf8ff', - type: 'color', - }, - '200': { - value: '#bee3f8', - type: 'color', - }, - '300': { - value: '#90cdf4', - type: 'color', - }, - '400': { - value: '#63b3ed', - type: 'color', - }, - '500': { - value: '#4299e1', - type: 'color', - }, - '600': { - value: '#3182ce', - type: 'color', - }, - '700': { - value: '#2b6cb0', - type: 'color', - }, - '800': { - value: '#2c5282', - type: 'color', - }, - '900': { - value: '#2a4365', - type: 'color', - }, - }, - cyan: { - '50': { - value: '#edfdfd', - type: 'color', - }, - '100': { - value: '#c4f1f9', - type: 'color', - }, - '200': { - value: '#9decf9', - type: 'color', - }, - '300': { - value: '#76e4f7', - type: 'color', - }, - '400': { - value: '#0bc5ea', - type: 'color', - }, - '500': { - value: '#00b5d8', - type: 'color', - }, - '600': { - value: '#00a3c4', - type: 'color', - }, - '700': { - value: '#0987a0', - type: 'color', - }, - '800': { - value: '#086f83', - type: 'color', - }, - '900': { - value: '#065666', - type: 'color', - }, - }, - purple: { - '50': { - value: '#faf5ff', - type: 'color', - }, - '100': { - value: '#e9d8fd', - type: 'color', - }, - '200': { - value: '#d6bcfa', - type: 'color', - }, - '300': { - value: '#b794f4', - type: 'color', - }, - '400': { - value: '#9f7aea', - type: 'color', - }, - '500': { - value: '#822ea6', - type: 'color', - }, - '600': { - value: '#6b46c1', - type: 'color', - }, - '700': { - value: '#553c9a', - type: 'color', - }, - '800': { - value: '#44337a', - type: 'color', - }, - '900': { - value: '#322659', - type: 'color', - }, - }, - pink: { - '50': { - value: '#fff5f7', - type: 'color', - }, - '100': { - value: '#fed7e2', - type: 'color', - }, - '200': { - value: '#fbb6ce', - type: 'color', - }, - '300': { - value: '#f687b3', - type: 'color', - }, - '400': { - value: '#ed64a6', - type: 'color', - }, - '500': { - value: '#d53f8c', - type: 'color', - }, - '600': { - value: '#b83280', - type: 'color', - }, - '700': { - value: '#97266d', - type: 'color', - }, - '800': { - value: '#702459', - type: 'color', - }, - '900': { - value: '#521b41', - type: 'color', - }, - }, - primary: { - '50': { - value: '#ff95ad', - type: 'color', - }, - '200': { - value: '#ff95ad', - type: 'color', - }, - '300': { - value: '#ff6788', - type: 'color', - }, - '400': { - value: '#ff577c', - type: 'color', - }, - '500': { - value: '#FF3864', - type: 'color', - description: 'RAID GUILD RUBY RED (Primary Color)', - }, - '600': { - value: '#ff194c', - type: 'color', - }, - '700': { - value: '#ff0940', - type: 'color', - }, - '800': { - value: '#da0030', - type: 'color', - }, - }, - whiteAlpha: { - '50': { - value: '#ffffff0a', - type: 'color', - }, - '100': { - value: '#ffffff0f', - type: 'color', - }, - '200': { - value: '#ffffff14', - type: 'color', - }, - '300': { - value: '#ffffff29', - type: 'color', - }, - '400': { - value: '#ffffff3d', - type: 'color', - }, - '500': { - value: '#ffffff5c', - type: 'color', - }, - '600': { - value: '#ffffff7a', - type: 'color', - }, - '700': { - value: '#ffffffa3', - type: 'color', - }, - '800': { - value: '#ffffffcc', - type: 'color', - }, - '900': { - value: '#ffffffeb', - type: 'color', - }, - }, - blackAlpha: { - '50': { - value: '#0000000a', - type: 'color', - }, - '100': { - value: '#0000000f', - type: 'color', - }, - '200': { - value: '#00000014', - type: 'color', - }, - '300': { - value: '#00000029', - type: 'color', - }, - '400': { - value: '#0000003d', - type: 'color', - }, - '500': { - value: '#0000005c', - type: 'color', - }, - '600': { - value: '#0000007a', - type: 'color', - }, - '700': { - value: '#000000a3', - type: 'color', - }, - '800': { - value: '#000000cc', - type: 'color', - }, - '900': { - value: '#000000eb', - type: 'color', - }, - }, - }, - opacity: { - low: { - value: '10%', - type: 'opacity', - }, - md: { - value: '50%', - type: 'opacity', - }, - high: { - value: '90%', - type: 'opacity', - }, - }, - fontFamilies: { - heading: { - value: 'Uncial Antiqua', - type: 'fontFamilies', - description: 'Heading Font', - }, - body: { - value: 'Texturina', - type: 'fontFamilies', - }, - links: { - value: 'Space Mono', - type: 'fontFamilies', - description: 'Use for Links and Button texts', - }, - }, - lineHeights: { - heading: { - value: '100%', - type: 'lineHeights', - }, - body: { - value: '120%', - type: 'lineHeights', - }, - headingSmall: { - value: '120%', - type: 'lineHeights', - }, - bodySmall: { - value: '160%', - type: 'lineHeights', - }, - }, - letterSpacing: { - default: { - value: 0, - type: 'letterSpacing', - }, - increased: { - value: '150%', - type: 'letterSpacing', - }, - decreased: { - value: '-5%', - type: 'letterSpacing', - }, - }, - paragraphSpacing: { - h1: { - value: 32, - type: 'paragraphSpacing', - }, - h2: { - value: 26, - type: 'paragraphSpacing', - }, - }, - fontWeights: { - headingRegular: { - value: 'Regular', - type: 'fontWeights', - }, - headingBold: { - value: 'Bold', - type: 'fontWeights', - }, - bodyRegular: { - value: 'Regular', - type: 'fontWeights', - }, - bodyBold: { - value: 'Bold', - type: 'fontWeights', - }, - }, - fontSizes: { - '4xl': { - value: 72, - type: 'fontSizes', - }, - '3xl': { - value: 60, - type: 'fontSizes', - }, - '2xl': { - value: 48, - type: 'fontSizes', - }, - xl: { - value: 36, - type: 'fontSizes', - }, - lg: { - value: 30, - type: 'fontSizes', - }, - md: { - value: 20, - type: 'fontSizes', - }, - sm: { - value: 16, - type: 'fontSizes', - description: 'body', - }, - xs: { - value: 12, - type: 'fontSizes', - }, - }, - textShadow: { - value: { - x: 0, - y: 0, - blur: 8, - spread: 0, - color: '#ff3864', - type: 'dropShadow', - }, - type: 'boxShadow', - description: 'Heading Text Shadow', - }, - heading: { - '4xl': { - value: { - fontFamily: 'Uncial Antiqua', - fontWeight: 'Regular', - lineHeight: '100%', - fontSize: 72, - letterSpacing: 0, - paragraphSpacing: 32, - }, - type: 'typography', - }, - '3xl': { - value: { - fontFamily: 'Uncial Antiqua', - fontWeight: 'Regular', - lineHeight: '100%', - fontSize: 60, - letterSpacing: 0, - paragraphSpacing: 32, - }, - type: 'typography', - }, - '2xl': { - value: { - fontFamily: 'Uncial Antiqua', - fontWeight: 'Regular', - lineHeight: '100%', - fontSize: 48, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - xl: { - value: { - fontFamily: 'Uncial Antiqua', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 36, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - lg: { - value: { - fontFamily: 'Uncial Antiqua', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 30, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - md: { - value: { - fontFamily: 'Uncial Antiqua', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 20, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - sm: { - value: { - fontFamily: 'Uncial Antiqua', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 16, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - }, - bodyText: { - '4xl': { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 72, - letterSpacing: 0, - paragraphSpacing: 32, - }, - type: 'typography', - }, - '3xl': { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 60, - letterSpacing: 0, - paragraphSpacing: 32, - }, - type: 'typography', - }, - '2xl': { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 48, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - xl: { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 36, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - lg: { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 30, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - md: { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 20, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - sm: { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 16, - letterSpacing: 0, - }, - type: 'typography', - }, - xs: { - value: { - fontFamily: 'Texturina', - fontWeight: 'Regular', - lineHeight: '160%', - fontSize: 12, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - xsBold: { - value: { - fontFamily: 'Texturina', - fontWeight: 'Bold', - fontSize: 12, - letterSpacing: 0, - lineHeight: 8, - }, - type: 'typography', - }, - }, - buttonOrLink: { - xl: { - value: { - fontFamily: 'Space Mono', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 36, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - lg: { - value: { - fontFamily: 'Space Mono', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 30, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - md: { - value: { - fontFamily: 'Space Mono', - fontWeight: 'Bold', - lineHeight: '120%', - fontSize: 20, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - sm: { - value: { - fontFamily: 'Space Mono', - fontWeight: 'Regular', - lineHeight: '120%', - fontSize: 16, - letterSpacing: 0, - paragraphSpacing: 26, - }, - type: 'typography', - }, - }, - borderWidth: { - One: { - value: 1, - type: 'borderWidth', - }, - Half: { - value: 0.5, - type: 'borderWidth', - }, - Two: { - value: 2, - type: 'borderWidth', - }, - }, - borderGray: { - value: { - color: '#718096', - width: 1, - style: 'sloid', - }, - type: 'border', - }, - boderRed: { - value: { - color: '#FF3864', - width: 1, - style: 'solid', - }, - type: 'border', - }, - borderPrimary: { - value: { - color: '#FF3864', - width: 1, - style: 'solid', - }, - type: 'border', - }, - borderGreen: { - value: { - color: '#38a169', - width: 1, - style: 'solid', - }, - type: 'border', - }, - gradient: { - 'redtoPurple-vertical': { - value: - 'linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', - type: 'color', - }, - 'purpletoRed-vertical': { - value: - 'linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', - type: 'color', - }, - 'redtoPurple-horizontal': { - value: - 'linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', - type: 'color', - }, - 'purpletoRed-diagonal': { - value: - 'linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)', - type: 'color', - }, - pinkVioletBlue: { - value: - 'linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)', - type: 'color', - }, - orangeViolet: { - value: 'linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)', - type: 'color', - }, - primaryDark: { - value: - 'radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, #00000000 100%)', - type: 'color', - }, - }, - borderPurple: { - value: { - color: '#6b46c1', - width: 2, - style: 'solid', - }, - type: 'border', - }, - borderWhite: { - value: { - color: '#ffffff', - width: 2, - style: 'solid', - }, - type: 'border', - }, - borderGradient: { - value: { - color: - 'linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)', - width: 2, - style: 'solid', - }, - type: 'border', - }, - tokenSetOrder: { - '0': { - value: 'core', - type: 'other', - }, - }, -}; +import * as RGTokens from './token-output.json'; + +export default RGTokens; diff --git a/src/theme/colors.ts b/src/theme/colors.ts index e691822..c8facfa 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -1,5 +1,5 @@ import _ from 'lodash'; -import { RGTokens } from 'components/tokens'; +import RGTokens from 'components/tokens'; interface colorTokenInterface { value: string; @@ -10,6 +10,8 @@ const chakraColors = _.mapValues(RGTokens.colors, (colors) => _.mapValues(colors, (color: colorTokenInterface) => color.value) ); +console.log(chakraColors); + const Colors = { ...chakraColors, headerGradient: { diff --git a/src/theme/gradientStyles.ts b/src/theme/gradientStyles.ts index 7d5b622..caf1f00 100644 --- a/src/theme/gradientStyles.ts +++ b/src/theme/gradientStyles.ts @@ -1,4 +1,4 @@ -import { RGTokens } from 'components/tokens'; +import RGTokens from 'components/tokens'; import _ from 'lodash'; interface gradientTokenInterface { @@ -10,6 +10,8 @@ const chakraGradients = _.mapValues(RGTokens.gradient, (gradients) => _.mapValues(gradients, (gradient: gradientTokenInterface) => gradient.value) ); +console.log(chakraGradients); + const GradientStyles = { ...chakraGradients, primaryGradient: { From 2391f2699814322b877bef185b080e9ea2eb0699 Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Thu, 19 Oct 2023 13:26:55 +0530 Subject: [PATCH 19/24] base color --- src/components/tokens/tokens.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index 98744f8..4f987bb 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -80,7 +80,7 @@ "type": "borderRadius" } }, - "colors": { + "base": { "black": { "value": "#000000", "type": "color" @@ -88,7 +88,9 @@ "white": { "value": "#ffffff", "type": "color" - }, + } + }, + "colors": { "gray": { "50": { "value": "#f7fafc", @@ -1074,7 +1076,7 @@ }, "borderWhite": { "value": { - "color": "{colors.white}", + "color": "{base.white}", "width": "{borderWidth.Two}", "style": "solid" }, From 15bfd28eb569a7a6bc5022987c216f2f740d5f5a Mon Sep 17 00:00:00 2001 From: Sk Ayaz Date: Thu, 19 Oct 2023 13:35:18 +0530 Subject: [PATCH 20/24] update base --- src/components/tokens/tokens.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/tokens/tokens.json b/src/components/tokens/tokens.json index 4f987bb..b8a5d9f 100644 --- a/src/components/tokens/tokens.json +++ b/src/components/tokens/tokens.json @@ -80,17 +80,17 @@ "type": "borderRadius" } }, - "base": { - "black": { - "value": "#000000", - "type": "color" - }, - "white": { - "value": "#ffffff", - "type": "color" - } - }, "colors": { + "base": { + "black": { + "value": "#000000", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + } + }, "gray": { "50": { "value": "#f7fafc", @@ -1076,7 +1076,7 @@ }, "borderWhite": { "value": { - "color": "{base.white}", + "color": "{colors.base.white}", "width": "{borderWidth.Two}", "style": "solid" }, From 3e7be2194a88d5be0de4ffeab9ed0b56991f826c Mon Sep 17 00:00:00 2001 From: memosys Date: Thu, 19 Oct 2023 14:13:14 +0530 Subject: [PATCH 21/24] gradient sync working; TBDiscussed! --- src/components/tokens/token-output.json | 30 +++++++++++++------------ src/theme/colors.ts | 5 +++-- src/theme/gradientStyles.ts | 13 +++++------ 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/tokens/token-output.json b/src/components/tokens/token-output.json index e7e2b86..eb57a05 100644 --- a/src/components/tokens/token-output.json +++ b/src/components/tokens/token-output.json @@ -80,13 +80,15 @@ } }, "colors": { - "black": { - "value": "#000000", - "type": "color" - }, - "white": { - "value": "#ffffff", - "type": "color" + "base": { + "black": { + "value": "#000000", + "type": "color" + }, + "white": { + "value": "#ffffff", + "type": "color" + } }, "gray": { "50": { @@ -1034,31 +1036,31 @@ "type": "border" }, "gradient": { - "redtoPurple-vertical": { + "redToPurpleVerticalGradient": { "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "purpletoRed-vertical": { + "purpleToRedVerticalGradient": { "value": "linear-gradient(90deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "redtoPurple-horizontal": { + "redToPurpleHorizontalGradient": { "value": "linear-gradient(180deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "purpletoRed-diagonal": { + "purpleToRedDiagonalGradient": { "value": "linear-gradient(134deg, #2B0000 0%, #3D0610 26.04%, #5A1049 53.65%, #461881 100%)", "type": "color" }, - "pinkVioletBlue": { + "pinkToPurpleGradient": { "value": "linear-gradient(135deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)", "type": "color" }, - "orangeViolet": { + "orangeToPurpleGradient": { "value": "linear-gradient(90deg, #FD5807 0%, #BC1DA0 100%)", "type": "color" }, - "primaryDark": { + "primaryGradient": { "value": "radial-gradient(324.00% 100.00% at 100.00% 50.00%, #24003A 0%, #00000000 100%)", "type": "color" } diff --git a/src/theme/colors.ts b/src/theme/colors.ts index c8facfa..24bbf1f 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -10,10 +10,9 @@ const chakraColors = _.mapValues(RGTokens.colors, (colors) => _.mapValues(colors, (color: colorTokenInterface) => color.value) ); -console.log(chakraColors); - const Colors = { ...chakraColors, + ...chakraColors.base, headerGradient: { 500: 'linear-gradient(96.18deg, rgb(255, 56, 100) -44.29%, rgb(139, 29, 186) 53.18%, rgb(67, 83, 223) 150.65%)', }, @@ -22,4 +21,6 @@ const Colors = { }, }; +console.log(Colors); + export default Colors; diff --git a/src/theme/gradientStyles.ts b/src/theme/gradientStyles.ts index caf1f00..168dfd1 100644 --- a/src/theme/gradientStyles.ts +++ b/src/theme/gradientStyles.ts @@ -1,14 +1,11 @@ import RGTokens from 'components/tokens'; import _ from 'lodash'; -interface gradientTokenInterface { - value: string; - type: string; -} +console.log(RGTokens.gradient); -const chakraGradients = _.mapValues(RGTokens.gradient, (gradients) => - _.mapValues(gradients, (gradient: gradientTokenInterface) => gradient.value) -); +const chakraGradients = _.mapValues(RGTokens.gradient, (gradient) => ({ + bgGradient: gradient.value, +})); console.log(chakraGradients); @@ -40,4 +37,6 @@ const GradientStyles = { }, }; +console.log(GradientStyles); + export default GradientStyles; From 12472d4cfd33bcb79df85d9f32e2aaa18830a0ee Mon Sep 17 00:00:00 2001 From: memosys Date: Thu, 2 Nov 2023 17:16:58 +0530 Subject: [PATCH 22/24] added token workflow --- .github/workflows/tokens.yml | 28 ++++++++++++++++++++++++++++ .vscode/settings.json | 5 ++++- src/theme/colors.ts | 8 -------- src/theme/gradientStyles.ts | 6 ------ 4 files changed, 32 insertions(+), 15 deletions(-) create mode 100644 .github/workflows/tokens.yml diff --git a/.github/workflows/tokens.yml b/.github/workflows/tokens.yml new file mode 100644 index 0000000..1531a25 --- /dev/null +++ b/.github/workflows/tokens.yml @@ -0,0 +1,28 @@ +name: Figma Token/Theme Sync +on: + push +jobs: + change-and-push: + runs-on: ubuntu-latest + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Setup Node v18 + uses: actions/setup-node@v2 + with: + node-version: 18 + + - name: Transform Tokens + run: | + npx token-transformer ./src/tokens/tokens.json ./src/tokens/tokens-output.json + rm ./src/tokens/tokens.json + mv ./src/tokens/tokens-output.json ./src/tokens/tokens.json + + + - name: Commit and push changes + uses: devops-infra/action-commit-push@master + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + commit_message: "Token Transformation from Token Studio format to JSON" + diff --git a/.vscode/settings.json b/.vscode/settings.json index 4c504d2..3975db1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,5 +7,8 @@ "eslint.validate": [ "javascript", "typescript" - ] + ], + "[yaml]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } \ No newline at end of file diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 24bbf1f..6657f9d 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -13,14 +13,6 @@ const chakraColors = _.mapValues(RGTokens.colors, (colors) => const Colors = { ...chakraColors, ...chakraColors.base, - headerGradient: { - 500: 'linear-gradient(96.18deg, rgb(255, 56, 100) -44.29%, rgb(139, 29, 186) 53.18%, rgb(67, 83, 223) 150.65%)', - }, - rgGradient: { - 500: 'linear-gradient(95.58deg, #FF3864 0%, #8B1DBA 53.65%, #4353DF 100%)', - }, }; -console.log(Colors); - export default Colors; diff --git a/src/theme/gradientStyles.ts b/src/theme/gradientStyles.ts index 168dfd1..4ba8321 100644 --- a/src/theme/gradientStyles.ts +++ b/src/theme/gradientStyles.ts @@ -1,14 +1,10 @@ import RGTokens from 'components/tokens'; import _ from 'lodash'; -console.log(RGTokens.gradient); - const chakraGradients = _.mapValues(RGTokens.gradient, (gradient) => ({ bgGradient: gradient.value, })); -console.log(chakraGradients); - const GradientStyles = { ...chakraGradients, primaryGradient: { @@ -37,6 +33,4 @@ const GradientStyles = { }, }; -console.log(GradientStyles); - export default GradientStyles; From 8ae2f92b77432bc648b4b8ea097b7c7afba0f489 Mon Sep 17 00:00:00 2001 From: memosys Date: Fri, 3 Nov 2023 15:28:52 +0530 Subject: [PATCH 23/24] moved location --- src/theme/gradientStyles.ts | 2 +- src/{components => theme}/tokens/index.ts | 0 src/{components => theme}/tokens/token-output.json | 0 src/{components => theme}/tokens/tokens.json | 0 src/{components => theme}/tokens/tokens.md | 0 5 files changed, 1 insertion(+), 1 deletion(-) rename src/{components => theme}/tokens/index.ts (100%) rename src/{components => theme}/tokens/token-output.json (100%) rename src/{components => theme}/tokens/tokens.json (100%) rename src/{components => theme}/tokens/tokens.md (100%) diff --git a/src/theme/gradientStyles.ts b/src/theme/gradientStyles.ts index 4ba8321..2455efd 100644 --- a/src/theme/gradientStyles.ts +++ b/src/theme/gradientStyles.ts @@ -1,5 +1,5 @@ -import RGTokens from 'components/tokens'; import _ from 'lodash'; +import RGTokens from './tokens'; const chakraGradients = _.mapValues(RGTokens.gradient, (gradient) => ({ bgGradient: gradient.value, diff --git a/src/components/tokens/index.ts b/src/theme/tokens/index.ts similarity index 100% rename from src/components/tokens/index.ts rename to src/theme/tokens/index.ts diff --git a/src/components/tokens/token-output.json b/src/theme/tokens/token-output.json similarity index 100% rename from src/components/tokens/token-output.json rename to src/theme/tokens/token-output.json diff --git a/src/components/tokens/tokens.json b/src/theme/tokens/tokens.json similarity index 100% rename from src/components/tokens/tokens.json rename to src/theme/tokens/tokens.json diff --git a/src/components/tokens/tokens.md b/src/theme/tokens/tokens.md similarity index 100% rename from src/components/tokens/tokens.md rename to src/theme/tokens/tokens.md From 7954e996f06905923766557ef7cc62279e995ee8 Mon Sep 17 00:00:00 2001 From: memosys Date: Fri, 3 Nov 2023 15:36:29 +0530 Subject: [PATCH 24/24] minor path fix --- src/theme/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 6657f9d..5a5bde3 100644 --- a/src/theme/colors.ts +++ b/src/theme/colors.ts @@ -1,5 +1,5 @@ import _ from 'lodash'; -import RGTokens from 'components/tokens'; +import RGTokens from './tokens'; interface colorTokenInterface { value: string;