@ryuzaki13/react-foundation-ui 0.1.0

package/src/styles/mixins/_controls.scss

@@ -0,0 +1,125 @@
+@use "./mixin" as *;
+
+@mixin ui-tone($tone) {
+	--ui-tone-text: var(--status-#{$tone}-text);
+	--ui-tone-text-hover: var(--status-#{$tone}-text-hover);
+	--ui-tone-text-active: var(--status-#{$tone}-text-active);
+	--ui-tone-fill: var(--status-#{$tone}-fill);
+	--ui-tone-fill-hover: var(--status-#{$tone}-fill-hover);
+	--ui-tone-fill-active: var(--status-#{$tone}-fill-active);
+	--ui-tone-on-fill: var(--status-#{$tone}-on-fill);
+	--ui-tone-soft: var(--status-#{$tone}-soft);
+	--ui-tone-border: var(--status-#{$tone}-border);
+	--ui-tone-border-hover: var(--status-#{$tone}-border-hover);
+	--ui-tone-border-active: var(--status-#{$tone}-border-active);
+	--ui-tone-border-focus: var(--status-#{$tone}-border-focus);
+	--ui-tone-ghost-hover: color-mix(in srgb, var(--status-#{$tone}-fill-hover) 10%, var(--surface-0));
+	--ui-tone-ghost-active: color-mix(in srgb, var(--status-#{$tone}-fill-active) 20%, var(--surface-0));
+}
+
+@mixin ui-appearance-solid {
+	--ui-color: var(--ui-tone-on-fill);
+	--ui-color-hover: var(--ui-tone-on-fill);
+	--ui-color-active: var(--ui-tone-on-fill);
+	--ui-background: var(--ui-tone-fill);
+	--ui-background-hover: var(--ui-tone-fill-hover);
+	--ui-background-active: var(--ui-tone-fill-active);
+	--ui-border-color: transparent;
+	--ui-border-hover: transparent;
+	--ui-border-active: transparent;
+	--ui-border-focus: transparent;
+}
+
+@mixin ui-appearance-outline {
+	--ui-color: var(--ui-tone-text);
+	--ui-color-hover: var(--ui-tone-text-hover);
+	--ui-color-active: var(--ui-tone-text-active);
+	--ui-background: var(--surface-0);
+	--ui-background-hover: var(--surface-0);
+	--ui-background-active: var(--surface-0);
+	--ui-border-color: var(--ui-tone-border);
+	--ui-border-hover: var(--ui-tone-border-hover);
+	--ui-border-active: var(--ui-tone-border-active);
+	--ui-border-focus: var(--ui-tone-border-focus);
+}
+
+@mixin ui-appearance-ghost {
+	--ui-color: var(--ui-tone-text);
+	--ui-color-hover: var(--ui-tone-text-hover);
+	--ui-color-active: var(--ui-tone-text-active);
+	--ui-background: transparent;
+	--ui-background-hover: var(--ui-tone-ghost-hover);
+	--ui-background-active: var(--ui-tone-ghost-active);
+	--ui-border-color: transparent;
+	--ui-border-hover: transparent;
+	--ui-border-active: transparent;
+	--ui-border-focus: transparent;
+}
+
+@mixin ui-appearance-transparent {
+	--ui-color: var(--ui-tone-text);
+	--ui-color-hover: var(--ui-tone-text-hover);
+	--ui-color-active: var(--ui-tone-text-active);
+	--ui-background: transparent;
+	--ui-background-hover: transparent;
+	--ui-background-active: transparent;
+	--ui-border-color: transparent;
+	--ui-border-hover: transparent;
+	--ui-border-active: transparent;
+	--ui-border-focus: transparent;
+}
+
+@mixin ui-control-base {
+	color: var(--ui-color, var(--content-0));
+	background-color: var(--ui-background, var(--surface-0));
+	border: var(--border-width) solid var(--ui-border-color, transparent);
+	border-radius: var(--ui-radius, var(--radius-sm));
+	outline: none;
+
+	transition-property: border-color, color, background-color, box-shadow, padding, opacity, transform;
+	transition-duration: var(--transition-fast);
+	transition-timing-function: ease;
+
+	&:hover {
+		color: var(--ui-color-hover, var(--ui-color, var(--content-0)));
+		background-color: var(--ui-background-hover, var(--ui-background, transparent));
+		border-color: var(--ui-border-hover, var(--ui-border-color, transparent));
+	}
+
+	&:active {
+		color: var(--ui-color-active, var(--ui-color-hover, var(--ui-color, var(--content-0))));
+		background-color: var(--ui-background-active, var(--ui-background-hover, var(--ui-background, transparent)));
+		border-color: var(--ui-border-active, var(--ui-border-hover, var(--ui-border-color, transparent)));
+	}
+
+	&:focus,
+	&:focus-within {
+		border-color: var(--ui-border-focus, var(--ui-border-active, var(--ui-border-color, transparent)));
+	}
+
+	&:focus-visible {
+		@include focusVisible;
+	}
+
+	// Для нормальных компонентов с реальным input/button элементов
+	&:disabled,
+	// Для специфичных компонентов, которые выдают внешне за input/button и имеют класс .uiInputControlFake
+	&[data-disabled] {
+		cursor: default;
+		pointer-events: none;
+		// opacity: var(--disabled-opacity);
+		color: var(--content-2);
+		background-color: var(--surface-2);
+		border-color: var(--overlay-backdrop);
+	}
+}
+
+@mixin ui-static-surface {
+	color: var(--ui-color, var(--content-0));
+	background-color: var(--ui-background, transparent);
+	border: var(--border-width) solid var(--ui-border-color, transparent);
+	border-radius: var(--ui-radius, var(--radius-sm));
+	transition-property: border-color, color, background-color, opacity;
+	transition-duration: var(--transition-fast);
+	transition-timing-function: ease;
+}

package/src/styles/mixins/_index.scss

@@ -0,0 +1,3 @@
+@forward "mixin";
+@forward "media";
+@forward "controls";

package/src/styles/mixins/_media.scss

@@ -0,0 +1,70 @@
+@use "sass:math";
+
+@function toEm($pixel) {
+	@if math.is-unitless($pixel) {
+		@return math.div($pixel, 16) + em;
+	} @else {
+		@error "Функция toEm должна принимать число без единиц измерения!";
+	}
+}
+
+@function toRem($pixel) {
+	@if math.is-unitless($pixel) {
+		@return math.div($pixel, 16) + rem;
+	} @else {
+		@error "Функция toEm должна принимать число без единиц измерения!";
+	}
+}
+
+$laptop: 1919.98;
+$tablet: 1151.98;
+$mobile: 767.98;
+$mobile-s: 479.98;
+
+@mixin laptop-above {
+	@media (width > toEm($laptop)) {
+		@content;
+	}
+}
+
+@mixin laptop {
+	@media (width <= toEm($laptop)) {
+		@content;
+	}
+}
+
+@mixin tablet-above {
+	@media (min-width: toEm($tablet)) {
+		@content;
+	}
+}
+
+@mixin tablet {
+	@media (width <= toEm($tablet)) {
+		@content;
+	}
+}
+
+@mixin mobile-above {
+	@media (min-width: toEm($mobile)) {
+		@content;
+	}
+}
+
+@mixin mobile {
+	@media (width <= toEm($mobile)) {
+		@content;
+	}
+}
+
+@mixin mobile-s-above {
+	@media (width > toEm($mobile-s)) {
+		@content;
+	}
+}
+
+@mixin mobile-s {
+	@media (width <= toEm($mobile-s)) {
+		@content;
+	}
+}

package/src/styles/mixins/_mixin.scss

@@ -0,0 +1,299 @@
+@use "sass:math";
+@use "sass:map";
+@use "media" as *;
+
+// @function fluid($max: 100, $min: 10) {
+// 	$maxViewportWidth: 2560;
+// 	$minViewportWidth: 390;
+
+// 	$maxSize: math.div($max, 16);
+// 	$minSize: math.div($min, 16);
+// 	$maxWidth: math.div($maxViewportWidth, 16);
+// 	$minWidth: math.div($minViewportWidth, 16);
+
+// 	$slope: math.div(($maxSize - $minSize), ($maxWidth - $minWidth));
+// 	$yAxisIntersection: -$minWidth * $slope + $minSize;
+
+// 	@return clamp(#{$minSize * 1rem}, #{$yAxisIntersection * 1rem} + #{$slope * 100vw}, #{$maxSize * 1rem});
+// }
+
+@mixin stepped-font-var($name, $min: 14, $max: 16) {
+	// @if $min < 16 {
+	// 	@error "UI font-size добжен быть не менее 16px.";
+	// }
+
+	#{$name}: #{toEm($max)};
+
+	@include laptop {
+		#{$name}: #{toEm(math.max($min, $max - 1))};
+	}
+
+	@include tablet {
+		#{$name}: #{toEm(math.max($min, $max - 2))};
+	}
+
+	@include mobile {
+		#{$name}: #{toEm($min)};
+	}
+}
+
+@mixin stepped-font($base: 16) {
+	@if $base < 16 {
+		@error "UI font-size добжен быть не менее 16px.";
+	}
+
+	font-size: #{toRem($base + 4)};
+
+	@include laptop {
+		font-size: #{toRem($base)};
+	}
+
+	@include tablet {
+		font-size: #{toRem($base + 2)};
+	}
+
+	@include mobile {
+		font-size: #{toRem($base + 4)};
+	}
+}
+
+@mixin hide {
+	opacity: 0;
+	visibility: hidden;
+}
+
+@mixin srOnly {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	margin: -1px !important;
+	border: 0 !important;
+	padding: 0 !important;
+	white-space: nowrap !important;
+	clip-path: inset(100%) !important;
+	clip: rect(0 0 0 0) !important;
+	overflow: hidden !important;
+}
+
+@mixin visuallyHidden {
+	@include srOnly;
+}
+
+@mixin hover($includeFocus: false, $hashActiveEffectOnMobile: true) {
+	@if ($includeFocus) {
+		&:focus-visible {
+			@content;
+		}
+	}
+
+	@media (any-hover: hover) {
+		&:hover {
+			@content;
+		}
+	}
+
+	@if ($hashActiveEffectOnMobile) {
+		@media (any-hover: none) {
+			&:active {
+				@content;
+			}
+		}
+	}
+}
+
+@mixin focusVisible {
+	outline: var(--focus-width) solid var(--focus-ring);
+	outline-offset: var(--focus-offset);
+}
+
+@mixin focus-visible {
+	&:focus-visible {
+		@include focusVisible;
+	}
+}
+
+@function status-scale($L, $C, $H, $mode) {
+	@if $mode == light {
+		@return (
+			outline: (
+				base: oklch($L $C $H),
+				hover: oklch($L - 0.05 $C - 0.01 $H),
+				active: oklch($L - 0.1 $C - 0.03 $H),
+				focus: oklch($L - 0.06 $C + 0.03 $H)
+			),
+			border: (
+				base: oklch($L $C $H),
+				hover: oklch($L - 0.05 $C + 0.01 $H + 5),
+				active: oklch($L - 0.1 $C + 0.01 $H - 5),
+				focus: oklch($L + 0.1 $C + 0.15 $H - 5)
+			),
+			fill: (
+				base: oklch($L + 0.06 $C * 1.125 $H + 3),
+				hover: oklch($L + 0.03 $C * 1.125 $H + 3),
+				active: oklch($L $C * 1.125 $H + 6),
+				on-fill: oklch(1 0 0)
+			),
+			soft: oklch(0.94 ($C * 0.35) $H)
+		);
+	}
+
+	@if $mode == dark {
+		@return (
+			outline: (
+				base: oklch($L $C $H),
+				hover: oklch($L + 0.06 $C + 0.01 $H),
+				active: oklch($L - 0.04 $C $H),
+				focus: oklch($L + 0.06 $C + 0.02 $H)
+			),
+			border: (
+				base: oklch($L $C $H),
+				hover: oklch($L + 0.06 $C + 0.01 $H),
+				active: oklch($L - 0.04 $C $H),
+				focus: oklch($L + 0.06 $C + 0.02 $H)
+			),
+			fill: (
+				base: oklch($L + 0.14 $C * 0.95 $H),
+				hover: oklch($L + 0.2 $C * 0.95 $H),
+				active: oklch($L + 0.08 $C * 0.9 $H),
+				on-fill: oklch(0.26 ($C * 0.35) $H)
+			),
+			soft: oklch(0.3 ($C * 0.45) $H)
+		);
+	}
+}
+
+// Для нейтральной схемы никак общую логику не применить, поэтому отдельная обработка
+@function status-border-neutral($L, $C, $H, $mode) {
+	@if $mode == light {
+		@return (
+			base: oklch($L $C $H),
+			hover: oklch($L - 0.1 $C + 0.01 $H + 5),
+			active: oklch($L - 0.2 $C + 0.01 $H - 5),
+			focus: oklch($L - 0.3 $C $H)
+		);
+	}
+
+	@if $mode == dark {
+		@return (
+			base: oklch($L $C $H),
+			hover: oklch($L + 0.1 $C + 0.01 $H),
+			active: oklch($L + 0.2 $C + 0.01 $H),
+			focus: oklch($L + 0.2 $C + 0.02 $H)
+		);
+	}
+}
+
+@mixin generate-status-fill($name, $L, $C, $H, $mode) {
+	$s: status-scale($L, $C, $H, $mode);
+
+	--status-#{$name}-text: #{map.get(map.get($s, outline), base)};
+	--status-#{$name}-text-hover: #{map.get(map.get($s, outline), hover)};
+	--status-#{$name}-text-active: #{map.get(map.get($s, outline), active)};
+
+	--status-#{$name}-fill: #{map.get(map.get($s, fill), base)};
+	--status-#{$name}-fill-hover: #{map.get(map.get($s, fill), hover)};
+	--status-#{$name}-fill-active: #{map.get(map.get($s, fill), active)};
+	--status-#{$name}-on-fill: #{map.get(map.get($s, fill), on-fill)};
+
+	--status-#{$name}-soft: #{map.get($s, soft)};
+}
+
+@mixin generate-status-border($name, $L, $C, $H, $mode) {
+	@if $name == neutral {
+		$s: status-border-neutral($L, $C, $H, $mode);
+
+		--border-0: #{map.get($s, base)};
+		--border-1: #{map.get($s, hover)};
+		--border-2: #{map.get($s, active)};
+		--border-focus: #{map.get($s, focus)};
+
+		--status-#{$name}-border: var(--border-0);
+		--status-#{$name}-border-hover: var(--border-1);
+		--status-#{$name}-border-active: var(--border-2);
+		--status-#{$name}-border-focus: var(--border-focus);
+	} @else {
+		$s: status-scale($L, $C, $H, $mode);
+
+		--status-#{$name}-border: #{map.get(map.get($s, border), base)};
+		--status-#{$name}-border-hover: #{map.get(map.get($s, border), hover)};
+		--status-#{$name}-border-active: #{map.get(map.get($s, border), active)};
+		--status-#{$name}-border-focus: #{map.get(map.get($s, border), focus)};
+	}
+}
+
+@function status-border-neutral2($L, $C, $H, $mode) {
+	@if $mode == light {
+		@return (
+			base: oklch($L $C $H),
+			hover: oklch($L + 0.13 $C + 0.15 $H - 89),
+			active: oklch($L - 0.2 $C + 0.15 $H + 19),
+			focus: oklch($L + 0.15 $C + 0.2 $H - 89)
+		);
+	}
+
+	@if $mode == dark {
+		@return (
+			base: oklch($L $C $H),
+			hover: oklch($L + 0.1 $C + 0.01 $H),
+			active: oklch($L + 0.2 $C + 0.01 $H),
+			focus: oklch($L + 0.2 $C + 0.02 $H)
+		);
+	}
+}
+
+@mixin generate-neutral-border2() {
+	--status-neutral-border: var(--border-0);
+	--status-neutral-border-hover: var(--border-1);
+	--status-neutral-border-active: var(--border-2);
+	--status-neutral-border-focus: var(--border-focus);
+}
+
+@function status-border-neutral3($L, $C, $H, $mode) {
+	@if $mode == light {
+		@return (
+			base: oklch($L $C $H),
+			hover: oklch($L - 0.13 $C + 0.15 $H + 59),
+			active: oklch($L - 0.25 $C + 0.2 $H + 9),
+			focus: oklch($L - 0.15 $C + 0.2 $H + 59)
+		);
+	}
+
+	@if $mode == dark {
+		@return (
+			base: oklch($L $C $H),
+			hover: oklch($L + 0.1 $C + 0.01 $H),
+			active: oklch($L + 0.2 $C + 0.01 $H),
+			focus: oklch($L + 0.2 $C + 0.02 $H)
+		);
+	}
+}
+
+@mixin generate-neutral-border3($L, $C, $H, $mode) {
+	$s: status-border-neutral3($L, $C, $H, $mode);
+
+	--border-0: #{map.get($s, base)};
+	--border-1: #{map.get($s, hover)};
+	--border-2: #{map.get($s, active)};
+	--border-focus: #{map.get($s, focus)};
+
+	--status-neutral-border: var(--border-0);
+	--status-neutral-border-hover: var(--border-1);
+	--status-neutral-border-active: var(--border-2);
+	--status-neutral-border-focus: var(--border-focus);
+}
+
+@mixin generate-accent($L, $C, $H, $mode) {
+	@if $mode == light {
+		--content-accent: oklch(#{$L} #{$C} #{$H});
+		--surface-accent: oklch(0.94 #{$C - 0.2} #{$H - 15});
+		--border-accent: oklch(#{$L - 0.03} #{$C - 0.08} #{$H});
+		// --focus-accent: oklch(#{$L + 0.04} #{$C + 0.05} #{$H});
+	}
+
+	@if $mode == dark {
+		--content-accent: oklch(#{$L} #{$C} #{$H});
+		--surface-accent: oklch(#{$L - 0.4} #{$C - 0.15} #{$H - 10});
+		--border-accent: oklch(#{$L - 0.08} #{$C - 0.1} #{$H});
+		// --focus-accent: oklch(#{$L + 0.06} #{$C + 0.03} #{$H});
+	}
+}

package/src/styles/styles.scss

@@ -0,0 +1,15 @@
+// Главный файл общих стилей foundation-ui. Подключается один раз в host-приложении.
+
+// Нормализация подключается здесь же, чтобы не было проблем с сортировкой импортов, ограниченными eslint
+@use "normalize";
+@use "variables";
+@use "base";
+@use "flex";
+@use "grid";
+@use "margin";
+@use "border";
+@use "text";
+@use "color";
+@use "controls";
+@use "layout";
+@use "components";

package/src/styles/themes/_index.scss

@@ -0,0 +1,2 @@
+@forward "./light/default";
+@forward "./dark/default";

package/src/styles/themes/_theme.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+
+@use "../mixins/" as *;
+
+@mixin generated-theme-palette($theme, $mode) {
+	$accent: map.get($theme, accent);
+
+	@include generate-accent(map.get($accent, l), map.get($accent, c), map.get($accent, h), $mode);
+
+	@each $name, $status in map.get($theme, status) {
+		$fill: map.get($status, fill);
+		$border: map.get($status, border);
+
+		@include generate-status-fill($name, map.get($fill, l), map.get($fill, c), map.get($fill, h), $mode);
+		@include generate-status-border($name, map.get($border, l), map.get($border, c), map.get($border, h), $mode);
+	}
+}

package/src/styles/themes/dark/_default.scss

@@ -0,0 +1,24 @@
+@use "../../config" as stylesConfig;
+@use "../theme" as theme;
+
+@mixin dark-theme {
+	@include stylesConfig.emit-declarations(stylesConfig.theme-tokens(stylesConfig.$dark-theme));
+	@include theme.generated-theme-palette(stylesConfig.$dark-theme, dark);
+}
+
+/* Для WebKit браузеров (Chrome, Safari, Edge) */
+input:-webkit-autofill {
+	-webkit-text-fill-color: var(--content-0) !important;
+	-webkit-box-shadow: 0 0 0 1000px var(--surface-0) inset !important;
+}
+
+/* Для Firefox */
+input:autofill {
+	background: var(--surface-0) !important;
+}
+
+/* Общие стили */
+// TODO: unused
+input.autofilled {
+	background: var(--surface-0) !important;
+}

package/src/styles/themes/light/_default.scss

@@ -0,0 +1,7 @@
+@use "../../config" as stylesConfig;
+@use "../theme" as theme;
+
+@mixin light-theme {
+	@include stylesConfig.emit-declarations(stylesConfig.theme-tokens(stylesConfig.$light-theme));
+	@include theme.generated-theme-palette(stylesConfig.$light-theme, light);
+}

package/styles/config.scss

@@ -0,0 +1 @@
+@forward "../src/styles/config";

package/styles/foundation.scss

@@ -0,0 +1 @@
+@use "../src/styles/foundation";

package/styles/mixins.scss

@@ -0,0 +1 @@
+@forward "../src/styles/mixins";

package/styles/themes.scss

@@ -0,0 +1 @@
+@forward "../src/styles/themes";

package/styles.scss

@@ -0,0 +1 @@
+@use "./src/styles/styles";