@ryuzaki13/react-foundation-ui 0.1.0

package/src/styles/_margin.scss

@@ -0,0 +1,315 @@
+// MARGIN
+
+.marginTopXs {
+	margin-top: var(--space-xs);
+}
+.marginTopSm {
+	margin-top: var(--space-sm);
+}
+.marginTopMd {
+	margin-top: var(--space-md);
+}
+.marginTopLg {
+	margin-top: var(--space-lg);
+}
+.marginTopXl {
+	margin-top: var(--space-xl);
+}
+
+.marginRightXs {
+	margin-right: var(--space-xs);
+}
+.marginRightSm {
+	margin-right: var(--space-sm);
+}
+.marginRightMd {
+	margin-right: var(--space-md);
+}
+.marginRightLg {
+	margin-right: var(--space-lg);
+}
+.marginRightXl {
+	margin-right: var(--space-xl);
+}
+
+.marginBottomXs {
+	margin-bottom: var(--space-xs);
+}
+.marginBottomSm {
+	margin-bottom: var(--space-sm);
+}
+.marginBottomMd {
+	margin-bottom: var(--space-md);
+}
+.marginBottomLg {
+	margin-bottom: var(--space-lg);
+}
+.marginBottomXl {
+	margin-bottom: var(--space-xl);
+}
+
+.marginLeftXs {
+	margin-left: var(--space-xs);
+}
+.marginLeftSm {
+	margin-left: var(--space-sm);
+}
+.marginLeftMd {
+	margin-left: var(--space-md);
+}
+.marginLeftLg {
+	margin-left: var(--space-lg);
+}
+.marginLeftXl {
+	margin-left: var(--space-xl);
+}
+
+.marginInlineXs {
+	@extend .marginLeftXs;
+	@extend .marginRightXs;
+}
+.marginInlineSm {
+	@extend .marginLeftSm;
+	@extend .marginRightSm;
+}
+.marginInlineMd {
+	@extend .marginLeftMd;
+	@extend .marginRightMd;
+}
+.marginInlineLg {
+	@extend .marginLeftLg;
+	@extend .marginRightLg;
+}
+.marginInlineXl {
+	@extend .marginLeftXl;
+	@extend .marginRightXl;
+}
+
+.marginBlockXs {
+	@extend .marginTopXs;
+	@extend .marginBottomXs;
+}
+.marginBlockSm {
+	@extend .marginTopSm;
+	@extend .marginBottomSm;
+}
+.marginBlockMd {
+	@extend .marginTopMd;
+	@extend .marginBottomMd;
+}
+.marginBlockLg {
+	@extend .marginTopLg;
+	@extend .marginBottomLg;
+}
+.marginBlockXl {
+	@extend .marginTopXl;
+	@extend .marginBottomXl;
+}
+
+// TODO: unused
+.marginXs {
+	@extend .marginBlockXs;
+	@extend .marginInlineXs;
+}
+// TODO: unused
+.marginSm {
+	@extend .marginBlockSm;
+	@extend .marginInlineSm;
+}
+.marginMd {
+	@extend .marginBlockMd;
+	@extend .marginInlineMd;
+}
+.marginLg {
+	@extend .marginBlockLg;
+	@extend .marginInlineLg;
+}
+// TODO: unused
+.marginXl {
+	@extend .marginBlockXl;
+	@extend .marginInlineXl;
+}
+
+.marginTop0 {
+	margin-top: 0;
+}
+.marginRight0 {
+	margin-right: 0;
+}
+.marginBottom0 {
+	margin-bottom: 0;
+}
+.marginLeft0 {
+	margin-left: 0;
+}
+.marginBlock0 {
+	@extend .marginTop0;
+	@extend .marginBottom0;
+}
+.marginInline0 {
+	@extend .marginRight0;
+	@extend .marginLeft0;
+}
+.margin0 {
+	@extend .marginBlock0;
+	@extend .marginInline0;
+}
+
+// TODO: unused
+.paragraph0 {
+	--paragraph-margin: 0;
+}
+
+// PADDING
+
+.paddingTopXs {
+	padding-top: var(--space-xs);
+}
+.paddingTopSm {
+	padding-top: var(--space-sm);
+}
+.paddingTopMd {
+	padding-top: var(--space-md);
+}
+.paddingTopLg {
+	padding-top: var(--space-lg);
+}
+.paddingTopXl {
+	padding-top: var(--space-xl);
+}
+
+.paddingRightXs {
+	padding-right: var(--space-xs);
+}
+.paddingRightSm {
+	padding-right: var(--space-sm);
+}
+.paddingRightMd {
+	padding-right: var(--space-md);
+}
+.paddingRightLg {
+	padding-right: var(--space-lg);
+}
+.paddingRightXl {
+	padding-right: var(--space-xl);
+}
+
+.paddingBottomXs {
+	padding-bottom: var(--space-xs);
+}
+.paddingBottomSm {
+	padding-bottom: var(--space-sm);
+}
+.paddingBottomMd {
+	padding-bottom: var(--space-md);
+}
+.paddingBottomLg {
+	padding-bottom: var(--space-lg);
+}
+.paddingBottomXl {
+	padding-bottom: var(--space-xl);
+}
+
+.paddingLeftXs {
+	padding-left: var(--space-xs);
+}
+.paddingLeftSm {
+	padding-left: var(--space-sm);
+}
+.paddingLeftMd {
+	padding-left: var(--space-md);
+}
+.paddingLeftLg {
+	padding-left: var(--space-lg);
+}
+.paddingLeftXl {
+	padding-left: var(--space-xl);
+}
+
+.paddingInlineXs {
+	@extend .paddingLeftXs;
+	@extend .paddingRightXs;
+}
+.paddingInlineSm {
+	@extend .paddingLeftSm;
+	@extend .paddingRightSm;
+}
+.paddingInlineMd {
+	@extend .paddingLeftMd;
+	@extend .paddingRightMd;
+}
+.paddingInlineLg {
+	@extend .paddingLeftLg;
+	@extend .paddingRightLg;
+}
+.paddingInlineXl {
+	@extend .paddingLeftXl;
+	@extend .paddingRightXl;
+}
+
+.paddingBlockXs {
+	@extend .paddingTopXs;
+	@extend .paddingBottomXs;
+}
+.paddingBlockSm {
+	@extend .paddingTopSm;
+	@extend .paddingBottomSm;
+}
+.paddingBlockMd {
+	@extend .paddingTopMd;
+	@extend .paddingBottomMd;
+}
+.paddingBlockLg {
+	@extend .paddingTopLg;
+	@extend .paddingBottomLg;
+}
+.paddingBlockXl {
+	@extend .paddingTopXl;
+	@extend .paddingBottomXl;
+}
+
+.paddingXs {
+	@extend .paddingBlockXs;
+	@extend .paddingInlineXs;
+}
+.paddingSm {
+	@extend .paddingBlockSm;
+	@extend .paddingInlineSm;
+}
+.paddingMd {
+	@extend .paddingBlockMd;
+	@extend .paddingInlineMd;
+}
+.paddingLg {
+	@extend .paddingBlockLg;
+	@extend .paddingInlineLg;
+}
+.paddingXl {
+	@extend .paddingBlockXl;
+	@extend .paddingInlineXl;
+}
+
+.paddingTop0 {
+	padding-top: 0;
+}
+.paddingRight0 {
+	padding-right: 0;
+}
+.paddingBottom0 {
+	padding-bottom: 0;
+}
+.paddingLeft0 {
+	padding-left: 0;
+}
+.paddingBlock0 {
+	@extend .paddingTop0;
+	@extend .paddingBottom0;
+}
+.paddingInline0 {
+	@extend .paddingRight0;
+	@extend .paddingLeft0;
+}
+.padding0 {
+	@extend .paddingBlock0;
+	@extend .paddingInline0;
+}

package/src/styles/_normalize.scss

@@ -0,0 +1,194 @@
+/**
+  Нормализация блочной модели
+ */
+*,
+::before,
+::after {
+	box-sizing: border-box;
+	letter-spacing: inherit;
+	word-spacing: inherit;
+	line-height: inherit;
+}
+
+/**
+  Убираем внутренние отступы слева тегам списков,
+  у которых есть атрибут class
+ */
+:where(ul, ol):where([class]) {
+	padding-left: 0;
+}
+
+/**
+  Убираем внешние отступы body и двум другим тегам,
+  у которых есть атрибут class
+ */
+body,
+:where(blockquote, figure):where([class]) {
+	margin: 0;
+}
+
+/**
+  Убираем внешние отступы вертикали нужным тегам,
+  у которых есть атрибут class
+ */
+:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
+	margin-block: 0;
+}
+
+:where(dd[class]) {
+	margin-left: 0;
+}
+
+:where(fieldset[class]) {
+	margin-left: 0;
+	padding: 0;
+	border: none;
+}
+
+/**
+  Убираем стандартный маркер маркированному списку,
+  у которого есть атрибут class
+ */
+:where(ul[class]) {
+	list-style: none;
+}
+
+:where(address[class]) {
+	font-style: normal;
+}
+
+hr {
+	margin: 0;
+	border: none;
+	border-top: var(--border);
+	border-left: var(--border);
+}
+
+/**
+  Обнуляем вертикальные внешние отступы параграфа,
+  объявляем локальную переменную для внешнего отступа вниз,
+  чтобы избежать взаимодействие с более сложным селектором
+ */
+p {
+	margin-block: 0;
+}
+
+/**
+  Внешний отступ вниз для параграфа без атрибута class,
+  который расположен не последним среди своих соседних элементов
+	p:where(:not([class]):not(:last-child)) {
+ */
+p:not(:last-child),
+ul:where(:not([class]):not(:last-child)),
+ol:where(:not([class]):not(:last-child)) {
+	margin-bottom: var(--paragraph-margin);
+}
+
+p:not(:first-child),
+ul:where(:not([class]):not(:first-child)),
+ol:where(:not([class]):not(:first-child)) {
+	margin-top: var(--paragraph-margin);
+}
+
+/**
+  Упрощаем работу с изображениями и видео
+ */
+img,
+video {
+	display: block;
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: cover;
+}
+
+/**
+  Наследуем свойства шрифт для полей ввода
+ */
+input,
+textarea,
+select,
+button {
+	font-family: inherit;
+	font-size: 1em;
+}
+
+html {
+	/**
+	  Пригодится в большинстве ситуаций
+	  (когда, например, нужно будет "прижать" футер к низу сайта)
+	 */
+	height: 100%;
+	/**
+	  Убираем скачок интерфейса по горизонтали
+	  при появлении / исчезновении скроллбара
+	 */
+}
+
+/**
+  Плавный скролл
+ */
+html,
+:has(:target) {
+	scroll-behavior: smooth;
+}
+
+.link {
+	color: var(--content-accent);
+
+	&:visited {
+		color: var(--content-accent);
+	}
+
+	&:hover {
+		color: var(--status-info-fill);
+	}
+
+	&:active {
+		color: var(--status-error-fill);
+	}
+}
+
+a:not([class]) {
+	@extend .link;
+
+	text-decoration-line: underline;
+	text-decoration-style: solid;
+}
+
+a.unlink {
+	text-decoration: none;
+	color: inherit;
+}
+
+/**
+  Курсор-рука при наведении на элемент
+ */
+button,
+label {
+	cursor: pointer;
+}
+
+/**
+  Чиним баг задержки смены цвета при взаимодействии с svg-элементами
+ */
+svg * {
+	transition-property: fill, stroke;
+}
+
+/**
+  Приведение рамок таблиц в классический 'collapse' вид
+ */
+:where(table) {
+	border-collapse: collapse;
+	border-color: currentColor;
+}
+
+button {
+	// reset button styles
+	border: none;
+	color: inherit;
+	background: none;
+	padding: 0;
+	margin: 0;
+	appearance: none;
+}

package/src/styles/_root-tokens.scss

@@ -0,0 +1,41 @@
+@use "./config" as stylesConfig;
+
+:root {
+	@include stylesConfig.emit-declarations(stylesConfig.$root-tokens);
+
+	@each $name, $tokens in stylesConfig.$font-size-presets {
+		&[data-font-size="#{$name}"] {
+			@include stylesConfig.emit-declarations($tokens);
+		}
+	}
+
+	@each $name, $tokens in stylesConfig.$line-height-presets {
+		&[data-line-height="#{$name}"] {
+			@include stylesConfig.emit-declarations($tokens);
+		}
+	}
+
+	@each $name, $tokens in stylesConfig.$letter-spacing-presets {
+		&[data-letter-spacing="#{$name}"] {
+			@include stylesConfig.emit-declarations($tokens);
+		}
+	}
+
+	@each $name, $tokens in stylesConfig.$word-spacing-presets {
+		&[data-word-spacing="#{$name}"] {
+			@include stylesConfig.emit-declarations($tokens);
+		}
+	}
+
+	@each $name, $tokens in stylesConfig.$paragraph-spacing-presets {
+		&[data-paragraph-spacing="#{$name}"] {
+			@include stylesConfig.emit-declarations($tokens);
+		}
+	}
+}
+
+@media (min-resolution: 2dppx) {
+	:root {
+		@include stylesConfig.emit-declarations(stylesConfig.$retina-tokens);
+	}
+}