educata · KostaD02 · May 2, 2025 · May 2, 2025
@@ -0,0 +1,3 @@
+# Best practices
+
+TODO: add
@@ -15,8 +15,8 @@
 
 @each $property, $value in $icon-sizes {
   .icon-#{$property} {
-    width: $value;
-    height: $value;
+    width: var(--#{$prefix}icon-#{$property});
+    height: var(--#{$prefix}icon-#{$property});
     object-fit: contain;
   }
 }
@@ -3,7 +3,7 @@
 
 $prefix: "ec-";
 $transitions-duration: 0.3s !default;
-$transitions: ease-in-out, ease-in, ease-out, linear !default;
+$transitions: linear, ease, ease-in, ease-out, ease-in-out !default;
 
 $font-sizes: (
   xxxl: 3,

@@ -20,7 +20,7 @@ export const Variations: Story = {
 <div class="d-flex flex-column gap-3">
   ${VARIATIONS.map(
     (variation) =>
-      `<span class="text-${variation} p-2">.text-${variation}</span> <span class="text-${variation}-bg bg-${variation} p-2">.text-${variation}-bg</span>`
+      `<span class="text-${variation} user-select-all p-2">.text-${variation}</span> <span class="text-${variation}-bg bg-${variation} user-select-all p-2">.text-${variation}-bg</span>`
   ).join("")}
 </div>
 `;

@@ -3,6 +3,10 @@
 There is a set of root variables that are used throughout the project.
 These variables are defined in the [scss/variables/_root.scss](https://github.com/educata/educata-style/blob/main/scss/variables/_root.scss) file.
 
-- [Colors](?path=/docs/variables-colors--docs)
-- Border
-- Breakpoint
+- [Border](?path=/docs/variables-Border--docs)
+- [Breakpoints](?path=/docs/variables-Breakpoints--docs)
+- [Color](?path=/docs/variables-Color--docs)
+- [Font](?path=/docs/variables-Font--docs)
+- [Form](?path=/docs/variables-Form--docs)
+- [Icon](?path=/docs/variables-Icon--docs)
+- [Transition](?path=/docs/variables-Transition--docs)
@@ -0,0 +1,49 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as BorderStories from '../../utilities/borders/borders.stories.ts';
+
+# Border
+
+For border styles, we use the following variables:
+
+- Width
+- Style
+- Color
+- Radius
+- `Radius-{{ SIZE }}`
+
+## Static
+
+There are four static border styles available:
+
+- Width - `--ec-border-width` = `1px`
+- Style - `--ec-border-style` = `solid`
+- Color - `--ec-border-color` = `#ededee`
+- Radius - `--ec-border-radius` = `0.375rem`
+
+## Radius
+
+While we have radius as static value, we also have a set of radius variables
+that can be used to create different border radius styles. The following variables are available:
+
+```
+--ec-border-radius-{{SIZE}}
+```
+
+Where `{{SIZE}}` can be one of the following:
+
+- `sm` = `0.25rem`
+- `lg` = `0.5rem`
+- `xl` = `1rem`
+- `xxl` = `2rem`
+- `pill` = `50rem`
+- `circle` = `50%`
+
+There are also classes available for each of the radius sizes:
+
+- `.rounded` - `--ec-border-radius`
+- `.rounded-sm` - `--ec-border-radius-sm`
+- ...
+- `.rounded-circle` - `--ec-border-radius-circle`
+
+<Canvas of={BorderStories.Radius} />
@@ -0,0 +1,13 @@
+# Breakpoints
+
+For breakpoints we use the following variables:
+
+```css
+:root {
+  --ec-breakpoint-sm: 540px;
+  --ec-breakpoint-md: 720px;
+  --ec-breakpoint-lg: 960px;
+  --ec-breakpoint-xl: 1140px;
+  --ec-breakpoint-xxl: 1320px;
+}
+```
@@ -0,0 +1,73 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as ColorStories from './color.stories.ts';
+import * as ColorUtilitiesStories from '../../utilities/colors/colors.stories.ts';
+
+# Colors
+
+The color variables are used to define the color palette of the project.
+
+```
+--ec-color-{COLOR_NAME}
+--ec-color-{COLOR_NAME}-rgb
+--ec-color-{COLOR_NAME}-{10|20|30|40|50|60|70|80|90|100}
+--ec-{VARIATION}-text-color
+--ec-{VARIATION}-bg-color
+```
+
+- `{COLOR_NAME}` is the name of the color.
+- `{COLOR_NAME}-rgb` is the rgb value of the color.
+- `{10|20|30|40|50|60|70|80|90|100}` is variation of the color.
+- `{VARIATION}` is the name of the color variation. (`primary`, `secondary`, `success`, `danger`, `white`, `black`, `main`).
+
+## Base Colors
+
+There is **7** base color:
+
+- white (`#ffffff` | `rgb(255, 255, 255)`)
+- black (`#171719` | `rgb(23, 23, 25)`)
+- red (`#cc1f4f` | `rgb(204, 31, 79)`)
+- blue (`#6666ff` | `rgb(102, 102, 255)`)
+- green (`#51d253` | `rgb(81, 210, 83)`)
+- yellow (`#e6fd53` | `rgb(230, 253, 83)`)
+- purple (`#c05be0` | `rgb(192, 91, 224)`)
+
+## Variation colors
+
+- primary
+  - text: `--ec-primary-text-color` (`#000` | `rgb(0, 0, 0)`)
+  - background: `--ec-primary-bg-color` (`#e6fd53` | `rgb(230, 253, 83)`)
+- secondary
+  - text: `--ec-secondary-text-color` (`#fff` | `rgb(255, 255, 255)`)
+  - background: `--ec-secondary-bg-color` (`#6666ff` | `rgb(102, 102, 255)`)
+- success
+  - text: `--ec-success-text-color` (`#fff` | `rgb(255, 255, 255)`)
+  - background: `--ec-success-bg-color` (`#51d253` | `rgb(81, 210, 83)`)
+- danger
+  - text: `--ec-danger-text-color` (`#fff` | `rgb(255, 255, 255)`)
+  - background: `--ec-danger-bg-color` (`#cc1f4f` | `rgb(204, 31, 79)`)
+- white
+  - text: `--ec-white-text-color` (`#000` | `rgb(0, 0, 0)`)
+  - background: `--ec-white-bg-color` (`#fff` | `rgb(255, 255, 255)`)
+- black
+  - text: `--ec-black-text-color` (`#fff` | `rgb(255, 255, 255)`)
+  - background: `--ec-black-bg-color` (`#171719` | `rgb(23, 23, 25)`)
+- main
+  - text: `--ec-main-text-color` (`#000` | `rgb(0, 0, 0)`)
+  - background: `--ec-main-bg-color` (`#0c0c16` | `rgb(12, 12, 22)`)
+
+<Canvas of={ColorUtilitiesStories.Variations} />
+
+
+Each color has a set of variations, which are used to define the color palette of the project.
+While the base colors are used to define the main colors of the project, the variations are used to define the shades and tints of the base colors.
+
+Keep in mind that there are classes that can easily be used to apply the colors to the elements.
+For example: `.text-primary`, `.bg-secondary` and etc. Read more about the classes in the [Color utilities](?path=/docs/utilities-colors--docs) doc.
+
+> To have better class names, we have used the `text` and `bg` prefixes for the text and background colors respectively.
+  That means `--ec-{VARIATION}-text-color` color that will fit for background and `--ec-{VARIATION}-bg-color` variation color.
+
+## Color palette
+
+<Canvas of={ColorStories.ColorTable} />
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html";
 
 const meta: Meta = {
-  title: "Variables/Colors",
+  title: "Variables/Color",
 };
 
 export default meta;
@@ -44,6 +44,7 @@ const BASE_COLORS: Color[] = [
 ];
 
 export const ColorTable: Story = {
+  tags: ["!dev"],
   name: "Color Table",
   parameters: {
     layout: "center",
@@ -116,7 +117,7 @@ export const ColorTable: Story = {
       button.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/></svg>`;
 
       tr.innerHTML = `
-        <td>${color.name}</td>
+        <td class="user-select-all">${color.name}</td>
         <td style="background-color: ${color.value};"></td>
         <td><code>--ec-color-${color.name}</code></td>
         <td><code>${color.value}</code></td>

@@ -0,0 +1,86 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as FontStories from './font.stories.ts';
+import * as TextStories from '../../utilities/text/text.stories.ts';
+
+# Font
+
+To maintain a consistent look we have there font variables that can be used in application.
+
+- Weight
+- Size
+- Line Height
+
+## Weight
+
+```
+--ec-font-{WEIGHT}
+```
+
+Weight is used to define the thickness of the text. The following weights are available:
+
+- 100
+- 200
+- 300
+- 400
+- 500
+- 600
+- 700
+- 800
+- 900
+
+There are also classes built for each weight. The classes are:
+
+- `fw-1`
+- `fw-2`
+- ...
+- `fw-9`
+
+<Canvas of={TextStories.FontWeight} />
+
+## Size
+
+```
+--ec-size-{SIZE}
+```
+
+Size is used to define the size of the text. The following sizes are available:
+
+- `sm` - `0.75rem`
+- `md` - `1rem`
+- `lg` - `1.25rem`
+- `xl` - `1.5rem`
+- `xxl` - `2rem`
+- `xxxl` - `2.5rem`
+
+There are also classes built for each size. The classes are:
+
+- `fs-1` (XXXL)
+- `fs-2` (XXL)
+- ...
+- `fs-6` (SM)
+
+<Canvas of={TextStories.FontSize} />
+
+## Line Height
+
+```
+--ec-line-height-{height}
+```
+
+Line height is used to define the space between lines of text.
+The following line heights are available:
+
+- `sm` - `1.25`
+- `1` - `1`
+- `base` - `1.5`
+- `lg` - `2`
+
+There are also classes built for each line height. The classes are:
+
+- `lh-sm` (SM)
+- `lh-1` (1)
+- `lh-base` (BASE)
+- `lh-lg` (LG)
+
+<Canvas of={FontStories.Example} />
@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/html";
+
+const meta: Meta = {
+  title: "Variables/Font",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Example: Story = {
+  tags: ["!dev"],
+  render: () => {
+    return `
+<p class="lh-1 mb-3">
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias animi qui molestiae
+  omnis deserunt recusandae rerum, sequi velit quibusdam ipsum! Magnam ipsa fugiat optio
+  dolor nihil minima suscipit hic blanditiis?
+</p>
+
+<p class="lh-sm mb-3">
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias animi qui molestiae
+  omnis deserunt recusandae rerum, sequi velit quibusdam ipsum! Magnam ipsa fugiat optio
+  dolor nihil minima suscipit hic blanditiis?
+</p>
+
+<p class="lh-base mb-3">
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias animi qui molestiae
+  omnis deserunt recusandae rerum, sequi velit quibusdam ipsum! Magnam ipsa fugiat optio
+  dolor nihil minima suscipit hic blanditiis?
+</p>
+
+<p class="lh-lg mb-3">
+  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias animi qui molestiae
+  omnis deserunt recusandae rerum, sequi velit quibusdam ipsum! Magnam ipsa fugiat optio
+  dolor nihil minima suscipit hic blanditiis?
+</p>
+`;
+  },
+};
@@ -0,0 +1,17 @@
+# Form
+
+We have several utility variable for [Form](?path=/docs/forms-introduction--docs) elements.
+
+These variables are:
+
+```css
+:root {
+--ec-form-utilities-bg-color: #26776d;
+--ec-form-utilities-border-color: #ededee;
+--ec-form-utilities-box-shadow: 0 0 0 0.25rem rgba(38, 119, 109, 0.25);
+--ec-form-utilities-color-primary: var(--ec-color-white);
+--ec-form-utilities-color-secondary: var(--ec-color-black-30);
+--ec-form-utilities-color-disabled: var(--ec-color-black-60);
+--ec-form-utilities-color-invalid: var(--ec-color-red-80);
+}
+```