From bbb77ee82b11689da2819e824501bdc94d9b029b Mon Sep 17 00:00:00 2001 From: Pranay Kothapalli Date: Sun, 29 Oct 2023 11:40:29 +0530 Subject: [PATCH] Fix Blockquote imports + Eslint (#83) --- .eslintrc.cjs | 34 +- .husky/pre-commit | 4 + package-lock.json | 22 + package.json | 4 +- postcss.config.js | 10 +- rollup.config.js | 2 +- scripts/tokenGen/generateAccentTokens.js | 45 +- scripts/tokenGen/generateCSSTokens.js | 39 +- scripts/tokenGen/index.js | 20 +- src/colors/crimson.js | 50 +-- src/colors/gray.js | 54 +-- src/colors/index.js | 34 +- src/colors/mauve.js | 60 +-- src/colors/olive.js | 58 +-- src/colors/pink.js | 58 +-- src/colors/plum.js | 58 +-- src/colors/purple.js | 58 +-- src/colors/red.js | 56 ++- src/colors/ruby.js | 54 +-- src/colors/sage.js | 58 +-- src/colors/sand.js | 58 +-- src/colors/slate.js | 56 ++- src/colors/tomato.js | 58 +-- src/components/ui/Accordion/Accordion.js | 2 +- src/components/ui/Avatar/Avatar.js | 2 +- src/components/ui/BlockQuote/BlockQuote.js | 12 +- .../ui/BlockQuote/BlockQuote_sb.stories.js | 39 +- src/components/ui/Code/Code.js | 2 +- src/components/ui/Code/Code.stories.js | 2 +- src/components/ui/Heading/Heading.js | 2 +- src/components/ui/Kbd/Kbd.js | 9 +- src/components/ui/Separator/Separator.js | 2 +- src/components/ui/Strong/Strong.js | 10 +- src/components/ui/Tabs/Tabs.stories.js | 4 +- src/components/ui/TextArea/TextArea.js | 2 +- src/examples/Colors/Colors.stories.js | 61 ++- src/examples/Colors/ColorsTemplate.js | 396 +++++++++--------- src/index.js | 2 + styles/jsTokens/base.tokens.js | 2 +- styles/themes/default.css | 2 +- 40 files changed, 765 insertions(+), 736 deletions(-) create mode 100755 .husky/pre-commit diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 20c896a5..09b64b76 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -20,13 +20,41 @@ module.exports = { ], 'rules': { 'react/react-in-jsx-scope': 'off', - 'no-multiple-empty-lines': ['error', {'max': 1, 'maxEOF': 1}], - 'indent': ['error', 4], + 'no-multiple-empty-lines': ['warn', {'max': 1, 'maxEOF': 1}], + 'indent': ['warn', 4], + 'key-spacing': ['warn', {'beforeColon': false, 'afterColon': true}], + 'no-trailing-spaces': 'warn', + 'no-mixed-spaces-and-tabs': 'warn', + 'no-multi-spaces': 'warn', + 'no-unexpected-multiline': 'warn', + 'no-unused-vars': 'warn', + 'no-var': 'warn', + 'prefer-const': 'warn', + 'space-before-blocks': 'warn', + 'space-before-function-paren': ['warn', 'never'], + 'space-in-parens': 'warn', + 'spaced-comment': 'warn', + 'arrow-spacing': 'warn', + 'comma-style': 'warn', + 'eol-last': 'warn', + 'func-call-spacing': 'warn', + 'comma-spacing': ['warn', {'before': false, 'after': true}], + 'quotes': ['warn', 'single'], + 'react/prop-types': 'off', + 'prefer-rest-params': 'off', + 'no-func-assign': 'off', + 'no-invalid-this': 'off', + 'react/no-unknown-property': 'off', + 'camelcase': 'off', + 'react/jsx-key': 'off', + 'require-jsdoc': 'off', + 'guard-for-in': 'off', + 'no-empty-pattern': 'off', // ignore long strings 'max-len': 'off', 'semi': [ - 'error', + 'warn', 'always', ], }, diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..75fac8e1 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +npm run lint diff --git a/package-lock.json b/package-lock.json index 2142c128..f482bf3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", + "husky": "^8.0.3", "postcss": "^8.4.29", "prop-types": "^15.8.1", "rollup": "^3.29.0", @@ -12010,6 +12011,21 @@ "node": ">=10.17.0" } }, + "node_modules/husky": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", + "dev": true, + "bin": { + "husky": "lib/bin.js" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/typicode" + } + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -27351,6 +27367,12 @@ "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==", "dev": true }, + "husky": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", + "dev": true + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", diff --git a/package.json b/package.json index 1cfdac0a..c9945fa7 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "build-storybook": "storybook build", "build": "rollup -c", "generate-tokens": "node ./scripts/tokenGen", - "publish": "npm publish --access public" + "publish": "npm publish --access public", + "lint": "eslint --ext .js,.jsx,.ts,.tsx . --fix" }, "repository": { "type": "git", @@ -51,6 +52,7 @@ "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", + "husky": "^8.0.3", "postcss": "^8.4.29", "prop-types": "^15.8.1", "rollup": "^3.29.0", diff --git a/postcss.config.js b/postcss.config.js index 27db905d..6effb36d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,7 @@ module.exports = { plugins: { - 'postcss-import': {}, - tailwindcss: {}, - autoprefixer: {}, - } - } \ No newline at end of file + 'postcss-import': {}, + 'tailwindcss': {}, + 'autoprefixer': {}, + }, +}; diff --git a/rollup.config.js b/rollup.config.js index b3aed1aa..8df1e0ed 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -47,7 +47,7 @@ export default { onwarn(warning, warn) { if ( warning.code === 'MODULE_LEVEL_DIRECTIVE' && - warning.message.includes(`use client`) + warning.message.includes('use client') ) { // Ignore this warning return; diff --git a/scripts/tokenGen/generateAccentTokens.js b/scripts/tokenGen/generateAccentTokens.js index 09aea7fb..f02a21b3 100644 --- a/scripts/tokenGen/generateAccentTokens.js +++ b/scripts/tokenGen/generateAccentTokens.js @@ -20,43 +20,36 @@ const COLOR_PREFIX = '--rad-ui-color-'; */ - -let accentColor = colors.red; -let jsVariables = {}; +const accentColor = colors.red; +const jsVariables = {}; const generateAccentTokens = (theme) => { - let cssVariables = []; + const cssVariables = []; const color = accentColor; - let accentStyleSheet = ""; - - for(const colorObj in colors){ - - let colorName = colorObj - let accentColors = colors[colorObj][theme]; - console.log(accentColors) + let accentStyleSheet = ''; + + for (const colorObj in colors) { + const colorName = colorObj; + const accentColors = colors[colorObj][theme]; + console.log(accentColors); - //generate data-accent-color css styles + // generate data-accent-color css styles let cssVariableName = `[data-accent-color=${colorObj}]{`; - cssVariableName += `\n`; + cssVariableName += '\n'; // plug in variables here - for(const [shadeName, shadeValue] of Object.entries(accentColors)){ + for (const [shadeName, shadeValue] of Object.entries(accentColors)) { cssVariableName += `${COLOR_PREFIX}accent-${shadeName}: var(${COLOR_PREFIX}${colorName}-${shadeName});`; - cssVariableName += `\n`; - + cssVariableName += '\n'; } // close css variable - cssVariableName += `}`; - cssVariableName += `\n`; - console.log(cssVariableName) + cssVariableName += '}'; + cssVariableName += '\n'; + console.log(cssVariableName); accentStyleSheet += cssVariableName; - - - } - return accentStyleSheet -} - + return accentStyleSheet; +}; -export default generateAccentTokens; \ No newline at end of file +export default generateAccentTokens; diff --git a/scripts/tokenGen/generateCSSTokens.js b/scripts/tokenGen/generateCSSTokens.js index f27d154c..85ed555d 100644 --- a/scripts/tokenGen/generateCSSTokens.js +++ b/scripts/tokenGen/generateCSSTokens.js @@ -2,35 +2,32 @@ import colors from '../../src/colors/index.js'; const COLOR_PREFIX = '--rad-ui-color-'; // Function to generate CSS variables based on the theme -let jsVariables = {}; +const jsVariables = {}; function generateCSSTokens(theme) { let cssVariables = []; - - + // Loop through the colors for (const [colorName, colorShades] of Object.entries(colors)) { - // Loop through the shades - for (const [shadeName, shadeValue] of Object.entries(colorShades[theme])) { + // Loop through the shades + for (const [shadeName, shadeValue] of Object.entries(colorShades[theme])) { // Create the CSS variable name - const cssVariableName = `${COLOR_PREFIX}${colorName}-${shadeName}`; - // Add the CSS variable to the array - cssVariables.push(`${cssVariableName}: ${shadeValue};`); - - // Create the JS variable name - const jsVariableName = `${colorName}`; - // Add the JS variable to the object - jsVariables[jsVariableName] = jsVariables[jsVariableName] || {}; - jsVariables[jsVariableName][shadeName] = `var(${cssVariableName})`; - - } + const cssVariableName = `${COLOR_PREFIX}${colorName}-${shadeName}`; + // Add the CSS variable to the array + cssVariables.push(`${cssVariableName}: ${shadeValue};`); + + // Create the JS variable name + const jsVariableName = `${colorName}`; + // Add the JS variable to the object + jsVariables[jsVariableName] = jsVariables[jsVariableName] || {}; + jsVariables[jsVariableName][shadeName] = `var(${cssVariableName})`; + } } // Return the CSS variables as a string - cssVariables= cssVariables.join("\n"); - - return {cssVariables, jsVariables} - } + cssVariables= cssVariables.join('\n'); + return {cssVariables, jsVariables}; +} - export default generateCSSTokens; \ No newline at end of file +export default generateCSSTokens; diff --git a/scripts/tokenGen/index.js b/scripts/tokenGen/index.js index ca060cc3..baccd0f6 100644 --- a/scripts/tokenGen/index.js +++ b/scripts/tokenGen/index.js @@ -1,28 +1,24 @@ -import fs from "fs" +import fs from 'fs'; import colors from '../../src/colors/index.js'; -import generateCSSTokens from "./generateCSSTokens.js" -import generateAccentTokens from "./generateAccentTokens.js" +import generateCSSTokens from './generateCSSTokens.js'; +import generateAccentTokens from './generateAccentTokens.js'; // Generate CSS variables for the light theme let jsVariables = {}; - -const {cssVariables: lightThemeCss, jsVariables:lightThemeJSTokens} = generateCSSTokens("light"); -jsVariables = {...jsVariables, ...lightThemeJSTokens} - - +const {cssVariables: lightThemeCss, jsVariables: lightThemeJSTokens} = generateCSSTokens('light'); +jsVariables = {...jsVariables, ...lightThemeJSTokens}; // Generate CSS variables for the dark theme -const {cssVariables: DarkThemeCss, jsVariables:DarkThemeJSTokens} = generateCSSTokens("dark"); -jsVariables = {...jsVariables, ...DarkThemeJSTokens} +const {cssVariables: DarkThemeCss, jsVariables: DarkThemeJSTokens} = generateCSSTokens('dark'); +jsVariables = {...jsVariables, ...DarkThemeJSTokens}; // Generate accent colors css -const accentTokens= generateAccentTokens("light"); - +const accentTokens= generateAccentTokens('light'); // Combine light and dark theme CSS const combinedCss = ` diff --git a/src/colors/crimson.js b/src/colors/crimson.js index 36c1cec9..5707b2d5 100644 --- a/src/colors/crimson.js +++ b/src/colors/crimson.js @@ -1,32 +1,32 @@ const crimson = { light: { - 50: "hsl(332, 100%, 99.4%)", - 100: "hsl(330, 100%, 98.4%)", - 200: "hsl(331, 85.6%, 96.6%)", - 300: "hsl(331, 78.1%, 94.2%)", - 400: "hsl(332, 72.1%, 91.1%)", - 500: "hsl(333, 67.0%, 86.7%)", - 600: "hsl(335, 63.5%, 80.4%)", - 700: "hsl(336, 62.3%, 72.9%)", - 800: "hsl(336, 80.0%, 57.8%)", - 900: "hsl(336, 71.3%, 52.8%)", - 950: "hsl(336, 75.0%, 45.5%)", - 1000: "hsl(332, 63.0%, 23.5%)", + 50: 'hsl(332, 100%, 99.4%)', + 100: 'hsl(330, 100%, 98.4%)', + 200: 'hsl(331, 85.6%, 96.6%)', + 300: 'hsl(331, 78.1%, 94.2%)', + 400: 'hsl(332, 72.1%, 91.1%)', + 500: 'hsl(333, 67.0%, 86.7%)', + 600: 'hsl(335, 63.5%, 80.4%)', + 700: 'hsl(336, 62.3%, 72.9%)', + 800: 'hsl(336, 80.0%, 57.8%)', + 900: 'hsl(336, 71.3%, 52.8%)', + 950: 'hsl(336, 75.0%, 45.5%)', + 1000: 'hsl(332, 63.0%, 23.5%)', }, dark: { - 50: "hsl(335, 20.0%, 9.6%)", - 100: "hsl(336, 32.3%, 12.2%)", - 200: "hsl(336, 40.2%, 16.0%)", - 300: "hsl(336, 44.4%, 18.5%)", - 400: "hsl(336, 48.4%, 21.3%)", - 500: "hsl(336, 53.9%, 25.5%)", - 600: "hsl(336, 62.7%, 32.8%)", - 700: "hsl(336, 80.0%, 45.1%)", - 800: "hsl(336, 80.0%, 57.8%)", - 900: "hsl(339, 87.0%, 67.2%)", - 950: "hsl(341, 100%, 76.0%)", - 1000: "hsl(330, 90.0%, 91.0%)", + 50: 'hsl(335, 20.0%, 9.6%)', + 100: 'hsl(336, 32.3%, 12.2%)', + 200: 'hsl(336, 40.2%, 16.0%)', + 300: 'hsl(336, 44.4%, 18.5%)', + 400: 'hsl(336, 48.4%, 21.3%)', + 500: 'hsl(336, 53.9%, 25.5%)', + 600: 'hsl(336, 62.7%, 32.8%)', + 700: 'hsl(336, 80.0%, 45.1%)', + 800: 'hsl(336, 80.0%, 57.8%)', + 900: 'hsl(339, 87.0%, 67.2%)', + 950: 'hsl(341, 100%, 76.0%)', + 1000: 'hsl(330, 90.0%, 91.0%)', }, }; -export default crimson \ No newline at end of file +export default crimson; diff --git a/src/colors/gray.js b/src/colors/gray.js index 92b047d1..9f1db418 100644 --- a/src/colors/gray.js +++ b/src/colors/gray.js @@ -1,32 +1,32 @@ const gray = { light: { - 50: "hsl(0, 0%, 99.0%)", - 100: "hsl(0, 0%, 97.5%)", - 200: "hsl(0, 0%, 94.6%)", - 300: "hsl(0, 0%, 92.0%)", - 400: "hsl(0, 0%, 89.5%)", - 500: "hsl(0, 0%, 86.8%)", - 600: "hsl(0, 0%, 83.0%)", - 700: "hsl(0, 0%, 73.2%)", - 800: "hsl(0, 0%, 55.2%)", - 900: "hsl(0, 0%, 50.3%)", - 950: "hsl(0, 0%, 39.3%)", - 1000: "hsl(0, 0%, 12.5%)", + 50: 'hsl(0, 0%, 99.0%)', + 100: 'hsl(0, 0%, 97.5%)', + 200: 'hsl(0, 0%, 94.6%)', + 300: 'hsl(0, 0%, 92.0%)', + 400: 'hsl(0, 0%, 89.5%)', + 500: 'hsl(0, 0%, 86.8%)', + 600: 'hsl(0, 0%, 83.0%)', + 700: 'hsl(0, 0%, 73.2%)', + 800: 'hsl(0, 0%, 55.2%)', + 900: 'hsl(0, 0%, 50.3%)', + 950: 'hsl(0, 0%, 39.3%)', + 1000: 'hsl(0, 0%, 12.5%)', }, dark: { - 50: "hsl(0, 0%, 9.5%)", - 100: "hsl(0, 0%, 10.5%)", - 200: "hsl(0, 0%, 15.8%)", - 300: "hsl(0, 0%, 18.9%)", - 400: "hsl(0, 0%, 21.7%)", - 500: "hsl(0, 0%, 24.7%)", - 600: "hsl(0, 0%, 29.1%)", - 700: "hsl(0, 0%, 37.5%)", - 800: "hsl(0, 0%, 43.0%)", - 900: "hsl(0, 0%, 50.7%)", - 950: "hsl(0, 0%, 69.5%)", - 1000: "hsl(0, 0%, 93.5%)", - } -} + 50: 'hsl(0, 0%, 9.5%)', + 100: 'hsl(0, 0%, 10.5%)', + 200: 'hsl(0, 0%, 15.8%)', + 300: 'hsl(0, 0%, 18.9%)', + 400: 'hsl(0, 0%, 21.7%)', + 500: 'hsl(0, 0%, 24.7%)', + 600: 'hsl(0, 0%, 29.1%)', + 700: 'hsl(0, 0%, 37.5%)', + 800: 'hsl(0, 0%, 43.0%)', + 900: 'hsl(0, 0%, 50.7%)', + 950: 'hsl(0, 0%, 69.5%)', + 1000: 'hsl(0, 0%, 93.5%)', + }, +}; -export default gray \ No newline at end of file +export default gray; diff --git a/src/colors/index.js b/src/colors/index.js index 198f3493..43882db9 100644 --- a/src/colors/index.js +++ b/src/colors/index.js @@ -6,8 +6,7 @@ import sage from './sage.js'; import olive from './olive.js'; import sand from './sand.js'; - -// +// import tomato from './tomato.js'; import red from './red.js'; @@ -18,20 +17,19 @@ import plum from './plum.js'; import purple from './purple.js'; const colors = { - gray:gray, - mauve:mauve, - slate:slate, - sage:sage, - olive:olive, - sand:sand, - tomato:tomato, - red:red, - ruby:ruby, - crimson:crimson, - pink:pink, - plum:plum, - purple:purple, -} - + gray: gray, + mauve: mauve, + slate: slate, + sage: sage, + olive: olive, + sand: sand, + tomato: tomato, + red: red, + ruby: ruby, + crimson: crimson, + pink: pink, + plum: plum, + purple: purple, +}; -export default colors; \ No newline at end of file +export default colors; diff --git a/src/colors/mauve.js b/src/colors/mauve.js index b3455c53..f189c0c7 100644 --- a/src/colors/mauve.js +++ b/src/colors/mauve.js @@ -1,33 +1,33 @@ const mauve = { - light:{ - 50: "hsl(300, 26.0%, 99.0%)", - 100: "hsl(270, 20.0%, 98.0%)", - 200: "hsl(267, 13.8%, 95.3%)", - 300: "hsl(265, 12.2%, 92.7%)", - 400: "hsl(263, 11.6%, 90.3%)", - 500: "hsl(261, 11.1%, 87.7%)", - 600: "hsl(257, 10.8%, 84.3%)", - 700: "hsl(249, 10.4%, 75.5%)", - 800: "hsl(252, 6.0%, 57.3%)", - 900: "hsl(250, 5.0%, 52.3%)", - 950: "hsl(252, 5.0%, 40.7%)", - 1000: "hsl(260, 10.0%, 13.5%)", - + light: { + 50: 'hsl(300, 26.0%, 99.0%)', + 100: 'hsl(270, 20.0%, 98.0%)', + 200: 'hsl(267, 13.8%, 95.3%)', + 300: 'hsl(265, 12.2%, 92.7%)', + 400: 'hsl(263, 11.6%, 90.3%)', + 500: 'hsl(261, 11.1%, 87.7%)', + 600: 'hsl(257, 10.8%, 84.3%)', + 700: 'hsl(249, 10.4%, 75.5%)', + 800: 'hsl(252, 6.0%, 57.3%)', + 900: 'hsl(250, 5.0%, 52.3%)', + 950: 'hsl(252, 5.0%, 40.7%)', + 1000: 'hsl(260, 10.0%, 13.5%)', + + }, + dark: { + 50: 'hsl(300, 5.0%, 9.5%)', + 100: 'hsl(300, 7.1%, 11.0%)', + 200: 'hsl(290, 6.2%, 16.2%)', + 300: 'hsl(285, 5.8%, 19.5%)', + 400: 'hsl(280, 5.6%, 22.4%)', + 500: 'hsl(276, 5.4%, 25.7%)', + 600: 'hsl(269, 5.3%, 30.3%)', + 700: 'hsl(258, 5.0%, 39.2%)', + 800: 'hsl(250, 5.0%, 45.0%)', + 900: 'hsl(252, 4.3%, 52.3%)', + 950: 'hsl(250, 6.0%, 70.5%)', + 1000: 'hsl(240, 7.0%, 93.8%)', }, - dark:{ - 50:"hsl(300, 5.0%, 9.5%)", - 100:"hsl(300, 7.1%, 11.0%)", - 200:"hsl(290, 6.2%, 16.2%)", - 300:"hsl(285, 5.8%, 19.5%)", - 400:"hsl(280, 5.6%, 22.4%)", - 500:"hsl(276, 5.4%, 25.7%)", - 600:"hsl(269, 5.3%, 30.3%)", - 700:"hsl(258, 5.0%, 39.2%)", - 800:"hsl(250, 5.0%, 45.0%)", - 900:"hsl(252, 4.3%, 52.3%)", - 950:"hsl(250, 6.0%, 70.5%)", - 1000:"hsl(240, 7.0%, 93.8%)", - } -} +}; -export default mauve \ No newline at end of file +export default mauve; diff --git a/src/colors/olive.js b/src/colors/olive.js index b3ce6889..ce50f6f1 100644 --- a/src/colors/olive.js +++ b/src/colors/olive.js @@ -1,32 +1,32 @@ const olive = { - light:{ - 50: "hsl(110, 20.0%, 99.0%)", - 100: "hsl(120, 16.7%, 97.6%)", - 200: "hsl(118, 8.4%, 94.8%)", - 300: "hsl(116, 6.0%, 92.1%)", - 400: "hsl(115, 4.9%, 89.4%)", - 500: "hsl(113, 4.2%, 86.5%)", - 600: "hsl(111, 3.6%, 82.6%)", - 700: "hsl(105, 2.9%, 72.9%)", - 800: "hsl(110, 3.0%, 54.5%)", - 900: "hsl(105, 2.7%, 49.4%)", - 950: "hsl(110, 3.0%, 38.5%)", - 1000: "hsl(110, 8.0%, 12.0%)", + light: { + 50: 'hsl(110, 20.0%, 99.0%)', + 100: 'hsl(120, 16.7%, 97.6%)', + 200: 'hsl(118, 8.4%, 94.8%)', + 300: 'hsl(116, 6.0%, 92.1%)', + 400: 'hsl(115, 4.9%, 89.4%)', + 500: 'hsl(113, 4.2%, 86.5%)', + 600: 'hsl(111, 3.6%, 82.6%)', + 700: 'hsl(105, 2.9%, 72.9%)', + 800: 'hsl(110, 3.0%, 54.5%)', + 900: 'hsl(105, 2.7%, 49.4%)', + 950: 'hsl(110, 3.0%, 38.5%)', + 1000: 'hsl(110, 8.0%, 12.0%)', }, - dark:{ - 50: "hsl(110, 5.0%, 9.2%)", - 100: "hsl(120, 5.7%, 10.4%)", - 200: "hsl(120, 4.3%, 15.4%)", - 300: "hsl(120, 3.9%, 18.5%)", - 400: "hsl(120, 3.6%, 21.2%)", - 500: "hsl(120, 3.3%, 24.3%)", - 600: "hsl(120, 3.0%, 28.7%)", - 700: "hsl(120, 2.6%, 37.1%)", - 800: "hsl(110, 6.0%, 41.5%)", - 900: "hsl(106, 4.6%, 49.3%)", - 950: "hsl(110, 5.0%, 68.8%)", - 1000: "hsl(110, 7.0%, 93.0%)", - } -} + dark: { + 50: 'hsl(110, 5.0%, 9.2%)', + 100: 'hsl(120, 5.7%, 10.4%)', + 200: 'hsl(120, 4.3%, 15.4%)', + 300: 'hsl(120, 3.9%, 18.5%)', + 400: 'hsl(120, 3.6%, 21.2%)', + 500: 'hsl(120, 3.3%, 24.3%)', + 600: 'hsl(120, 3.0%, 28.7%)', + 700: 'hsl(120, 2.6%, 37.1%)', + 800: 'hsl(110, 6.0%, 41.5%)', + 900: 'hsl(106, 4.6%, 49.3%)', + 950: 'hsl(110, 5.0%, 68.8%)', + 1000: 'hsl(110, 7.0%, 93.0%)', + }, +}; -export default olive; \ No newline at end of file +export default olive; diff --git a/src/colors/pink.js b/src/colors/pink.js index 690d0ed7..934dc5a1 100644 --- a/src/colors/pink.js +++ b/src/colors/pink.js @@ -1,33 +1,33 @@ const pink = { - light:{ + light: { - 50: "hsl(322, 100%, 99.4%)", - 100: "hsl(323, 100%, 98.4%)", - 200: "hsl(323, 86.3%, 96.5%)", - 300: "hsl(323, 78.7%, 94.2%)", - 400: "hsl(323, 72.2%, 91.1%)", - 500: "hsl(323, 66.3%, 86.6%)", - 600: "hsl(323, 62.0%, 80.1%)", - 700: "hsl(323, 60.3%, 72.4%)", - 800: "hsl(322, 65.0%, 54.5%)", - 900: "hsl(322, 62.0%, 49.6%)", - 950: "hsl(322, 75.0%, 44.0%)", - 1000: "hsl(320, 70.0%, 23.2%)", + 50: 'hsl(322, 100%, 99.4%)', + 100: 'hsl(323, 100%, 98.4%)', + 200: 'hsl(323, 86.3%, 96.5%)', + 300: 'hsl(323, 78.7%, 94.2%)', + 400: 'hsl(323, 72.2%, 91.1%)', + 500: 'hsl(323, 66.3%, 86.6%)', + 600: 'hsl(323, 62.0%, 80.1%)', + 700: 'hsl(323, 60.3%, 72.4%)', + 800: 'hsl(322, 65.0%, 54.5%)', + 900: 'hsl(322, 62.0%, 49.6%)', + 950: 'hsl(322, 75.0%, 44.0%)', + 1000: 'hsl(320, 70.0%, 23.2%)', }, - dark:{ - 50: "hsl(318, 20.0%, 9.6%)", - 100: "hsl(318, 32.3%, 12.2%)", - 200:"hsl(318, 37.1%, 15.7%)", - 300: "hsl(318, 39.8%, 18.1%)", - 400: "hsl(318, 42.3%, 20.8%)", - 500: "hsl(318, 45.8%, 24.9%)", - 600: "hsl(318, 51.2%, 32.2%)", - 700: "hsl(318, 60.0%, 46.1%)", - 800: "hsl(318, 65.0%, 54.5%)", - 900: "hsl(318, 71.5%, 63.2%)", - 950: "hsl(318, 90.0%, 75.0%)", - 1000: "hsl(318, 90.0%, 90.5%)", - } -} + dark: { + 50: 'hsl(318, 20.0%, 9.6%)', + 100: 'hsl(318, 32.3%, 12.2%)', + 200: 'hsl(318, 37.1%, 15.7%)', + 300: 'hsl(318, 39.8%, 18.1%)', + 400: 'hsl(318, 42.3%, 20.8%)', + 500: 'hsl(318, 45.8%, 24.9%)', + 600: 'hsl(318, 51.2%, 32.2%)', + 700: 'hsl(318, 60.0%, 46.1%)', + 800: 'hsl(318, 65.0%, 54.5%)', + 900: 'hsl(318, 71.5%, 63.2%)', + 950: 'hsl(318, 90.0%, 75.0%)', + 1000: 'hsl(318, 90.0%, 90.5%)', + }, +}; -export default pink; \ No newline at end of file +export default pink; diff --git a/src/colors/plum.js b/src/colors/plum.js index ae2bf593..30cc35dc 100644 --- a/src/colors/plum.js +++ b/src/colors/plum.js @@ -1,32 +1,32 @@ const plum = { - light:{ - 50: "hsl(292, 90.0%, 99.4%)", - 100: "hsl(300, 100%, 98.6%)", - 200: "hsl(299, 71.2%, 96.4%)", - 300: "hsl(299, 62.0%, 93.8%)", - 400: "hsl(298, 56.1%, 90.5%)", - 500: "hsl(296, 51.3%, 85.8%)", - 600: "hsl(295, 48.2%, 78.9%)", - 700: "hsl(292, 47.7%, 70.8%)", - 800: "hsl(292, 45.0%, 51.0%)", - 900: "hsl(292, 50.2%, 46.9%)", - 950: "hsl(292, 60.0%, 42.5%)", - 1000: "hsl(291, 57.0%, 23.2%)", + light: { + 50: 'hsl(292, 90.0%, 99.4%)', + 100: 'hsl(300, 100%, 98.6%)', + 200: 'hsl(299, 71.2%, 96.4%)', + 300: 'hsl(299, 62.0%, 93.8%)', + 400: 'hsl(298, 56.1%, 90.5%)', + 500: 'hsl(296, 51.3%, 85.8%)', + 600: 'hsl(295, 48.2%, 78.9%)', + 700: 'hsl(292, 47.7%, 70.8%)', + 800: 'hsl(292, 45.0%, 51.0%)', + 900: 'hsl(292, 50.2%, 46.9%)', + 950: 'hsl(292, 60.0%, 42.5%)', + 1000: 'hsl(291, 57.0%, 23.2%)', }, - dark:{ - 50: "hsl(301, 20.0%, 9.4%)", - 100: "hsl(300, 28.8%, 11.6%)", - 200: "hsl(299, 31.8%, 15.5%)", - 300: "hsl(298, 33.4%, 18.3%)", - 400: "hsl(297, 34.6%, 21.0%)", - 500: "hsl(296, 36.0%, 25.1%)", - 600: "hsl(295, 37.9%, 32.7%)", - 700: "hsl(292, 40.2%, 47.8%)", - 800: "hsl(292, 45.0%, 51.0%)", - 900: "hsl(291, 51.2%, 60.2%)", - 950: "hsl(290, 70.0%, 74.0%)", - 1000: "hsl(300, 60.0%, 89.5%)", - } -} + dark: { + 50: 'hsl(301, 20.0%, 9.4%)', + 100: 'hsl(300, 28.8%, 11.6%)', + 200: 'hsl(299, 31.8%, 15.5%)', + 300: 'hsl(298, 33.4%, 18.3%)', + 400: 'hsl(297, 34.6%, 21.0%)', + 500: 'hsl(296, 36.0%, 25.1%)', + 600: 'hsl(295, 37.9%, 32.7%)', + 700: 'hsl(292, 40.2%, 47.8%)', + 800: 'hsl(292, 45.0%, 51.0%)', + 900: 'hsl(291, 51.2%, 60.2%)', + 950: 'hsl(290, 70.0%, 74.0%)', + 1000: 'hsl(300, 60.0%, 89.5%)', + }, +}; -export default plum \ No newline at end of file +export default plum; diff --git a/src/colors/purple.js b/src/colors/purple.js index cabf2ae3..c7d88b7e 100644 --- a/src/colors/purple.js +++ b/src/colors/purple.js @@ -1,32 +1,32 @@ const purple = { - light:{ - 50: "hsl(280, 65.0%, 99.4%)", - 100: "hsl(276, 100%, 99.0%)", - 200: "hsl(276, 83.1%, 97.0%)", - 300: "hsl(275, 76.4%, 94.7%)", - 400: "hsl(275, 70.8%, 91.8%)", - 500: "hsl(274, 65.4%, 87.8%)", - 600: "hsl(273, 61.0%, 81.7%)", - 700: "hsl(272, 60.0%, 73.5%)", - 800: "hsl(272, 51.0%, 54.0%)", - 900: "hsl(272, 46.8%, 50.3%)", - 950: "hsl(272, 50.0%, 45.8%)", - 1000: "hsl(270, 50.0%, 25.0%)", + light: { + 50: 'hsl(280, 65.0%, 99.4%)', + 100: 'hsl(276, 100%, 99.0%)', + 200: 'hsl(276, 83.1%, 97.0%)', + 300: 'hsl(275, 76.4%, 94.7%)', + 400: 'hsl(275, 70.8%, 91.8%)', + 500: 'hsl(274, 65.4%, 87.8%)', + 600: 'hsl(273, 61.0%, 81.7%)', + 700: 'hsl(272, 60.0%, 73.5%)', + 800: 'hsl(272, 51.0%, 54.0%)', + 900: 'hsl(272, 46.8%, 50.3%)', + 950: 'hsl(272, 50.0%, 45.8%)', + 1000: 'hsl(270, 50.0%, 25.0%)', }, - dark:{ - 50: "hsl(284, 20.0%, 9.6%)", - 100: "hsl(284, 31.1%, 12.0%)", - 200: "hsl(282, 35.1%, 16.8%)", - 300: "hsl(281, 36.9%, 20.1%)", - 400: "hsl(280, 38.1%, 23.0%)", - 500: "hsl(278, 39.5%, 27.3%)", - 600: "hsl(276, 41.1%, 35.1%)", - 700: "hsl(272, 42.7%, 50.0%)", - 800: "hsl(272, 51.0%, 54.0%)", - 900: "hsl(271, 57.8%, 61.2%)", - 950: "hsl(270, 90.0%, 78.0%)", - 1000: "hsl(275, 75.0%, 91.5%)", - } -} + dark: { + 50: 'hsl(284, 20.0%, 9.6%)', + 100: 'hsl(284, 31.1%, 12.0%)', + 200: 'hsl(282, 35.1%, 16.8%)', + 300: 'hsl(281, 36.9%, 20.1%)', + 400: 'hsl(280, 38.1%, 23.0%)', + 500: 'hsl(278, 39.5%, 27.3%)', + 600: 'hsl(276, 41.1%, 35.1%)', + 700: 'hsl(272, 42.7%, 50.0%)', + 800: 'hsl(272, 51.0%, 54.0%)', + 900: 'hsl(271, 57.8%, 61.2%)', + 950: 'hsl(270, 90.0%, 78.0%)', + 1000: 'hsl(275, 75.0%, 91.5%)', + }, +}; -export default purple \ No newline at end of file +export default purple; diff --git a/src/colors/red.js b/src/colors/red.js index 855f46a1..8b38c15f 100644 --- a/src/colors/red.js +++ b/src/colors/red.js @@ -1,35 +1,33 @@ const red = { light: { - 50: "hsl(359, 100%, 99.4%)", - 100: "hsl(0, 100%, 98.4%)", - 200: "hsl(360, 100%, 96.8%)", - 300: "hsl(360, 97.9%, 94.8%)", - 400: "hsl(360, 90.2%, 91.9%)", - 500: "hsl(360, 81.7%, 87.8%)", - 600: "hsl(359, 74.2%, 81.7%)", - 700: "hsl(359, 69.5%, 74.3%)", - 800: "hsl(358, 75.0%, 59.0%)", - 900: "hsl(358, 67.4%, 54.6%)", - 950: "hsl(358, 65.0%, 47.0%)", - 1000: "hsl(350, 63.0%, 24.0%)", + 50: 'hsl(359, 100%, 99.4%)', + 100: 'hsl(0, 100%, 98.4%)', + 200: 'hsl(360, 100%, 96.8%)', + 300: 'hsl(360, 97.9%, 94.8%)', + 400: 'hsl(360, 90.2%, 91.9%)', + 500: 'hsl(360, 81.7%, 87.8%)', + 600: 'hsl(359, 74.2%, 81.7%)', + 700: 'hsl(359, 69.5%, 74.3%)', + 800: 'hsl(358, 75.0%, 59.0%)', + 900: 'hsl(358, 67.4%, 54.6%)', + 950: 'hsl(358, 65.0%, 47.0%)', + 1000: 'hsl(350, 63.0%, 24.0%)', }, dark: { - 50: "hsl(353, 23.0%, 9.8%)", - 100: "hsl(354, 30.2%, 12.4%)", - 200: "hsl(353, 40.8%, 16.4%)", - 300: "hsl(353, 46.3%, 19.2%)", - 400: "hsl(353, 51.2%, 22.1%)", - 500: "hsl(353, 57.3%, 26.2%)", - 600: "hsl(354, 65.7%, 33.2%)", - 700: "hsl(358, 75.0%, 47.1%)", - 800: "hsl(358, 75.0%, 59.0%)", - 900: "hsl(359, 84.8%, 67.6%)", - 950: "hsl(358, 100%, 76.0%)", - 1000: "hsl(350, 100%, 91.0%)", + 50: 'hsl(353, 23.0%, 9.8%)', + 100: 'hsl(354, 30.2%, 12.4%)', + 200: 'hsl(353, 40.8%, 16.4%)', + 300: 'hsl(353, 46.3%, 19.2%)', + 400: 'hsl(353, 51.2%, 22.1%)', + 500: 'hsl(353, 57.3%, 26.2%)', + 600: 'hsl(354, 65.7%, 33.2%)', + 700: 'hsl(358, 75.0%, 47.1%)', + 800: 'hsl(358, 75.0%, 59.0%)', + 900: 'hsl(359, 84.8%, 67.6%)', + 950: 'hsl(358, 100%, 76.0%)', + 1000: 'hsl(350, 100%, 91.0%)', + }, +}; - - } -} - -export default red; \ No newline at end of file +export default red; diff --git a/src/colors/ruby.js b/src/colors/ruby.js index 097badd7..993f34f2 100644 --- a/src/colors/ruby.js +++ b/src/colors/ruby.js @@ -1,32 +1,32 @@ const ruby = { light: { - 50: "hsl(348, 100%, 99.5%)", - 100: "hsl(345, 100%, 98.4%)", - 200: "hsl(345, 89.9%, 96.7%)", - 300: "hsl(346, 82.6%, 94.4%)", - 400: "hsl(346, 75.8%, 91.4%)", - 500: "hsl(347, 69.3%, 87.1%)", - 600: "hsl(348, 64.3%, 80.9%)", - 700: "hsl(348, 61.5%, 73.5%)", - 800: "hsl(348, 75.0%, 58.5%)", - 900: "hsl(347, 68.6%, 54.1%)", - 950: "hsl(345, 70.0%, 46.5%)", - 1000: "hsl(344, 63.0%, 24.0%)", + 50: 'hsl(348, 100%, 99.5%)', + 100: 'hsl(345, 100%, 98.4%)', + 200: 'hsl(345, 89.9%, 96.7%)', + 300: 'hsl(346, 82.6%, 94.4%)', + 400: 'hsl(346, 75.8%, 91.4%)', + 500: 'hsl(347, 69.3%, 87.1%)', + 600: 'hsl(348, 64.3%, 80.9%)', + 700: 'hsl(348, 61.5%, 73.5%)', + 800: 'hsl(348, 75.0%, 58.5%)', + 900: 'hsl(347, 68.6%, 54.1%)', + 950: 'hsl(345, 70.0%, 46.5%)', + 1000: 'hsl(344, 63.0%, 24.0%)', }, dark: { - 50: "hsl(343, 23.0%, 10.0%)", - 100: "hsl(349, 33.3%, 12.4%)", - 200: "hsl(348, 42.2%, 16.4%)", - 300: "hsl(348, 46.8%, 19.1%)", - 400: "hsl(348, 50.7%, 21.7%)", - 500: "hsl(348, 56.0%, 25.7%)", - 600: "hsl(348, 64.3%, 33.0%)", - 700: "hsl(348, 77.0%, 46.1%)", - 800: "hsl(348, 75.0%, 58.5%)", - 900: "hsl(349, 84.1%, 67.1%)", - 950: "hsl(348, 100%, 76.0%)", - 1000: "hsl(340, 95.0%, 91.0%)", - } -} + 50: 'hsl(343, 23.0%, 10.0%)', + 100: 'hsl(349, 33.3%, 12.4%)', + 200: 'hsl(348, 42.2%, 16.4%)', + 300: 'hsl(348, 46.8%, 19.1%)', + 400: 'hsl(348, 50.7%, 21.7%)', + 500: 'hsl(348, 56.0%, 25.7%)', + 600: 'hsl(348, 64.3%, 33.0%)', + 700: 'hsl(348, 77.0%, 46.1%)', + 800: 'hsl(348, 75.0%, 58.5%)', + 900: 'hsl(349, 84.1%, 67.1%)', + 950: 'hsl(348, 100%, 76.0%)', + 1000: 'hsl(340, 95.0%, 91.0%)', + }, +}; -export default ruby; \ No newline at end of file +export default ruby; diff --git a/src/colors/sage.js b/src/colors/sage.js index a0e241c1..09eb3a90 100644 --- a/src/colors/sage.js +++ b/src/colors/sage.js @@ -1,32 +1,32 @@ const sage = { - light:{ - 50:"hsl(155, 30.0%, 98.8%)", - 100:"hsl(150, 14.3%, 97.3%)", - 200:"hsl(150, 8.0%, 94.5%)", - 300:"hsl(150, 6.0%, 92.0%)", - 400:"hsl(150, 4.9%, 89.5%)", - 500:"hsl(150, 4.3%, 86.7%)", - 600:"hsl(150, 3.7%, 82.8%)", - 700:"hsl(150, 2.9%, 72.9%)", - 800:"hsl(155, 3.5%, 54.2%)", - 900:"hsl(158, 2.9%, 49.3%)", - 950:"hsl(155, 3.0%, 38.5%)", - 1000:"hsl(155, 12.0%, 11.5%)", + light: { + 50: 'hsl(155, 30.0%, 98.8%)', + 100: 'hsl(150, 14.3%, 97.3%)', + 200: 'hsl(150, 8.0%, 94.5%)', + 300: 'hsl(150, 6.0%, 92.0%)', + 400: 'hsl(150, 4.9%, 89.5%)', + 500: 'hsl(150, 4.3%, 86.7%)', + 600: 'hsl(150, 3.7%, 82.8%)', + 700: 'hsl(150, 2.9%, 72.9%)', + 800: 'hsl(155, 3.5%, 54.2%)', + 900: 'hsl(158, 2.9%, 49.3%)', + 950: 'hsl(155, 3.0%, 38.5%)', + 1000: 'hsl(155, 12.0%, 11.5%)', }, - dark:{ - 50: "hsl(155, 7.0%, 9.2%)", - 100: "hsl(150, 7.7%, 10.2%)", - 200: "hsl(150, 7.0%, 15.5%)", - 300: "hsl(152, 4.7%, 18.3%)", - 400: "hsl(153, 4.2%, 21.1%)", - 500: "hsl(153, 3.7%, 24.2%)", - 600: "hsl(154, 3.3%, 28.7%)", - 700: "hsl(156, 2.6%, 37.1%)", - 800: "hsl(155, 6.0%, 41.5%)", - 900: "hsl(157, 4.6%, 49.2%)", - 950: "hsl(155, 5.0%, 68.3%)", - 1000: "hsl(155, 7.0%, 93.0%)", - } -} + dark: { + 50: 'hsl(155, 7.0%, 9.2%)', + 100: 'hsl(150, 7.7%, 10.2%)', + 200: 'hsl(150, 7.0%, 15.5%)', + 300: 'hsl(152, 4.7%, 18.3%)', + 400: 'hsl(153, 4.2%, 21.1%)', + 500: 'hsl(153, 3.7%, 24.2%)', + 600: 'hsl(154, 3.3%, 28.7%)', + 700: 'hsl(156, 2.6%, 37.1%)', + 800: 'hsl(155, 6.0%, 41.5%)', + 900: 'hsl(157, 4.6%, 49.2%)', + 950: 'hsl(155, 5.0%, 68.3%)', + 1000: 'hsl(155, 7.0%, 93.0%)', + }, +}; -export default sage \ No newline at end of file +export default sage; diff --git a/src/colors/sand.js b/src/colors/sand.js index 585b804f..81c63c81 100644 --- a/src/colors/sand.js +++ b/src/colors/sand.js @@ -1,32 +1,32 @@ const sand = { - light:{ - 50: "hsl(50, 20.0%, 99.0%)", - 100: "hsl(60, 7.7%, 97.5%)", - 200: "hsl(59, 5.8%, 94.5%)", - 300: "hsl(58, 5.3%, 91.8%)", - 400: "hsl(57, 5.1%, 89.0%)", - 500: "hsl(56, 5.0%, 86.0%)", - 600: "hsl(54, 4.9%, 81.8%)", - 700: "hsl(51, 5.0%, 72.4%)", - 800: "hsl(60, 3.0%, 53.9%)", - 900: "hsl(60, 2.6%, 49.0%)", - 950: "hsl(50, 2.5%, 38.0%)", - 1000: "hsl(50, 8.0%, 12.0%)", + light: { + 50: 'hsl(50, 20.0%, 99.0%)', + 100: 'hsl(60, 7.7%, 97.5%)', + 200: 'hsl(59, 5.8%, 94.5%)', + 300: 'hsl(58, 5.3%, 91.8%)', + 400: 'hsl(57, 5.1%, 89.0%)', + 500: 'hsl(56, 5.0%, 86.0%)', + 600: 'hsl(54, 4.9%, 81.8%)', + 700: 'hsl(51, 5.0%, 72.4%)', + 800: 'hsl(60, 3.0%, 53.9%)', + 900: 'hsl(60, 2.6%, 49.0%)', + 950: 'hsl(50, 2.5%, 38.0%)', + 1000: 'hsl(50, 8.0%, 12.0%)', }, - dark:{ - 50:"hsl(60, 6.0%, 9.0%)", - 100: "hsl(60, 6.9%, 10.4%)", - 200: "hsl(60, 5.2%, 15.4%)", - 300: "hsl(60, 4.7%, 18.5%)", - 400: "hsl(60, 4.4%, 21.2%)", - 500: "hsl(60, 4.1%, 24.3%)", - 600: "hsl(60, 3.8%, 28.7%)", - 700: "hsl(60, 3.3%, 37.1%)", - 800: "hsl(60, 6.0%, 41.5%)", - 900: "hsl(60, 4.6%, 49.3%)", - 950: "hsl(60, 5.0%, 68.8%)", - 1000: "hsl(60, 7.0%, 93.0%)", - } -} + dark: { + 50: 'hsl(60, 6.0%, 9.0%)', + 100: 'hsl(60, 6.9%, 10.4%)', + 200: 'hsl(60, 5.2%, 15.4%)', + 300: 'hsl(60, 4.7%, 18.5%)', + 400: 'hsl(60, 4.4%, 21.2%)', + 500: 'hsl(60, 4.1%, 24.3%)', + 600: 'hsl(60, 3.8%, 28.7%)', + 700: 'hsl(60, 3.3%, 37.1%)', + 800: 'hsl(60, 6.0%, 41.5%)', + 900: 'hsl(60, 4.6%, 49.3%)', + 950: 'hsl(60, 5.0%, 68.8%)', + 1000: 'hsl(60, 7.0%, 93.0%)', + }, +}; -export default sand; \ No newline at end of file +export default sand; diff --git a/src/colors/slate.js b/src/colors/slate.js index 6e104fe2..0dd701c2 100644 --- a/src/colors/slate.js +++ b/src/colors/slate.js @@ -1,36 +1,34 @@ const slate = { light: { - 50: "hsl(240, 22.0%, 99.0%)", - 100: "hsl(240, 20.0%, 98.0%)", - 200: "hsl(239, 13.4%, 95.4%)", - 300: "hsl(238, 11.8%, 92.9%)", - 400: "hsl(237, 11.1%, 90.5%)", - 500: "hsl(236, 10.6%, 87.9%)", - 600: "hsl(234, 10.4%, 84.4%)", - 700: "hsl(231, 10.2%, 75.1%)", - 800: "hsl(230, 6.0%, 57.0%)", - 900: "hsl(227, 5.2%, 51.8%)", - 950: "hsl(227, 5.0%, 40.2%)", - 1000: "hsl(210, 12.0%, 12.5%)", + 50: 'hsl(240, 22.0%, 99.0%)', + 100: 'hsl(240, 20.0%, 98.0%)', + 200: 'hsl(239, 13.4%, 95.4%)', + 300: 'hsl(238, 11.8%, 92.9%)', + 400: 'hsl(237, 11.1%, 90.5%)', + 500: 'hsl(236, 10.6%, 87.9%)', + 600: 'hsl(234, 10.4%, 84.4%)', + 700: 'hsl(231, 10.2%, 75.1%)', + 800: 'hsl(230, 6.0%, 57.0%)', + 900: 'hsl(227, 5.2%, 51.8%)', + 950: 'hsl(227, 5.0%, 40.2%)', + 1000: 'hsl(210, 12.0%, 12.5%)', }, dark: { - 50: "hsl(240, 5.0%, 9.8%)", - 100: "hsl(240, 6.9%, 11.4%)", - 200: "hsl(227, 6.7%, 16.4%)", - 300: "hsl(222, 6.6%, 19.4%)", - 400: "hsl(218, 6.5%, 22.1%)", - 500: "hsl(214, 6.4%, 25.1%)", - 600: "hsl(209, 6.2%, 29.4%)", - 700: "hsl(202, 5.8%, 37.5%)", - 800: "hsl(220, 6.0%, 44.0%)", - 900: "hsl(218, 5.3%, 51.5%)", - 950: "hsl(220, 7.0%, 70.0%)", - 1000: "hsl(220, 7.0%, 93.5%)", + 50: 'hsl(240, 5.0%, 9.8%)', + 100: 'hsl(240, 6.9%, 11.4%)', + 200: 'hsl(227, 6.7%, 16.4%)', + 300: 'hsl(222, 6.6%, 19.4%)', + 400: 'hsl(218, 6.5%, 22.1%)', + 500: 'hsl(214, 6.4%, 25.1%)', + 600: 'hsl(209, 6.2%, 29.4%)', + 700: 'hsl(202, 5.8%, 37.5%)', + 800: 'hsl(220, 6.0%, 44.0%)', + 900: 'hsl(218, 5.3%, 51.5%)', + 950: 'hsl(220, 7.0%, 70.0%)', + 1000: 'hsl(220, 7.0%, 93.5%)', + }, - } - -} - +}; -export default slate \ No newline at end of file +export default slate; diff --git a/src/colors/tomato.js b/src/colors/tomato.js index ca51625f..1004ba2f 100644 --- a/src/colors/tomato.js +++ b/src/colors/tomato.js @@ -1,32 +1,32 @@ const tomato = { - light:{ - 50:"hsl(10, 100%, 99.4%)", - 100: "hsl(8, 100%, 98.4%)", - 200: "hsl(8, 100%, 96.6%)", - 300: "hsl(8, 100%, 94.3%)", - 400: "hsl(8, 92.8%, 91.0%)", - 500: "hsl(9, 84.7%, 86.3%)", - 600: "hsl(10, 77.3%, 79.5%)", - 700: "hsl(10, 71.6%, 71.0%)", - 800: "hsl(10, 78.0%, 54.0%)", - 900: "hsl(10, 71.4%, 49.4%)", - 950: "hsl(10, 82.0%, 42.0%)", - 1000: "hsl(8, 50.0%, 24.0%)", + light: { + 50: 'hsl(10, 100%, 99.4%)', + 100: 'hsl(8, 100%, 98.4%)', + 200: 'hsl(8, 100%, 96.6%)', + 300: 'hsl(8, 100%, 94.3%)', + 400: 'hsl(8, 92.8%, 91.0%)', + 500: 'hsl(9, 84.7%, 86.3%)', + 600: 'hsl(10, 77.3%, 79.5%)', + 700: 'hsl(10, 71.6%, 71.0%)', + 800: 'hsl(10, 78.0%, 54.0%)', + 900: 'hsl(10, 71.4%, 49.4%)', + 950: 'hsl(10, 82.0%, 42.0%)', + 1000: 'hsl(8, 50.0%, 24.0%)', }, - dark:{ - 50:"hsl(10, 23.0%, 9.4%)", - 100: "hsl(10, 39.0%, 11.6%)", - 200: "hsl(9, 48.3%, 15.5%)", - 300: "hsl(9, 53.0%, 18.1%)", - 400: "hsl(9, 57.0%, 20.7%)", - 500: "hsl(9, 61.8%, 24.5%)", - 600: "hsl(9, 68.4%, 31.1%)", - 700: "hsl(10, 80.4%, 43.9%)", - 800: "hsl(10, 78.0%, 54.0%)", - 900: "hsl(10, 88.4%, 64.1%)", - 950: "hsl(10, 100%, 72.0%)", - 1000: "hsl(10, 85.0%, 89.0%)", - } -} + dark: { + 50: 'hsl(10, 23.0%, 9.4%)', + 100: 'hsl(10, 39.0%, 11.6%)', + 200: 'hsl(9, 48.3%, 15.5%)', + 300: 'hsl(9, 53.0%, 18.1%)', + 400: 'hsl(9, 57.0%, 20.7%)', + 500: 'hsl(9, 61.8%, 24.5%)', + 600: 'hsl(9, 68.4%, 31.1%)', + 700: 'hsl(10, 80.4%, 43.9%)', + 800: 'hsl(10, 78.0%, 54.0%)', + 900: 'hsl(10, 88.4%, 64.1%)', + 950: 'hsl(10, 100%, 72.0%)', + 1000: 'hsl(10, 85.0%, 89.0%)', + }, +}; -export default tomato; \ No newline at end of file +export default tomato; diff --git a/src/components/ui/Accordion/Accordion.js b/src/components/ui/Accordion/Accordion.js index e95677ee..1b4f5a1c 100644 --- a/src/components/ui/Accordion/Accordion.js +++ b/src/components/ui/Accordion/Accordion.js @@ -1,7 +1,7 @@ 'use client'; import React from 'react'; -const Accordion = ({})=>{ +const Accordion = ({}) => { return
Click me
; }; diff --git a/src/components/ui/Avatar/Avatar.js b/src/components/ui/Avatar/Avatar.js index 9f0d9c10..17516dad 100644 --- a/src/components/ui/Avatar/Avatar.js +++ b/src/components/ui/Avatar/Avatar.js @@ -1,7 +1,7 @@ 'use client'; import React from 'react'; -const TextRenderer = ({fallback, ...rest})=>{ +const TextRenderer = ({fallback, ...rest}) => { return (
{fallback} diff --git a/src/components/ui/BlockQuote/BlockQuote.js b/src/components/ui/BlockQuote/BlockQuote.js index f9fd4865..514677ec 100644 --- a/src/components/ui/BlockQuote/BlockQuote.js +++ b/src/components/ui/BlockQuote/BlockQuote.js @@ -1,9 +1,15 @@ 'use client'; import React from 'react'; -const BlockQuote = ({children}) => ( +import {customClassSwitcher} from '@/core'; -
{children}
-); +const COMPONENT_NAME = 'BlockQuote'; +const BlockQuote = ({children, customRootClass = '', className = '', ...props}) => { + const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); + + return
{children}
; +}; + +BlockQuote.displayName = COMPONENT_NAME; export default BlockQuote; diff --git a/src/components/ui/BlockQuote/BlockQuote_sb.stories.js b/src/components/ui/BlockQuote/BlockQuote_sb.stories.js index aaf0c06f..50058fce 100644 --- a/src/components/ui/BlockQuote/BlockQuote_sb.stories.js +++ b/src/components/ui/BlockQuote/BlockQuote_sb.stories.js @@ -1,37 +1,34 @@ import BlockQuote from './BlockQuote'; -import SandboxEditor from "@/components/tools/SandboxEditor/SandboxEditor" +import SandboxEditor from '@/components/tools/SandboxEditor/SandboxEditor'; - - - const BLOCKQUOTE_TEXT = `Avian carriers can provide high delay, low throughput, and low altitude +const BLOCKQUOTE_TEXT = `Avian carriers can provide high delay, low throughput, and low altitude service. The connection topology is limited to a single point-to-point path for each carrier, used with standard carriers, but many carriers can be used without significant interference with each other, outside early spring. This is because of the 3D ether space available to the carriers, in contrast to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision - avoidance system, which increases availability.` + avoidance system, which increases availability.`; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { - title: 'UI/Data-Display/BlockQuote', - component: BlockQuote, - render: (args) => -
-
-
-
{BLOCKQUOTE_TEXT}
-
- -
+ title: 'UI/Data-Display/BlockQuote', + component: BlockQuote, + render: (args) => +
+
+
+
{BLOCKQUOTE_TEXT}
+
+
-
- , +
+ , }; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const All = { - args: { - className: '' - }, -}; \ No newline at end of file + args: { + className: '', + }, +}; diff --git a/src/components/ui/Code/Code.js b/src/components/ui/Code/Code.js index 51cabd1e..7064dbc9 100644 --- a/src/components/ui/Code/Code.js +++ b/src/components/ui/Code/Code.js @@ -1,7 +1,7 @@ 'use client'; import React from 'react'; -const Code = ({children})=>{ +const Code = ({children}) => { return {children} ; diff --git a/src/components/ui/Code/Code.stories.js b/src/components/ui/Code/Code.stories.js index 708debd6..357e51f8 100644 --- a/src/components/ui/Code/Code.stories.js +++ b/src/components/ui/Code/Code.stories.js @@ -1,7 +1,7 @@ import Code from './Code'; import SandboxEditor from '@/components/tools/SandboxEditor/SandboxEditor'; -const Code_TEXT = `console.log()`; +const Code_TEXT = 'console.log()'; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { diff --git a/src/components/ui/Heading/Heading.js b/src/components/ui/Heading/Heading.js index cd62552c..85f89539 100644 --- a/src/components/ui/Heading/Heading.js +++ b/src/components/ui/Heading/Heading.js @@ -30,7 +30,7 @@ const RENDER_AS_ENUMS = [ }, ]; -const Heading = ({children, as=undefined, customRootClass = '', className = ''}, ...props)=>{ +const Heading = ({children, as=undefined, customRootClass = '', className = ''}, ...props) => { const rootClass = customClassSwitcher(customRootClass, as || 'h1'); if (as !== undefined && RENDER_AS_ENUMS.find((item) => item.tag === as)) { diff --git a/src/components/ui/Kbd/Kbd.js b/src/components/ui/Kbd/Kbd.js index 2555ead1..65ccacc2 100644 --- a/src/components/ui/Kbd/Kbd.js +++ b/src/components/ui/Kbd/Kbd.js @@ -1,9 +1,8 @@ 'use client'; import React from 'react'; -const Kbd = ({ children }) => ( - {children} - ); -} +const Kbd = ({children}) => { + return {children}; +}; -export default Kbd \ No newline at end of file +export default Kbd; diff --git a/src/components/ui/Separator/Separator.js b/src/components/ui/Separator/Separator.js index e0d9fc0a..08ecb027 100644 --- a/src/components/ui/Separator/Separator.js +++ b/src/components/ui/Separator/Separator.js @@ -4,7 +4,7 @@ import {customClassSwitcher} from '@/core'; const COMPONENT_NAME = 'Separator'; -const Separator = ({orientation='horizontal', className='', customRootClass=''})=>{ +const Separator = ({orientation='horizontal', className='', customRootClass=''}) => { const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME); const orientationClass = orientation === 'vertical'? `${rootClass}-vertical` : `${rootClass}-horizontal`; diff --git a/src/components/ui/Strong/Strong.js b/src/components/ui/Strong/Strong.js index be20bc82..08e6d586 100644 --- a/src/components/ui/Strong/Strong.js +++ b/src/components/ui/Strong/Strong.js @@ -1,7 +1,7 @@ -const Strong = ({children})=>{ - return( +const Strong = ({children}) => { + return ( {children} - ) -} + ); +}; -export default Strong \ No newline at end of file +export default Strong; diff --git a/src/components/ui/Tabs/Tabs.stories.js b/src/components/ui/Tabs/Tabs.stories.js index 06ca0c3a..42e87eda 100644 --- a/src/components/ui/Tabs/Tabs.stories.js +++ b/src/components/ui/Tabs/Tabs.stories.js @@ -23,14 +23,14 @@ export const All = { tabs: [{ label: 'Meteora (album)', value: 'tab1', - content: `Following the success of Hybrid Theory and Reanimation, Linkin Park spent a significant amount of time touring around the United States. The band members began to work on new material amidst their saturated schedule, spending a sliver of their free time in their tour bus's studio.[34] The band officially announced the production of a new studio album in December 2002, revealing their new work was inspired by the rocky region of Meteora in Greece, where numerous monasteries have been built on top of the rocks.[35] Meteora features a mixture of the band's nu metal and rap metal style with newer innovative effects, including the induction of a shakuhachi (a Japanese flute made of bamboo) and other instruments`, + content: 'Following the success of Hybrid Theory and Reanimation, Linkin Park spent a significant amount of time touring around the United States. The band members began to work on new material amidst their saturated schedule, spending a sliver of their free time in their tour bus\'s studio.[34] The band officially announced the production of a new studio album in December 2002, revealing their new work was inspired by the rocky region of Meteora in Greece, where numerous monasteries have been built on top of the rocks.[35] Meteora features a mixture of the band\'s nu metal and rap metal style with newer innovative effects, including the induction of a shakuhachi (a Japanese flute made of bamboo) and other instruments', }, { label:
History
, value: 'tab2', content:
- { `Linkin Park was founded by three high school friends: Mike Shinoda, Rob Bourdon, and Brad Delson.[6][7] The three attended Agoura High School in Agoura Hills, California, a suburb of Los Angeles.[6][7] After graduating from high school, the three began to take their musical interests more seriously, recruiting Joe Hahn, Dave "Phoenix" Farrell, and Mark Wakefield to perform in their band, then called Xero. Though limited in resources, the band began recording and producing songs within Shinoda's makeshift bedroom studio in 1996, resulting in a four-track demo album, entitled Xero, released in November 1997.[6][8] Delson introduced the band to Jeff Blue, the vice president of A&R for Zomba Music, whom he had interned for in college.[9][10] Blue offered the band constructive criticism to catch the attention of record labels. Blue himself was impressed with Xero after watching them play a live show in 1998, but believed the band needed a different vocalist.[9][10] Tensions and frustration within the band grew after they failed to land a record deal.[6] The lack of success and stalemate in progress prompted Wakefield, at that time the band's vocalist, to leave the band in search of other projects.[6][8] Farrell also left to tour with Tasty Snax, a Christian punk and ska band.`} + { 'Linkin Park was founded by three high school friends: Mike Shinoda, Rob Bourdon, and Brad Delson.[6][7] The three attended Agoura High School in Agoura Hills, California, a suburb of Los Angeles.[6][7] After graduating from high school, the three began to take their musical interests more seriously, recruiting Joe Hahn, Dave "Phoenix" Farrell, and Mark Wakefield to perform in their band, then called Xero. Though limited in resources, the band began recording and producing songs within Shinoda\'s makeshift bedroom studio in 1996, resulting in a four-track demo album, entitled Xero, released in November 1997.[6][8] Delson introduced the band to Jeff Blue, the vice president of A&R for Zomba Music, whom he had interned for in college.[9][10] Blue offered the band constructive criticism to catch the attention of record labels. Blue himself was impressed with Xero after watching them play a live show in 1998, but believed the band needed a different vocalist.[9][10] Tensions and frustration within the band grew after they failed to land a record deal.[6] The lack of success and stalemate in progress prompted Wakefield, at that time the band\'s vocalist, to leave the band in search of other projects.[6][8] Farrell also left to tour with Tasty Snax, a Christian punk and ska band.'}
, }, diff --git a/src/components/ui/TextArea/TextArea.js b/src/components/ui/TextArea/TextArea.js index 1e640324..65f565e0 100644 --- a/src/components/ui/TextArea/TextArea.js +++ b/src/components/ui/TextArea/TextArea.js @@ -1,6 +1,6 @@ 'use client'; import React from 'react'; -const TextArea = ({children})=>{ +const TextArea = ({children}) => { return ; diff --git a/src/examples/Colors/Colors.stories.js b/src/examples/Colors/Colors.stories.js index b40a5370..6d59c8e3 100644 --- a/src/examples/Colors/Colors.stories.js +++ b/src/examples/Colors/Colors.stories.js @@ -1,46 +1,41 @@ -import React, { useState } from 'react' +import React, {useState} from 'react'; -import colors from "../../colors/index" +import colors from '../../colors/index'; +import ColorsTemplate from './ColorsTemplate'; -import ColorsTemplate from './ColorsTemplate' +const AllColorsTemplate = () => { + const [darkMode, setDarkMode] = useState(false); - - -const AllColorsTemplate = ()=>{ - const [darkMode, setDarkMode] = useState(false) - - const toggleDarkMode = () => { - setDarkMode(!darkMode) - - - } + const toggleDarkMode = () => { + setDarkMode(!darkMode); + }; return ( -
- -
- -
- -
-
-
- - ) -} +
+ +
+ +
+ +
+
+
+ + ); +}; // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { - title: 'Example/Colors', - component: 'AllColorsTemplate', - render: (args) => , + title: 'Example/Colors', + component: 'AllColorsTemplate', + render: (args) => , }; // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args export const All = { - args: { - }, -}; \ No newline at end of file + args: { + }, +}; diff --git a/src/examples/Colors/ColorsTemplate.js b/src/examples/Colors/ColorsTemplate.js index a32f0e86..5f0188bf 100644 --- a/src/examples/Colors/ColorsTemplate.js +++ b/src/examples/Colors/ColorsTemplate.js @@ -1,209 +1,203 @@ - - -const ColorBubble = ({ colorClass }) => { - const size = 32; - return ( -
-
- ) -} - +const ColorBubble = ({colorClass}) => { + const size = 32; + return ( +
+
+ ); +}; const ColorsTemplate = () => { + return
+
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
- return
- -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
+ + + + + + + + + + + + - - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
- - - - - - - - - - - - -
-
-
+
+
+ + + + + + + + + + + + +
+
-} + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+
+
; +}; -export default ColorsTemplate \ No newline at end of file +export default ColorsTemplate; diff --git a/src/index.js b/src/index.js index d6ac6737..614e1e0a 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,8 @@ export {default as Heading} from './components/ui/Heading/Heading.js'; export {default as Text} from './components/ui/Text/Text.js'; +export {default as BlockQuote} from './components/ui/BlockQuote/BlockQuote.js'; + export {default as Link} from './components/ui/Link/Link.js'; export {default as Quote} from './components/ui/Quote/Quote.js'; diff --git a/styles/jsTokens/base.tokens.js b/styles/jsTokens/base.tokens.js index 10abe3bd..ae700848 100644 --- a/styles/jsTokens/base.tokens.js +++ b/styles/jsTokens/base.tokens.js @@ -1 +1 @@ -export default {"gray":{"50":"var(--rad-ui-color-gray-50)","100":"var(--rad-ui-color-gray-100)","200":"var(--rad-ui-color-gray-200)","300":"var(--rad-ui-color-gray-300)","400":"var(--rad-ui-color-gray-400)","500":"var(--rad-ui-color-gray-500)","600":"var(--rad-ui-color-gray-600)","700":"var(--rad-ui-color-gray-700)","800":"var(--rad-ui-color-gray-800)","900":"var(--rad-ui-color-gray-900)","950":"var(--rad-ui-color-gray-950)","1000":"var(--rad-ui-color-gray-1000)"},"mauve":{"50":"var(--rad-ui-color-mauve-50)","100":"var(--rad-ui-color-mauve-100)","200":"var(--rad-ui-color-mauve-200)","300":"var(--rad-ui-color-mauve-300)","400":"var(--rad-ui-color-mauve-400)","500":"var(--rad-ui-color-mauve-500)","600":"var(--rad-ui-color-mauve-600)","700":"var(--rad-ui-color-mauve-700)","800":"var(--rad-ui-color-mauve-800)","900":"var(--rad-ui-color-mauve-900)","950":"var(--rad-ui-color-mauve-950)","1000":"var(--rad-ui-color-mauve-1000)"},"slate":{"50":"var(--rad-ui-color-slate-50)","100":"var(--rad-ui-color-slate-100)","200":"var(--rad-ui-color-slate-200)","300":"var(--rad-ui-color-slate-300)","400":"var(--rad-ui-color-slate-400)","500":"var(--rad-ui-color-slate-500)","600":"var(--rad-ui-color-slate-600)","700":"var(--rad-ui-color-slate-700)","800":"var(--rad-ui-color-slate-800)","900":"var(--rad-ui-color-slate-900)","950":"var(--rad-ui-color-slate-950)","1000":"var(--rad-ui-color-slate-1000)"},"sage":{"50":"var(--rad-ui-color-sage-50)","100":"var(--rad-ui-color-sage-100)","200":"var(--rad-ui-color-sage-200)","300":"var(--rad-ui-color-sage-300)","400":"var(--rad-ui-color-sage-400)","500":"var(--rad-ui-color-sage-500)","600":"var(--rad-ui-color-sage-600)","700":"var(--rad-ui-color-sage-700)","800":"var(--rad-ui-color-sage-800)","900":"var(--rad-ui-color-sage-900)","950":"var(--rad-ui-color-sage-950)","1000":"var(--rad-ui-color-sage-1000)"},"olive":{"50":"var(--rad-ui-color-olive-50)","100":"var(--rad-ui-color-olive-100)","200":"var(--rad-ui-color-olive-200)","300":"var(--rad-ui-color-olive-300)","400":"var(--rad-ui-color-olive-400)","500":"var(--rad-ui-color-olive-500)","600":"var(--rad-ui-color-olive-600)","700":"var(--rad-ui-color-olive-700)","800":"var(--rad-ui-color-olive-800)","900":"var(--rad-ui-color-olive-900)","950":"var(--rad-ui-color-olive-950)","1000":"var(--rad-ui-color-olive-1000)"},"sand":{"50":"var(--rad-ui-color-sand-50)","100":"var(--rad-ui-color-sand-100)","200":"var(--rad-ui-color-sand-200)","300":"var(--rad-ui-color-sand-300)","400":"var(--rad-ui-color-sand-400)","500":"var(--rad-ui-color-sand-500)","600":"var(--rad-ui-color-sand-600)","700":"var(--rad-ui-color-sand-700)","800":"var(--rad-ui-color-sand-800)","900":"var(--rad-ui-color-sand-900)","950":"var(--rad-ui-color-sand-950)","1000":"var(--rad-ui-color-sand-1000)"},"tomato":{"50":"var(--rad-ui-color-tomato-50)","100":"var(--rad-ui-color-tomato-100)","200":"var(--rad-ui-color-tomato-200)","300":"var(--rad-ui-color-tomato-300)","400":"var(--rad-ui-color-tomato-400)","500":"var(--rad-ui-color-tomato-500)","600":"var(--rad-ui-color-tomato-600)","700":"var(--rad-ui-color-tomato-700)","800":"var(--rad-ui-color-tomato-800)","900":"var(--rad-ui-color-tomato-900)","950":"var(--rad-ui-color-tomato-950)","1000":"var(--rad-ui-color-tomato-1000)"},"red":{"50":"var(--rad-ui-color-red-50)","100":"var(--rad-ui-color-red-100)","200":"var(--rad-ui-color-red-200)","300":"var(--rad-ui-color-red-300)","400":"var(--rad-ui-color-red-400)","500":"var(--rad-ui-color-red-500)","600":"var(--rad-ui-color-red-600)","700":"var(--rad-ui-color-red-700)","800":"var(--rad-ui-color-red-800)","900":"var(--rad-ui-color-red-900)","950":"var(--rad-ui-color-red-950)","1000":"var(--rad-ui-color-red-1000)"},"ruby":{"50":"var(--rad-ui-color-ruby-50)","100":"var(--rad-ui-color-ruby-100)","200":"var(--rad-ui-color-ruby-200)","300":"var(--rad-ui-color-ruby-300)","400":"var(--rad-ui-color-ruby-400)","500":"var(--rad-ui-color-ruby-500)","600":"var(--rad-ui-color-ruby-600)","700":"var(--rad-ui-color-ruby-700)","800":"var(--rad-ui-color-ruby-800)","900":"var(--rad-ui-color-ruby-900)","950":"var(--rad-ui-color-ruby-950)","1000":"var(--rad-ui-color-ruby-1000)"},"crimson":{"50":"var(--rad-ui-color-crimson-50)","100":"var(--rad-ui-color-crimson-100)","200":"var(--rad-ui-color-crimson-200)","300":"var(--rad-ui-color-crimson-300)","400":"var(--rad-ui-color-crimson-400)","500":"var(--rad-ui-color-crimson-500)","600":"var(--rad-ui-color-crimson-600)","700":"var(--rad-ui-color-crimson-700)","800":"var(--rad-ui-color-crimson-800)","900":"var(--rad-ui-color-crimson-900)","950":"var(--rad-ui-color-crimson-950)","1000":"var(--rad-ui-color-crimson-1000)"},"pink":{"50":"var(--rad-ui-color-pink-50)","100":"var(--rad-ui-color-pink-100)","200":"var(--rad-ui-color-pink-200)","300":"var(--rad-ui-color-pink-300)","400":"var(--rad-ui-color-pink-400)","500":"var(--rad-ui-color-pink-500)","600":"var(--rad-ui-color-pink-600)","700":"var(--rad-ui-color-pink-700)","800":"var(--rad-ui-color-pink-800)","900":"var(--rad-ui-color-pink-900)","950":"var(--rad-ui-color-pink-950)","1000":"var(--rad-ui-color-pink-1000)"},"plum":{"50":"var(--rad-ui-color-plum-50)","100":"var(--rad-ui-color-plum-100)","200":"var(--rad-ui-color-plum-200)","300":"var(--rad-ui-color-plum-300)","400":"var(--rad-ui-color-plum-400)","500":"var(--rad-ui-color-plum-500)","600":"var(--rad-ui-color-plum-600)","700":"var(--rad-ui-color-plum-700)","800":"var(--rad-ui-color-plum-800)","900":"var(--rad-ui-color-plum-900)","950":"var(--rad-ui-color-plum-950)","1000":"var(--rad-ui-color-plum-1000)"},"purple":{"50":"var(--rad-ui-color-purple-50)","100":"var(--rad-ui-color-purple-100)","200":"var(--rad-ui-color-purple-200)","300":"var(--rad-ui-color-purple-300)","400":"var(--rad-ui-color-purple-400)","500":"var(--rad-ui-color-purple-500)","600":"var(--rad-ui-color-purple-600)","700":"var(--rad-ui-color-purple-700)","800":"var(--rad-ui-color-purple-800)","900":"var(--rad-ui-color-purple-900)","950":"var(--rad-ui-color-purple-950)","1000":"var(--rad-ui-color-purple-1000)"}} \ No newline at end of file +export default {'gray': {'50': 'var(--rad-ui-color-gray-50)', '100': 'var(--rad-ui-color-gray-100)', '200': 'var(--rad-ui-color-gray-200)', '300': 'var(--rad-ui-color-gray-300)', '400': 'var(--rad-ui-color-gray-400)', '500': 'var(--rad-ui-color-gray-500)', '600': 'var(--rad-ui-color-gray-600)', '700': 'var(--rad-ui-color-gray-700)', '800': 'var(--rad-ui-color-gray-800)', '900': 'var(--rad-ui-color-gray-900)', '950': 'var(--rad-ui-color-gray-950)', '1000': 'var(--rad-ui-color-gray-1000)'}, 'mauve': {'50': 'var(--rad-ui-color-mauve-50)', '100': 'var(--rad-ui-color-mauve-100)', '200': 'var(--rad-ui-color-mauve-200)', '300': 'var(--rad-ui-color-mauve-300)', '400': 'var(--rad-ui-color-mauve-400)', '500': 'var(--rad-ui-color-mauve-500)', '600': 'var(--rad-ui-color-mauve-600)', '700': 'var(--rad-ui-color-mauve-700)', '800': 'var(--rad-ui-color-mauve-800)', '900': 'var(--rad-ui-color-mauve-900)', '950': 'var(--rad-ui-color-mauve-950)', '1000': 'var(--rad-ui-color-mauve-1000)'}, 'slate': {'50': 'var(--rad-ui-color-slate-50)', '100': 'var(--rad-ui-color-slate-100)', '200': 'var(--rad-ui-color-slate-200)', '300': 'var(--rad-ui-color-slate-300)', '400': 'var(--rad-ui-color-slate-400)', '500': 'var(--rad-ui-color-slate-500)', '600': 'var(--rad-ui-color-slate-600)', '700': 'var(--rad-ui-color-slate-700)', '800': 'var(--rad-ui-color-slate-800)', '900': 'var(--rad-ui-color-slate-900)', '950': 'var(--rad-ui-color-slate-950)', '1000': 'var(--rad-ui-color-slate-1000)'}, 'sage': {'50': 'var(--rad-ui-color-sage-50)', '100': 'var(--rad-ui-color-sage-100)', '200': 'var(--rad-ui-color-sage-200)', '300': 'var(--rad-ui-color-sage-300)', '400': 'var(--rad-ui-color-sage-400)', '500': 'var(--rad-ui-color-sage-500)', '600': 'var(--rad-ui-color-sage-600)', '700': 'var(--rad-ui-color-sage-700)', '800': 'var(--rad-ui-color-sage-800)', '900': 'var(--rad-ui-color-sage-900)', '950': 'var(--rad-ui-color-sage-950)', '1000': 'var(--rad-ui-color-sage-1000)'}, 'olive': {'50': 'var(--rad-ui-color-olive-50)', '100': 'var(--rad-ui-color-olive-100)', '200': 'var(--rad-ui-color-olive-200)', '300': 'var(--rad-ui-color-olive-300)', '400': 'var(--rad-ui-color-olive-400)', '500': 'var(--rad-ui-color-olive-500)', '600': 'var(--rad-ui-color-olive-600)', '700': 'var(--rad-ui-color-olive-700)', '800': 'var(--rad-ui-color-olive-800)', '900': 'var(--rad-ui-color-olive-900)', '950': 'var(--rad-ui-color-olive-950)', '1000': 'var(--rad-ui-color-olive-1000)'}, 'sand': {'50': 'var(--rad-ui-color-sand-50)', '100': 'var(--rad-ui-color-sand-100)', '200': 'var(--rad-ui-color-sand-200)', '300': 'var(--rad-ui-color-sand-300)', '400': 'var(--rad-ui-color-sand-400)', '500': 'var(--rad-ui-color-sand-500)', '600': 'var(--rad-ui-color-sand-600)', '700': 'var(--rad-ui-color-sand-700)', '800': 'var(--rad-ui-color-sand-800)', '900': 'var(--rad-ui-color-sand-900)', '950': 'var(--rad-ui-color-sand-950)', '1000': 'var(--rad-ui-color-sand-1000)'}, 'tomato': {'50': 'var(--rad-ui-color-tomato-50)', '100': 'var(--rad-ui-color-tomato-100)', '200': 'var(--rad-ui-color-tomato-200)', '300': 'var(--rad-ui-color-tomato-300)', '400': 'var(--rad-ui-color-tomato-400)', '500': 'var(--rad-ui-color-tomato-500)', '600': 'var(--rad-ui-color-tomato-600)', '700': 'var(--rad-ui-color-tomato-700)', '800': 'var(--rad-ui-color-tomato-800)', '900': 'var(--rad-ui-color-tomato-900)', '950': 'var(--rad-ui-color-tomato-950)', '1000': 'var(--rad-ui-color-tomato-1000)'}, 'red': {'50': 'var(--rad-ui-color-red-50)', '100': 'var(--rad-ui-color-red-100)', '200': 'var(--rad-ui-color-red-200)', '300': 'var(--rad-ui-color-red-300)', '400': 'var(--rad-ui-color-red-400)', '500': 'var(--rad-ui-color-red-500)', '600': 'var(--rad-ui-color-red-600)', '700': 'var(--rad-ui-color-red-700)', '800': 'var(--rad-ui-color-red-800)', '900': 'var(--rad-ui-color-red-900)', '950': 'var(--rad-ui-color-red-950)', '1000': 'var(--rad-ui-color-red-1000)'}, 'ruby': {'50': 'var(--rad-ui-color-ruby-50)', '100': 'var(--rad-ui-color-ruby-100)', '200': 'var(--rad-ui-color-ruby-200)', '300': 'var(--rad-ui-color-ruby-300)', '400': 'var(--rad-ui-color-ruby-400)', '500': 'var(--rad-ui-color-ruby-500)', '600': 'var(--rad-ui-color-ruby-600)', '700': 'var(--rad-ui-color-ruby-700)', '800': 'var(--rad-ui-color-ruby-800)', '900': 'var(--rad-ui-color-ruby-900)', '950': 'var(--rad-ui-color-ruby-950)', '1000': 'var(--rad-ui-color-ruby-1000)'}, 'crimson': {'50': 'var(--rad-ui-color-crimson-50)', '100': 'var(--rad-ui-color-crimson-100)', '200': 'var(--rad-ui-color-crimson-200)', '300': 'var(--rad-ui-color-crimson-300)', '400': 'var(--rad-ui-color-crimson-400)', '500': 'var(--rad-ui-color-crimson-500)', '600': 'var(--rad-ui-color-crimson-600)', '700': 'var(--rad-ui-color-crimson-700)', '800': 'var(--rad-ui-color-crimson-800)', '900': 'var(--rad-ui-color-crimson-900)', '950': 'var(--rad-ui-color-crimson-950)', '1000': 'var(--rad-ui-color-crimson-1000)'}, 'pink': {'50': 'var(--rad-ui-color-pink-50)', '100': 'var(--rad-ui-color-pink-100)', '200': 'var(--rad-ui-color-pink-200)', '300': 'var(--rad-ui-color-pink-300)', '400': 'var(--rad-ui-color-pink-400)', '500': 'var(--rad-ui-color-pink-500)', '600': 'var(--rad-ui-color-pink-600)', '700': 'var(--rad-ui-color-pink-700)', '800': 'var(--rad-ui-color-pink-800)', '900': 'var(--rad-ui-color-pink-900)', '950': 'var(--rad-ui-color-pink-950)', '1000': 'var(--rad-ui-color-pink-1000)'}, 'plum': {'50': 'var(--rad-ui-color-plum-50)', '100': 'var(--rad-ui-color-plum-100)', '200': 'var(--rad-ui-color-plum-200)', '300': 'var(--rad-ui-color-plum-300)', '400': 'var(--rad-ui-color-plum-400)', '500': 'var(--rad-ui-color-plum-500)', '600': 'var(--rad-ui-color-plum-600)', '700': 'var(--rad-ui-color-plum-700)', '800': 'var(--rad-ui-color-plum-800)', '900': 'var(--rad-ui-color-plum-900)', '950': 'var(--rad-ui-color-plum-950)', '1000': 'var(--rad-ui-color-plum-1000)'}, 'purple': {'50': 'var(--rad-ui-color-purple-50)', '100': 'var(--rad-ui-color-purple-100)', '200': 'var(--rad-ui-color-purple-200)', '300': 'var(--rad-ui-color-purple-300)', '400': 'var(--rad-ui-color-purple-400)', '500': 'var(--rad-ui-color-purple-500)', '600': 'var(--rad-ui-color-purple-600)', '700': 'var(--rad-ui-color-purple-700)', '800': 'var(--rad-ui-color-purple-800)', '900': 'var(--rad-ui-color-purple-900)', '950': 'var(--rad-ui-color-purple-950)', '1000': 'var(--rad-ui-color-purple-1000)'}}; diff --git a/styles/themes/default.css b/styles/themes/default.css index 7249ac72..2c277133 100644 --- a/styles/themes/default.css +++ b/styles/themes/default.css @@ -76,7 +76,7 @@ button:active, button:focus, input:active, input:focus, textarea:active, textare background-color: var(--rad-ui-color-accent-500) ; } -.rad-ui-blockquote{ +.rad-ui-block-quote{ border-color: var(--rad-ui-color-accent-600); border-left-width: 0.5rem; padding-left:12px;