@rolemodel/optics 2.1.2 → 2.1.3

package/dist/css/core/utilities.css

@@ -0,0 +1,429 @@
+/* Container Properties */
+
+.container {
+  width: 100%;
+  max-width: var(--op-breakpoint-medium);
+  padding: 0 var(--op-space-large);
+  margin: 0 auto;
+}
+
+.container--sm {
+  max-width: var(--op-breakpoint-small);
+}
+
+.container--md-padding {
+  padding: 0 var(--op-space-medium);
+}
+
+.container--sm-padding {
+  padding: 0 var(--op-space-small);
+}
+
+.container--xs {
+  max-width: var(--op-breakpoint-x-small);
+}
+
+/* Width Properties */
+
+.full-width {
+  width: 100%;
+}
+
+.half-width {
+  width: 50%;
+}
+
+.four-fifths-width {
+  width: calc(100% * 4 / 5);
+}
+
+.three-fifths-width {
+  width: calc(100% * 3 / 5);
+}
+
+.two-fifths-width {
+  width: calc(100% * 2 / 5);
+}
+
+.one-fifth-width {
+  width: calc(100% * 1 / 5);
+}
+
+.three-quarters-width {
+  width: calc(100% * 3 / 4);
+}
+
+.one-quarter-width {
+  width: calc(100% * 1 / 4);
+}
+
+.two-thirds-width {
+  width: calc(100% * 2 / 3);
+}
+
+.one-third-width {
+  width: calc(100% * 1 / 3);
+}
+
+/* Flex Properties */
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-no-wrap {
+  flex-wrap: nowrap;
+}
+
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
+/* Gap Properties */
+.gap-xxs {
+  gap: var(--op-space-2x-small);
+
+  --op-gap: var(--op-space-2x-small);
+}
+
+.gap-xs {
+  gap: var(--op-space-x-small);
+
+  --op-gap: var(--op-space-x-small);
+}
+
+.gap-sm {
+  gap: var(--op-space-small);
+
+  --op-gap: var(--op-space-small);
+}
+
+.gap-md {
+  gap: var(--op-space-medium);
+
+  --op-gap: var(--op-space-medium);
+}
+
+.gap-lg {
+  gap: var(--op-space-large);
+
+  --op-gap: var(--op-space-large);
+}
+
+.gap-xl {
+  gap: var(--op-space-x-large);
+
+  --op-gap: var(--op-space-x-large);
+}
+
+/* Justify Content */
+
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-around {
+  justify-content: space-around;
+}
+
+/* Align Items */
+
+.items-stretch {
+  align-items: stretch;
+}
+
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.items-end {
+  align-items: flex-end;
+}
+
+.items-baseline {
+  align-items: baseline;
+}
+
+/* Align Self */
+
+.self-auto {
+  align-self: auto;
+}
+
+.self-start {
+  align-self: flex-start;
+}
+
+.self-center {
+  align-self: center;
+}
+
+.self-end {
+  align-self: flex-end;
+}
+
+.self-stretch {
+  align-self: stretch;
+}
+
+.self-baseline {
+  align-self: baseline;
+}
+
+/* Text Alignment */
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+/* Box Margin */
+
+.margin-xl {
+  margin: var(--op-space-x-large);
+}
+
+.margin-lg {
+  margin: var(--op-space-large);
+}
+
+.margin-md {
+  margin: var(--op-space-medium);
+}
+
+.margin-sm {
+  margin: var(--op-space-small);
+}
+
+.margin-xs {
+  margin: var(--op-space-x-small);
+}
+
+.margin-none {
+  margin: 0;
+}
+
+.margin-auto {
+  margin: auto;
+}
+
+/* Vertical Margin */
+
+.margin-y-xl {
+  margin-top: var(--op-space-x-large);
+  margin-bottom: var(--op-space-x-large);
+}
+
+.margin-y-lg {
+  margin-top: var(--op-space-large);
+  margin-bottom: var(--op-space-large);
+}
+
+.margin-y-md {
+  margin-top: var(--op-space-medium);
+  margin-bottom: var(--op-space-medium);
+}
+
+.margin-y-sm {
+  margin-top: var(--op-space-small);
+  margin-bottom: var(--op-space-small);
+}
+
+.margin-y-xs {
+  margin-top: var(--op-space-x-small);
+  margin-bottom: var(--op-space-x-small);
+}
+
+.margin-y-none {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Horizontal Margin */
+
+.margin-x-xl {
+  margin-right: var(--op-space-x-large);
+  margin-left: var(--op-space-x-large);
+}
+
+.margin-x-lg {
+  margin-right: var(--op-space-large);
+  margin-left: var(--op-space-large);
+}
+
+.margin-x-md {
+  margin-right: var(--op-space-medium);
+  margin-left: var(--op-space-medium);
+}
+
+.margin-x-sm {
+  margin-right: var(--op-space-small);
+  margin-left: var(--op-space-small);
+}
+
+.margin-x-xs {
+  margin-right: var(--op-space-x-small);
+  margin-left: var(--op-space-x-small);
+}
+
+.margin-x-none {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+/* Top Margin */
+
+.margin-top-xl {
+  margin-top: var(--op-space-x-large);
+}
+
+.margin-top-lg {
+  margin-top: var(--op-space-large);
+}
+
+.margin-top-md {
+  margin-top: var(--op-space-medium);
+}
+
+.margin-top-sm {
+  margin-top: var(--op-space-small);
+}
+
+.margin-top-xs {
+  margin-top: var(--op-space-x-small);
+}
+
+.margin-top-none {
+  margin-top: 0;
+}
+
+/* Bottom Margin */
+
+.margin-bottom-xl {
+  margin-bottom: var(--op-space-x-large);
+}
+
+.margin-bottom-lg {
+  margin-bottom: var(--op-space-large);
+}
+
+.margin-bottom-md {
+  margin-bottom: var(--op-space-medium);
+}
+
+.margin-bottom-sm {
+  margin-bottom: var(--op-space-small);
+}
+
+.margin-bottom-xs {
+  margin-bottom: var(--op-space-x-small);
+}
+
+.margin-bottom-none {
+  margin-bottom: 0;
+}
+
+/* Right Margin */
+
+.margin-right-xl {
+  margin-right: var(--op-space-x-large);
+}
+
+.margin-right-lg {
+  margin-right: var(--op-space-large);
+}
+
+.margin-right-md {
+  margin-right: var(--op-space-medium);
+}
+
+.margin-right-sm {
+  margin-right: var(--op-space-small);
+}
+
+.margin-right-xs {
+  margin-right: var(--op-space-x-small);
+}
+
+.margin-right-none {
+  margin-left: 0;
+}
+
+/* Left Margin */
+
+.margin-left-xl {
+  margin-left: var(--op-space-x-large);
+}
+
+.margin-left-lg {
+  margin-left: var(--op-space-large);
+}
+
+.margin-left-md {
+  margin-left: var(--op-space-medium);
+}
+
+.margin-left-sm {
+  margin-left: var(--op-space-small);
+}
+
+.margin-left-xs {
+  margin-left: var(--op-space-x-small);
+}
+
+.margin-left-none {
+  margin-left: 0;
+}
+
+/*
+  Accessibility
+  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
+  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*/
+.sr-only {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+}

package/dist/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.1.2",
-  "packageManager": "yarn@4.2.2",
+  "version": "2.1.3",
+  "packageManager": "yarn@4.8.1",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",
   "scripts": {
@@ -10,7 +10,7 @@
     "build:css": "postcss src/optics.css -o dist/css/optics.css",
     "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css --env=minify",
     "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
-    "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -r src/addons dist/css",
+    "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -rL src/addons src/core src/components dist/css",
     "storybook": "storybook dev -p 6006 --docs",
     "build-storybook": "storybook build --docs",
     "lint": "yarn lint:js && yarn lint:css",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rolemodel/optics",
-  "version": "2.1.2",
-  "packageManager": "yarn@4.2.2",
+  "version": "2.1.3",
+  "packageManager": "yarn@4.8.1",
   "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
   "main": "dist/css/optics.css",
   "scripts": {
@@ -10,7 +10,7 @@
     "build:css": "postcss src/optics.css -o dist/css/optics.css",
     "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css --env=minify",
     "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
-    "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -r src/addons dist/css",
+    "build:files": "mkdir -p dist/css/addons; cp LICENSE README.md package.json dist/; cp -rL src/addons src/core src/components dist/css",
     "storybook": "storybook dev -p 6006 --docs",
     "build-storybook": "storybook build --docs",
     "lint": "yarn lint:js && yarn lint:css",