@lucca-front/scss 8.2.2 → 9.0.0-alpha.3

package/package.json

@@ -1,25 +1,25 @@
 {
-  "name": "@lucca-front/scss",
-  "version": "8.2.2",
-  "description": "a scss-framework based on trello's css naming",
-  "main": "src/main.scss",
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/LuccaSA/lucca-front.git"
-  },
-  "keywords": [
-    "lucca",
-    "scss"
-  ],
-  "public": true,
-  "author": "jeremie biron <jbiron@lucca.fr>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/LuccaSA/lucca-front/issues"
-  },
-  "homepage": "https://github.com/LuccaSA/lucca-front#readme",
-  "peerDependencies": {
-    "@lucca-front/icons": ">=8.0.0 <9.0.0"
-  }
+	"name": "@lucca-front/scss",
+	"version": "9.0.0-alpha.3",
+	"description": "a scss-framework based on trello's css naming",
+	"main": "src/main.scss",
+	"scripts": {},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/LuccaSA/lucca-front.git"
+	},
+	"keywords": [
+		"lucca",
+		"scss"
+	],
+	"public": true,
+	"author": "jeremie biron <jbiron@lucca.fr>",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/LuccaSA/lucca-front/issues"
+	},
+	"homepage": "https://github.com/LuccaSA/lucca-front#readme",
+	"peerDependencies": {
+		"@lucca-front/icons": ">=8.0.0 <9.0.0"
+	}
 }

package/src/commons/base.scss

@@ -0,0 +1,107 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'config';
+@use 'core';
+
+@import url('//fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
+
+// @font-face {
+// 	font-family: 'Source Sans Pro';
+// 	font-weight: 200 900;
+// 	font-style: normal;
+// 	font-stretch: normal;
+// 	font-display: swap;
+// 	src: url('//cdn.lucca.fr/fonts/SourceSans/SourceSans3VF-Roman.ttf.woff2') format('woff2'),
+// 		url('//cdn.lucca.fr/fonts/SourceSans/SourceSans3VF-Roman.ttf.woff') format('woff'),
+// 		url('//cdn.lucca.fr/fonts/SourceSans/SourceSans3VF-Roman.ttf') format('truetype');
+// }
+
+*,
+::after,
+::before {
+	box-sizing: border-box;
+}
+
+html {
+	@include core.cssvars('commons-border-radius', config.$borderRadius);
+	@include core.cssvars('commons-animations', config.$animations);
+	@include core.cssvars('commons-animations-durations', config.$durations);
+	@include core.cssvars('commons-disabled', config.$disabled);
+	@include core.cssvars('commons-loading', config.$loading);
+	@include core.cssvars('commons-text-link', config.$textLink);
+
+	@include core.cssvars('palettes-primary', config.$primary);
+	@include core.cssvars('palettes-secondary', config.$secondary);
+	@include core.cssvars('palettes-grey', config.$grey);
+	@include core.cssvars('palettes-success', config.$success);
+	@include core.cssvars('palettes-warning', config.$warning);
+	@include core.cssvars('palettes-error', config.$error);
+
+	@include core.cssvars('breakpoints', config.$breakpoints, '-breakAt');
+	@include core.cssvars('spacings', config.$spacings);
+
+	@include core.cssvars('commons-elevations-elevation', config.$elevations);
+	@include core.cssvars('commons-box-shadow', config.$boxShadows);
+
+	@each $key, $map in config.$sizes {
+		@include core.cssvars('sizes-#{$key}', $map);
+	}
+
+	--colors-white-color: #ffffff;
+
+	--commons-background-base: #f5f5f5;
+	--commons-banner-height: 50px;
+	--commons-font-family: 'Source Sans Pro', Tahoma, sans-serif;
+	--commons-transition: all 150ms ease;
+
+	--palettes-grey-900-rbg: 19, 29, 53;
+
+	height: -webkit-fill-available;
+}
+
+body {
+	min-height: 100vh;
+	background-color: var(--commons-background-base);
+	color: var(--palettes-grey-800);
+	font-family: var(--commons-font-family);
+	font-size: var(--sizes-standard-font-size);
+	line-height: var(--sizes-standard-line-height);
+
+	@supports (-webkit-touch-callout: none) {
+		min-height: -webkit-fill-available;
+	}
+}
+
+p {
+	margin: 0 0 1rem;
+}
+
+abbr {
+	&[title] {
+		border: none;
+		text-decoration: none;
+	}
+}
+
+a {
+	color: var(--commons-text-link-color);
+	cursor: pointer;
+	text-decoration: underline;
+
+	&:hover {
+		color: var(--commons-text-link-hover);
+	}
+}
+
+strong,
+b {
+	font-weight: 600;
+}
+
+@each $palette in core.$palettes {
+	.palette-#{$palette} {
+		@each $shade in map.keys(config.$primary) {
+			--palettes-#{$shade}: var(--palettes-#{$palette}-#{$shade});
+		}
+	}
+}

package/src/commons/config.scss

@@ -0,0 +1,201 @@
+$primary: (
+	text: #ffffff,
+	50: #ffede0,
+	100: #ffe1cc,
+	200: #ffd3b3,
+	300: #ffc79e,
+	400: #ffb685,
+	500: #ff9d5c,
+	600: #ff7e29,
+	700: #ff6600,
+	800: #cc3d00,
+	900: #a82d00,
+);
+
+$secondary: (
+	text: #ffffff,
+	50: #e2ebfd,
+	100: #ccddff,
+	200: #b3ccff,
+	300: #9ebeff,
+	400: #85aeff,
+	500: #6699ff,
+	600: #4280fa,
+	700: #2067f3,
+	800: #0a48c2,
+	900: #083691,
+);
+
+$grey: (
+	text: #ffffff,
+	50: #ebf0fa,
+	100: #e0e7f6,
+	200: #d2dcef,
+	300: #becbe4,
+	400: #acbbd7,
+	500: #96a6c5,
+	600: #667799,
+	700: #445473,
+	800: #2a3551,
+	900: #131d35,
+);
+
+$success: (
+	text: #ffffff,
+	50: #f7fef6,
+	100: #e7fae5,
+	200: #d7f7d4,
+	300: #c2f4be,
+	400: #aceca7,
+	500: #8cdb85,
+	600: #49b540,
+	700: #3c9933,
+	800: #1b7d12,
+	900: #0e6b06,
+);
+
+$warning: (
+	text: #ffffff,
+	50: #fef5f0,
+	100: #ffeee5,
+	200: #ffe4d6,
+	300: #ffcfb8,
+	400: #fcbc9c,
+	500: #f79c6e,
+	600: #f46a25,
+	700: #e55006,
+	800: #cc3d00,
+	900: #b23000,
+);
+
+$error: (
+	text: #ffffff,
+	50: #fff5f7,
+	100: #ffecef,
+	200: #ffe0e6,
+	300: #fcc5ce,
+	400: #fba7b5,
+	500: #ef8f9f,
+	600: #ef3957,
+	700: #e51a3b,
+	800: #af0e29,
+	900: #91081f,
+);
+
+$breakpoints: (
+	xxxs: 320px,
+	xxs: 480px,
+	xs: 640px,
+	s: 800px,
+	m: 1024px,
+	l: 1280px,
+	xl: 1366px,
+	xxl: 1600px,
+	xxxl: 1920px,
+);
+
+$spacings: (
+	reset: 0,
+	smallest: 0.25rem,
+	smaller: 0.5rem,
+	small: 1rem,
+	standard: 1.5rem,
+	big: 2rem,
+	bigger: 3rem,
+	biggest: 4rem,
+);
+
+$sizes: (
+	smaller: (
+		font-size: 0.75rem,
+		line-height: 1rem,
+		vertical-padding: 0,
+	),
+	small: (
+		font-size: 0.875rem,
+		line-height: 1.25rem,
+		vertical-padding: 0.125rem,
+	),
+	standard: (
+		font-size: 1rem,
+		line-height: 1.5rem,
+		vertical-padding: 0.125rem,
+	),
+	big: (
+		font-size: 1.125rem,
+		line-height: 1.5rem,
+		vertical-padding: 0.25rem,
+	),
+	bigger: (
+		font-size: 1.375rem,
+		line-height: 1.75rem,
+		vertical-padding: 0.375rem,
+	),
+	biggest: (
+		font-size: 1.75rem,
+		line-height: 2rem,
+		vertical-padding: 0.25rem,
+	),
+	headline: (
+		font-size: 2.25rem,
+		line-height: 2.5rem,
+		vertical-padding: 0.5rem,
+	),
+);
+
+$borderRadius: (
+	'': 4px,
+	'big': 8px,
+);
+
+$elevations: (
+	'1': '0 1px 2px rgba(0, 0, 0, 0.06), 0px 2px 8px rgba(0, 0, 0, 0.04)',
+	'2': '0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 6px rgba(0, 0, 0, 0.05)',
+	'3': '0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 10px rgba(0, 0, 0, 0.06)',
+	'4': '0 0 0 1px rgba(0, 0, 0, 0.03), 0 3px 6px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08)',
+	'5': '0 0 0 1px rgba(0, 0, 0, 0.03), 0 4px 8px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08)',
+	'6': '0 0 0 1px rgba(0, 0, 0, 0.03), -2px 2px 8px rgba(0, 0, 0, 0.04), -12px 6px 24px rgba(0, 0, 0, 0.06)',
+);
+
+$boxShadows: (
+	'hard': 'var(--commons-box-shadow-xxs)',
+	'xxs': '0 2px 8px rgba(var(--palettes-grey-900-rbg), .2), 0 1px 2px rgba(var(--palettes-grey-900-rbg), 0.15)',
+	'xs': '0 1px 2px rgba(var(--palettes-grey-900-rbg), 0.06), 0 2px 8px rgba(var(--palettes-grey-900-rbg), 0.04)',
+	's': 'var(--commons-elevations-elevation-2)',
+	'm': 'var(--commons-elevations-elevation-3)',
+	'l': 'var(--commons-elevations-elevation-4)',
+	'xl': 'var(--commons-elevations-elevation-5)',
+	'xxl': 'var(--commons-elevations-elevation-6)',
+);
+
+$disabled: (
+	'opacity': 0.4,
+	'background': #e5e5e5,
+	'color': #999,
+	'placeholder': #bbb,
+);
+
+$animations: (
+	'translate': 3rem,
+	'function': ease,
+	'iteration-count': 5,
+);
+
+$durations: (
+	'fast': 100ms,
+	'standard': 250ms,
+	'slow': 350ms,
+);
+
+$loading: (
+	'background': var(--palettes-primary-200),
+	'frontground': var(--palettes-primary-700),
+	'speed': 600ms,
+);
+
+$textLink: (
+	color: #00b2ed,
+	hover: #16c5fe,
+);
+
+$prefix: 'u-';

package/src/commons/core.scss

@@ -0,0 +1,136 @@
+@use 'config';
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:list';
+
+$contents: '0';
+$boxModel: 'margin', 'padding', 'border';
+$boxDirection: '', 'top', 'bottom', 'left', 'right';
+$corners: '', 'top-left-', 'top-right-', 'bottom-left-', 'bottom-right-';
+$gaps: 'column-gap', 'row-gap', 'gap';
+$displays: 'block', 'flex', 'inline', 'inline-flex', 'inline-block', 'none';
+$direction: 'column', 'column-reverse', 'row', 'row-reverse';
+$wrap: 'wrap', 'nowrap', 'wrap-reverse';
+$justify: 'flex-start', 'flex-end', 'space-around', 'space-between', 'space-evenly', 'center';
+$align: 'flex-start', 'flex-end', 'baseline', 'stretch', 'center';
+$flex: '0', '1', 'auto';
+$basis: '0', 'auto';
+$order: '-1', '1';
+$textAlign: 'left', 'center', 'right';
+$visibility: 'visible', 'hidden', 'collapse';
+$fontWeight: '400', '600';
+$pointerEvents: 'none', 'auto';
+$scrollBehavior: 'auto', 'smooth';
+$whiteSpace: 'normal', 'nowrap';
+$float: 'left', 'right';
+$verticalAlign: 'baseline', 'sub', 'super', 'text-top', 'text-bottom', 'middle', 'top', 'bottom';
+$position: 'absolute', 'relative', 'static', 'fixed', 'sticky';
+
+$palettes: 'primary', 'secondary', 'grey', 'success', 'warning', 'error';
+$states: 'error,' 'warning', 'success';
+
+@function capitalize($string) {
+	@return to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}
+
+@function camelize($string) {
+	$progress: $string;
+	$result: '';
+	$exclude: ' ', '-', '–', '—', '_', ',', ';', ':', '.';
+
+	@while string.length($progress) > 0 {
+		$char: string.slice($progress, 1, 1);
+
+		@if not not list.index($exclude, $char) {
+			$progress: capitalize(string.slice($progress, 2, 2)) + string.slice($progress, 3);
+		} @else {
+			$result: $result + $char;
+			$progress: string.slice($progress, 2);
+		}
+	}
+
+	@return $result;
+}
+
+@mixin cssvars($name, $properties, $after: '') {
+	@each $key, $value in $properties {
+		--#{$name}#{if($key == '', '', '-')}#{$key}#{$after}: #{$value};
+	}
+}
+
+@mixin classes($name, $properties, $suffix: '!important', $prefix: config.$prefix) {
+	@each $property in $properties {
+		@if $prefix == config.$prefix {
+			.#{$prefix}#{camelize($name)}#{capitalize(camelize($property))} {
+				#{$name}: #{$property} #{$suffix};
+			}
+		} @else {
+			.#{$prefix}#{capitalize(camelize($name))}#{capitalize(camelize($property))} {
+				#{$name}: #{$property} #{$suffix};
+			}
+		}
+	}
+}
+
+@mixin spacing($boxModel, $boxDirection, $key, $value, $prefix: config.$prefix, $suffix: '!important') {
+	.#{$prefix}#{camelize($boxModel)}#{capitalize($boxDirection)}#{capitalize($key)} {
+		#{$boxModel}#{if($boxDirection == '', '', '-')}#{$boxDirection}: $value #{$suffix};
+	}
+}
+
+@mixin spacings {
+	@each $boxModel in $boxModel {
+		@each $boxDirection in $boxDirection {
+			@each $key, $value in config.$spacings {
+				@if $boxModel != 'border' or $value == 0 {
+					@include spacing($boxModel, $boxDirection, $key, $value);
+				}
+			}
+
+			@if $boxModel == 'margin' {
+				@include spacing($boxModel, $boxDirection, $key: 'auto', $value: auto);
+			}
+		}
+	}
+
+	@each $gap in $gaps {
+		@each $key, $value in config.$spacings {
+			@include spacing($gap, $boxDirection: '', $key: $key, $value: $value);
+		}
+	}
+}
+
+@mixin sizes($suffix: '!important') {
+	@each $key, $value in config.$sizes {
+		.#{config.$prefix}text#{capitalize($key)} {
+			font-size: var(--sizes-#{$key}-font-size) !important;
+			line-height: var(--sizes-#{$key}-line-height) !important;
+		}
+	}
+}
+
+@mixin palettes($suffix: '!important') {
+	@each $palette in $palettes {
+		.#{config.$prefix}text#{capitalize($palette)} {
+			color: var(--palettes-#{$palette}-700) !important;
+		}
+	}
+
+	.u-textLight {
+		color: var(--palettes-grey-600) !important;
+	}
+
+	.u-textPlaceholder {
+		color: var(--palettes-grey-400) !important;
+	}
+}
+
+@mixin borderRadius($suffix: '!important') {
+	@each $corner in $corners {
+		@each $key, $value in config.$borderRadius {
+			.#{config.$prefix}border#{capitalize(camelize($corner))}Radius#{capitalize($key)} {
+				border-#{$corner}radius: $value;
+			}
+		}
+	}
+}

package/src/commons/index.scss

@@ -0,0 +1,2 @@
+@forward 'normalize'; // 6 Ko
+@forward 'base'; // 8 Ko