@ryuzaki13/react-foundation-ui 0.1.0

package/src/styles/_color.scss

@@ -0,0 +1,161 @@
+@use "./mixins" as *;
+
+// TODO: unused
+.overlayBackdrop {
+	background-color: var(--overlay-backdrop);
+}
+
+.overlayGlass {
+	background-color: var(--overlay-glass);
+}
+
+@supports (backdrop-filter: blur(0.5em)) {
+	.overlayBackdrop {
+		backdrop-filter: blur(0.5em);
+	}
+
+	.overlayGlass {
+		backdrop-filter: blur(0.5em);
+	}
+}
+
+.surface0 {
+	background-color: var(--surface-0);
+}
+
+.surface1 {
+	background-color: var(--surface-1);
+}
+
+.surface2 {
+	background-color: var(--surface-2);
+}
+
+// TODO: unused
+.surfaceAccent {
+	background-color: var(--surface-accent);
+}
+
+.surfaceBackdrop {
+	background-color: var(--overlay-backdrop);
+}
+
+// TODO: unused
+.surfaceGlass {
+	background-color: var(--overlay-glass);
+}
+
+.colorTransparent {
+	color: transparent;
+}
+
+.content0 {
+	color: var(--content-0);
+}
+
+.content1 {
+	color: var(--content-1);
+}
+
+.content2 {
+	color: var(--content-2);
+}
+
+.contentAccent {
+	color: var(--content-accent);
+}
+
+.statusSuccess {
+	color: var(--status-success-text);
+}
+
+.statusError {
+	color: var(--status-error-text);
+}
+
+.textColorDanger {
+	color: var(--status-error-text);
+}
+
+.statusWarning {
+	color: var(--status-warning-text);
+}
+
+.statusInfo {
+	color: var(--status-info-text);
+}
+
+.statusNone {
+	color: var(--content-1);
+}
+
+// Состояния
+// TODO: unused
+.colorSchemeNeutral {
+	@include ui-tone("neutral");
+	@include ui-appearance-solid;
+
+	color: var(--ui-color);
+	background-color: var(--ui-background);
+	border-color: var(--ui-border-color);
+}
+
+// TODO: unused
+.colorSchemeSuccess {
+	@include ui-tone("success");
+	@include ui-appearance-solid;
+
+	color: var(--ui-color);
+	background-color: var(--ui-background);
+	border-color: var(--ui-border-color);
+}
+
+.colorSchemeError {
+	@include ui-tone("error");
+	@include ui-appearance-solid;
+
+	color: var(--ui-color);
+	background-color: var(--ui-background);
+	border-color: var(--ui-border-color);
+}
+
+// TODO: unused
+.colorSchemeWarning {
+	@include ui-tone("warning");
+	@include ui-appearance-solid;
+
+	color: var(--ui-color);
+	background-color: var(--ui-background);
+	border-color: var(--ui-border-color);
+}
+
+// TODO: unused
+.colorSchemeInfo {
+	@include ui-tone("info");
+	@include ui-appearance-solid;
+
+	color: var(--ui-color);
+	background-color: var(--ui-background);
+	border-color: var(--ui-border-color);
+}
+
+// Нейтральные схемы
+// TODO: unused
+.colorSchemeGhost {
+	@include ui-tone("neutral");
+	@include ui-appearance-ghost;
+
+	color: var(--ui-color);
+	background-color: var(--ui-background);
+	border-color: var(--ui-border-color);
+}
+
+// TODO: unused
+.colorSchemeLight {
+	@include ui-tone("neutral");
+	@include ui-appearance-outline;
+
+	color: var(--ui-color);
+	background-color: var(--ui-background);
+	border-color: var(--ui-border-color);
+}

package/src/styles/_components.scss

@@ -0,0 +1,14 @@
+.listItem {
+	background-color: var(--surface-0);
+
+	&:hover:not(.selected) {
+		// filter: contrast(0.9);
+		background-color: var(--surface-accent);
+	}
+
+	&.selected {
+		cursor: default;
+		// color: var(--content-accent);
+		background-color: var(--surface-1);
+	}
+}

package/src/styles/_controls.scss

@@ -0,0 +1,42 @@
+@use "./mixins" as *;
+
+.uiToneNeutral {
+	@include ui-tone("neutral");
+}
+
+.uiToneError {
+	@include ui-tone("error");
+}
+
+.uiToneWarning {
+	@include ui-tone("warning");
+}
+
+.uiToneSuccess {
+	@include ui-tone("success");
+}
+
+.uiToneInfo {
+	@include ui-tone("info");
+}
+
+.uiAppearanceSolid {
+	@include ui-appearance-solid;
+}
+
+.uiAppearanceOutline {
+	@include ui-appearance-outline;
+}
+
+.uiAppearanceGhost {
+	@include ui-appearance-ghost;
+}
+
+.uiAppearanceTransparent {
+	@include ui-appearance-transparent;
+}
+
+// TODO: unused
+.uiInteractiveControl {
+	@include ui-control-base;
+}

package/src/styles/_flex.scss

@@ -0,0 +1,98 @@
+@use "align";
+
+.flex {
+	display: flex;
+}
+
+// TODO: unused
+.flexInline {
+	display: inline-flex;
+	vertical-align: middle;
+}
+
+.flexWrap {
+	@extend .flex;
+	flex-wrap: wrap;
+}
+
+// TODO: unused
+.flexNoWrap {
+	@extend .flex;
+	flex-wrap: nowrap;
+}
+
+.flexWrapReverse {
+	@extend .flex;
+	flex-wrap: wrap-reverse;
+}
+
+// TODO: unused
+.flexRow {
+	@extend .flex;
+	flex-direction: row;
+}
+
+.flexColumn {
+	@extend .flex;
+	flex-direction: column;
+}
+
+// TODO: unused
+.flexRowReverse {
+	@extend .flex;
+	flex-direction: row-reverse;
+}
+
+.flexColumnReverse {
+	@extend .flex;
+	flex-direction: column-reverse;
+}
+
+// TODO: unused
+.flexBasis0 {
+	flex-basis: 0;
+}
+
+.flexBasisAuto {
+	flex-basis: auto;
+}
+
+.flexGrow0 {
+	flex-grow: 0;
+}
+
+.flexGrow1 {
+	flex-grow: 1;
+}
+
+.flexShrink0 {
+	flex-shrink: 0;
+}
+
+.flexShrink1 {
+	flex-shrink: 1;
+}
+
+.flex0 {
+	@extend .flexGrow0;
+	@extend .flexShrink0;
+	@extend .flexBasisAuto;
+}
+
+.flex1 {
+	@extend .flexGrow1;
+	@extend .flexShrink1;
+	@extend .flexBasisAuto;
+}
+
+.flexCenter {
+	@extend .flex;
+	@extend .alignItemsCenter;
+	@extend .justifyContentCenter;
+}
+
+.flexCenterBetween {
+	@extend .flex;
+	@extend .alignItemsCenter;
+	@extend .justifyContentBetween;
+}

package/src/styles/_gap.scss

@@ -0,0 +1,57 @@
+// Отступы
+.gapNone {
+	gap: unset;
+}
+
+.gapRowXs {
+	row-gap: var(--space-xs);
+}
+.gapRowSm {
+	row-gap: var(--space-sm);
+}
+.gapRowMd {
+	row-gap: var(--space-md);
+}
+.gapRowLg {
+	row-gap: var(--space-lg);
+}
+.gapRowXl {
+	row-gap: var(--space-xl);
+}
+
+.gapColumnXs {
+	column-gap: var(--space-xs);
+}
+.gapColumnSm {
+	column-gap: var(--space-sm);
+}
+.gapColumnMd {
+	column-gap: var(--space-md);
+}
+.gapColumnLg {
+	column-gap: var(--space-lg);
+}
+.gapColumnXl {
+	column-gap: var(--space-xl);
+}
+
+.gapXs {
+	@extend .gapRowXs;
+	@extend .gapColumnXs;
+}
+.gapSm {
+	@extend .gapRowSm;
+	@extend .gapColumnSm;
+}
+.gapMd {
+	@extend .gapRowMd;
+	@extend .gapColumnMd;
+}
+.gapLg {
+	@extend .gapRowLg;
+	@extend .gapColumnLg;
+}
+.gapXl {
+	@extend .gapRowXl;
+	@extend .gapColumnXl;
+}

package/src/styles/_grid.scss

@@ -0,0 +1,52 @@
+@use "gap";
+@use "align";
+
+.grid {
+	display: grid;
+}
+
+.gridAutoRowsFr {
+	@extend .grid;
+	grid-auto-rows: 1fr;
+}
+
+// TODO: unused
+.gridAutoRowsAutoFr {
+	@extend .grid;
+
+	grid-template-columns: 100%;
+	grid-auto-rows: auto 1fr;
+}
+
+// TODO: unused
+.gridAutoColumnsAutoFr {
+	@extend .grid;
+
+	grid-template-columns: auto 1fr;
+	grid-auto-rows: auto;
+}
+
+.gridColumns {
+	@extend .grid;
+
+	--min-width: 15em;
+	grid-template-columns: repeat(auto-fill, minmax(calc(var(--min-width) + var(--width-add)), 1fr));
+}
+
+// TODO: unused
+.gridColumnsSm {
+	@extend .gridColumns;
+	@extend .gapSm;
+}
+
+// TODO: unused
+.gridColumnsMd {
+	@extend .gridColumns;
+	@extend .gapMd;
+}
+
+// TODO: unused
+.gridColumnsLg {
+	@extend .gridColumns;
+	@extend .gapLg;
+}

package/src/styles/_layout.scss

@@ -0,0 +1,288 @@
+@use "./mixins" as *;
+
+@use "base";
+@use "margin";
+@use "border";
+@use "color";
+
+.w100 {
+	width: 100%;
+}
+
+.h100 {
+	height: 100%;
+}
+
+.block {
+	display: block;
+}
+.inline {
+	display: inline;
+}
+// TODO: unused
+.inlineBlock {
+	display: inline-block;
+}
+.hidden {
+	display: none;
+}
+
+@include mobile {
+	.hiddenMobile {
+		display: none;
+	}
+}
+
+@include tablet {
+	// TODO: unused
+	.hiddenTablet {
+		display: none;
+	}
+}
+
+.relative {
+	position: relative;
+}
+.absolute {
+	position: absolute;
+}
+.fixed {
+	position: fixed;
+}
+.sticky {
+	position: sticky;
+}
+
+.stickyTop {
+	@extend .sticky;
+	top: 0;
+}
+
+// TODO: unused
+.z1 {
+	z-index: 1;
+}
+
+// TODO: unused
+.z10 {
+	z-index: 10;
+}
+
+// TODO: unused
+.transformCenter {
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.inset0 {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+.bottomLeft {
+	bottom: 0;
+	left: 0;
+}
+
+.bottomRight {
+	bottom: 0;
+	right: 0;
+}
+
+.topLeft {
+	top: 0;
+	left: 0;
+}
+
+.topRight {
+	top: 0;
+	right: 0;
+}
+
+.transformTopRight25 {
+	@extend .topRight;
+	transform: translate(25%, -25%);
+}
+// TODO: unused
+.transformTopLeft25 {
+	@extend .topLeft;
+	transform: translate(-25%, -25%);
+}
+// TODO: unused
+.transformBottomRight25 {
+	@extend .bottomRight;
+	transform: translate(25%, 25%);
+}
+// TODO: unused
+.transformBottomLeft25 {
+	@extend .bottomLeft;
+	transform: translate(-25%, 25%);
+}
+
+// TODO: unused
+.insetXs {
+	inset: var(--space-xs);
+}
+
+// TODO: unused
+.insetSm {
+	inset: var(--space-sm);
+}
+
+// TODO: unused
+.insetMd {
+	inset: var(--space-md);
+}
+
+// TODO: unused
+.insetLg {
+	inset: var(--space-lg);
+}
+
+.topXs {
+	top: var(--space-xs);
+}
+.topSm {
+	top: var(--space-sm);
+}
+.topMd {
+	top: var(--space-md);
+}
+// TODO: unused
+.topLg {
+	top: var(--space-lg);
+}
+
+.rightXs {
+	right: var(--space-xs);
+}
+.rightSm {
+	right: var(--space-sm);
+}
+.rightMd {
+	right: var(--space-md);
+}
+// TODO: unused
+.rightLg {
+	right: var(--space-lg);
+}
+
+.bottomXs {
+	bottom: var(--space-xs);
+}
+.bottomSm {
+	bottom: var(--space-sm);
+}
+.bottomMd {
+	bottom: var(--space-md);
+}
+// TODO: unused
+.bottomLg {
+	bottom: var(--space-lg);
+}
+
+.leftXs {
+	left: var(--space-xs);
+}
+.leftSm {
+	left: var(--space-sm);
+}
+.leftMd {
+	left: var(--space-md);
+}
+// TODO: unused
+.leftLg {
+	left: var(--space-lg);
+}
+
+// TODO: unused
+.topLeftXs {
+	@extend .topXs;
+	@extend .leftXs;
+}
+
+// TODO: unused
+.topRightXs {
+	@extend .topXs;
+	@extend .rightXs;
+}
+
+// TODO: unused
+.bottomLeftXs {
+	@extend .bottomXs;
+	@extend .leftXs;
+}
+
+// TODO: unused
+.bottomRightXs {
+	@extend .bottomXs;
+	@extend .rightXs;
+}
+
+// TODO: unused
+.topLeftSm {
+	@extend .topSm;
+	@extend .leftSm;
+}
+
+// TODO: unused
+.topRightSm {
+	@extend .topSm;
+	@extend .rightSm;
+}
+
+// TODO: unused
+.bottomLeftSm {
+	@extend .bottomSm;
+	@extend .leftSm;
+}
+
+// TODO: unused
+.bottomRightSm {
+	@extend .bottomSm;
+	@extend .rightSm;
+}
+
+// TODO: unused
+.topLeftMd {
+	@extend .topMd;
+	@extend .leftMd;
+}
+
+// TODO: unused
+.topRightMd {
+	@extend .topMd;
+	@extend .rightMd;
+}
+
+// TODO: unused
+.bottomLeftMd {
+	@extend .bottomMd;
+	@extend .leftMd;
+}
+
+// TODO: unused
+.bottomRightMd {
+	@extend .bottomMd;
+	@extend .rightMd;
+}
+
+.container {
+	@extend .paddingLg;
+	@extend .radiusLg;
+}
+
+.section {
+	@extend .paddingLg;
+	@extend .marginLg;
+}
+
+.sectionPanel {
+	// @extend .surface0;
+	@extend .border;
+	@extend .paddingLg;
+	@extend .radiusMd;
+}