diff --git a/stories/html/variables/colors.scss b/stories/html/variables/colors.scss deleted file mode 100644 index e4421cd8..00000000 --- a/stories/html/variables/colors.scss +++ /dev/null @@ -1,30 +0,0 @@ -// stylelint-disable -.color { - display: flex; - flex-direction: column; - justify-content: center; - padding: 8px; - margin: 8px; - background: darken(#fff, 4%); - border: 1px solid darken(#fff, 10%); - border-radius: 4px; - - &-box { - display: inline-block; - width: 15px; - height: 15px; - border-radius: 2px; - } - - &-container { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - } - - &-name { - margin-bottom: 5px; - font-size: 14px; - font-weight: 600; - } -} diff --git a/stories/html/variables/colors.stories.mdx b/stories/html/variables/colors.stories.mdx new file mode 100644 index 00000000..d5d8cc2c --- /dev/null +++ b/stories/html/variables/colors.stories.mdx @@ -0,0 +1,106 @@ +import { useEffect } from '@storybook/client-api'; +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import styles from './variables.scss' +import { + renderPrimaryColors, + renderRedColors, + renderYellowColors, + renderGreenColors, + renderBlueColors, + renderOceanBlueColors, + renderPurpleColors, + renderAmberColors, + renderCommonColors +} from './variables'; + + + +# Primary + + + + {() => renderPrimaryColors()} + + + +# Red + + + + {() => renderRedColors()} + + + +# Yellow + + + + {() => renderYellowColors()} + + + +# Green + + + + {() => renderGreenColors()} + + + +# Blue + + + + {() => renderBlueColors()} + + + +# Ocean blue + + + + {() => renderOceanBlueColors()} + + + +# Purple + + + + {() => renderPurpleColors()} + + + +# Amber + + + + {() => renderAmberColors()} + + + +# Common + + + + {() => renderCommonColors()} + + diff --git a/stories/html/variables/fonts.stories.mdx b/stories/html/variables/fonts.stories.mdx new file mode 100644 index 00000000..7f3330f1 --- /dev/null +++ b/stories/html/variables/fonts.stories.mdx @@ -0,0 +1,39 @@ +import { useEffect } from '@storybook/client-api'; +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import styles from './variables.scss' +import { + renderPrimaryFont, + renderSecondaryFont, + renderFontSizes +} from './variables'; + + + +# Primary + + + {() => renderPrimaryFont()} + + + +# Secondary +_NOTE: The secondary font is the same as the primary font._ + + + {() => renderSecondaryFont()} + + + +# Font size + + + {() => renderFontSizes()} + + + diff --git a/stories/html/variables/functions.js b/stories/html/variables/functions.js deleted file mode 100644 index 8519b5a0..00000000 --- a/stories/html/variables/functions.js +++ /dev/null @@ -1,17 +0,0 @@ -import './colors.scss'; - -export default function renderContent(array, isColor) { - let principalContent = '
'; - - Object.keys(array).forEach((variableName) => { - if (isColor) { - principalContent += `
${variableName}
${array[variableName]}
`; - } else { - principalContent += `
${variableName} ${array[variableName]}
`; - } - }); - - principalContent += ''; - - return principalContent; -} diff --git a/stories/html/variables/index.stories.mdx b/stories/html/variables/index.stories.mdx deleted file mode 100644 index 93fada3b..00000000 --- a/stories/html/variables/index.stories.mdx +++ /dev/null @@ -1,95 +0,0 @@ -import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import basics from '../../../scss/export/_basic.scss'; -import principal from '../../../scss/export/_principal.scss'; -import principalVariations from '../../../scss/export/_principal-variations.scss'; -import alerts from '../../../scss/export/_alerts.scss'; -import theme from '../../../scss/export/_theme.scss'; -import spacers from '../../../scss/export/_spacers.scss'; -import breakpoints from '../../../scss/export/_breakpoints.scss'; -import gridWidths from '../../../scss/export/_grid-max-width.scss'; -import fonts from '../../../scss/export/_fonts.scss'; -import renderContent from './functions'; - - - -# Main variables - - - - {() => renderContent(principal, true)} - - - -# Main variants - - - - {() => renderContent(principalVariations, true)} - - - -# Basic variables - - - - {() => renderContent(basics, true)} - - - -# Alerts colors - -These one are inside a map object (alerts-background-colors and alerts-second-colors) - - - - {() => renderContent(alerts, true)} - - - -# Theme variables - -These one are inside a map object - - - - {() => renderContent(theme, true)} - - - -# Spacers variables - -These one are inside a map object (1rem = 16px) - - - - {() => renderContent(spacers)} - - - -# Responsive breakpoints - -These one are inside a map object - - - - {() => renderContent(breakpoints)} - - - -# Grid max widths - -These one are inside a map object - - - - {() => renderContent(gridWidths)} - - - -# Fonts variables - - - - {() => renderContent(fonts)} - - diff --git a/stories/html/variables/others.stories.mdx b/stories/html/variables/others.stories.mdx new file mode 100644 index 00000000..d0297bac --- /dev/null +++ b/stories/html/variables/others.stories.mdx @@ -0,0 +1,27 @@ +import { useEffect } from '@storybook/client-api'; +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import styles from './variables.scss' +import { + renderBoxShadows, + renderSizes +} from './variables'; + + + +# Shadows + + + {() => renderBoxShadows()} + + + +# Sizes + + + {() => renderSizes()} + + diff --git a/stories/html/variables/variables.js b/stories/html/variables/variables.js new file mode 100644 index 00000000..254b5b62 --- /dev/null +++ b/stories/html/variables/variables.js @@ -0,0 +1,270 @@ +// Retrieve the CSS variable values +const rootStyles = getComputedStyle(document.documentElement); + +// Function to render color variables +function colors(variablePrefix, colorSuffixes) { + let output = ` +
+
+
CSS variable name
+
Variable preview
+
Hex value
+
+ `; + + // Iterate over each color suffix + colorSuffixes.forEach((color) => { + const variableName = `${variablePrefix}-${color}`; + const variableValue = rootStyles.getPropertyValue(variableName).trim(); + + // Append a line for each variable + output += ` +
+
+ ${variableName} +
+
+
+ ${variableValue} +
+
+ `; + }); + + output += `
`; // Close the main variable div + + // Return the generated HTML + return output; +} + +// Primary colors +export function renderPrimaryColors() { + const primaryColors = [900, 800, 700, 600, 500, 400, 300, 200, 100]; // Define the range of suffixes + return colors('--cdk-primary', primaryColors); +} + +// Red colors +export function renderRedColors() { + const redColors = [700, 500, 300, 100, 50]; + return colors('--cdk-red', redColors); +} + +// Common colors +export function renderCommonColors() { + const commonColors = ["white", "black"]; + return colors('--cdk', commonColors); +} + +// Purple colors +export function renderPurpleColors() { + const purpleColors = [700, 500, 50]; + return colors('--cdk-purple', purpleColors); +} + +// Blue colors +export function renderBlueColors() { + const blueColors = [700, 500, 300, 100, 50]; + return colors('--cdk-blue', blueColors); +} + +// Ocean blue colors +export function renderOceanBlueColors() { + const oceanBlueColors = [700, 500, 50]; + return colors('--cdk-ocean-blue', oceanBlueColors); +} + +// Yellow colors +export function renderYellowColors() { + const yellowColors = [500, 300, 100, 50]; + return colors('--cdk-yellow', yellowColors); +} + +// Amber colors +export function renderAmberColors() { + const amberColors = [500, 100]; + return colors('--cdk-amber', amberColors); +} + +// Green colors +export function renderGreenColors() { + const greenColors = [500, 300, 100, 50]; + return colors('--cdk-green', greenColors); +} + +// Function to render fonts variables +function fonts(variablePrefix, fontSuffixes) { + let output = ` +
+
+
CSS variable name
+
Variable preview
+
Font value
+
+ `; + + const variableName = `${variablePrefix}-${fontSuffixes}`; + const variableValue = rootStyles.getPropertyValue(variableName).trim(); + + // Append a line for each variable + output += ` +
+
+ ${variableName} +
+
+

Lorem ipsum

+
+
+ ${variableValue} +
+
+ `; + output += `
`; // Close the main variable div + + // Return the generated HTML + return output; +} + +// Primary font +export function renderPrimaryFont() { + return fonts('--cdk-font-family', 'primary'); +} + +// Secondary font +export function renderSecondaryFont() { + return fonts('--cdk-font-family', 'secondary'); +} + +// Function to render font size variables +function fontSizes(variablePrefix, sizesSuffixes) { + let output = ` +
+
+
CSS variable name
+
Variable preview
+
Rem value
+
+ `; + + // Iterate over each color suffix + sizesSuffixes.forEach((size) => { + const variableName = `${variablePrefix}-${size}`; + const variableValue = rootStyles.getPropertyValue(variableName).trim(); + + // Append a line for each variable + output += ` +
+
+ ${variableName} +
+
+ + Lorem ipsum + +
+
+ ${variableValue} +
+
+ `; + }); + + output += `
`; // Close the main variable div + + // Return the generated HTML + return output; +} + +// Font sizes +export function renderFontSizes() { + const sizes = ["5xl", "4xl", "3xl", "2xl", "xl", "lg", "base", "sm", "xs"]; + return fontSizes('--cdk-font-size', sizes); +} + +// Function to render font size variables +function boxShadows(variablePrefix, shadowsSuffixes) { + let output = ` +
+
+
CSS variable name
+
Variable preview
+
Shadow value
+
+ `; + + // Iterate over each color suffix + shadowsSuffixes.forEach((shadow) => { + const variableName = `${variablePrefix}-${shadow}`; + const variableValue = rootStyles.getPropertyValue(variableName).trim(); + + // Append a line for each variable + output += ` +
+
+ ${variableName} +
+
+
+
+
+ ${variableValue} +
+
+ `; + }); + + output += `
`; // Close the main variable div + + // Return the generated HTML + return output; +} + +// Box shadows sizes +export function renderBoxShadows() { + const shadows = ["default", "sm", "md", "lg", "xl", "2xl", "inner", "none", "overlay", "sticky", "pop-modal"]; + return boxShadows('--cdk-box-shadow', shadows); +} + +// Function to render spacing variables +function sizes(variablePrefix, spacingSuffixes) { + let output = ` +
+
+
CSS variable name
+
Variable preview
+
Rem value
+
+ `; + + // Iterate over each color suffix + spacingSuffixes.forEach((space) => { + const variableName = `${variablePrefix}-${space}`; + const variableValue = rootStyles.getPropertyValue(variableName).trim(); + + // Append a line for each variable + output += ` +
+
+ ${variableName} +
+
+
+
+
+ ${variableValue} +
+
+ `; + }); + + output += `
`; // Close the main variable div + + // Return the generated HTML + return output; +} + +// Spaces +export function renderSizes() { + const spaces = [0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96, 112, 128, 144, 160, 176, 192, 208, 224, 240, 256, 288, 320]; + return sizes('--cdk-size', spaces); +} diff --git a/stories/html/variables/variables.scss b/stories/html/variables/variables.scss new file mode 100644 index 00000000..697dc82c --- /dev/null +++ b/stories/html/variables/variables.scss @@ -0,0 +1,83 @@ +/* stylelint-disable */ +$prefix: --cdk-; + +.variable { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.25rem 0; + + &__line { + display: grid; + grid-template-columns: subgrid; + grid-column: -1/1; + } + + &__head { + padding: 0.5rem; + font-weight: 700; + background-color: var(#{$prefix}primary-200); + border: 1px solid var(#{$prefix}white); + } + + &__name, + &__value { + padding-block: 0.25rem; + padding-inline: 0.5rem; + } + + &__code { + padding: 0.25rem 0.5rem; + font-family: monospace; + font-size: 0.75rem; + color: var(#{$prefix}red-500); + background-color: var(#{$prefix}primary-300); + border-radius: 0.25rem; + } + + &__preview { + &--shadow { + padding: 0.75rem; + background-color: var(#{$prefix}primary-100); + } + + &--space { + padding: 0.25rem; + background-color: var(#{$prefix}white); + } + + .shadow__preview { + width: 100%; + height: 2.5rem; + background-color: var(#{$prefix}white); + border-radius: 0.25rem; + } + + .space__preview { + position: relative; + height: 0.75rem; + background-color: var(#{$prefix}primary-300); + + &::before { + position: absolute; + top: calc(-1 * var(#{$prefix}size-4)); + bottom: calc(-1 * var(#{$prefix}size-4)); + left: -1px; + display: block; + width: var(#{$prefix}size-1); + content: ""; + background-color: var(#{$prefix}red-500); + } + + &::after { + position: absolute; + top: calc(-1 * var(#{$prefix}size-4)); + right: -1px; + bottom: calc(-1 * var(#{$prefix}size-4)); + display: block; + width: var(#{$prefix}size-1); + content: ""; + background-color: var(#{$prefix}red-500); + } + } + } +}