@oracle/oraclejet 12.1.11 → 12.1.13

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/base/_oj-form-layout.scss

@@ -0,0 +1,443 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+// WARNING: do not directly import this file, instead import the
+// version in your the theme specific directory,
+// for example form-layout/themes/redwood/oj-form-layout.scss
+// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+@import '../../../utilities/_oj.utilities.modules.scss';
+
+@include module-include-once('common.formlayout.element') {
+  // default custom element to block
+  oj-form-layout {
+    display: block;
+  }
+
+  // Css FormLayout utility selectors
+  // The technique used in these column classes use css multi column layout.
+  // http://dev.w3.org/csswg/css-multicol/
+  // With this layout the columns should automatically be
+  // approximately the same heights.
+  .oj-form-cols-labels-inline {
+    column-width: var(--oj-form-layout-start-edge-column-min-width);
+    column-gap: var(--oj-form-layout-column-gutter);
+  }
+
+  .oj-form-cols {
+    column-width: var(--oj-form-layout-column-min-width);
+    column-gap: var(--oj-form-layout-column-gutter);
+  }
+
+  // if columns attribute is specified, we want the exact number of columns specified
+  // so we need to remove the minimum column width setting. THis affects direction='column'.
+  .oj-form-layout-no-min-column-width .oj-form-cols,
+  .oj-form-layout-no-min-column-width .oj-form-cols-labels-inline {
+    column-width: auto;
+  }
+
+  // without controlling breaking then in some cases a label will
+  // show up in the first column but its associated field will show
+  // up in the second column.
+  // Due to a FF bug for break-inside, we are also adding this to
+  // the .oj-flex-item div as a work around.
+  .oj-form-cols > .oj-flex,
+  .oj-form-cols-labels-inline > .oj-flex,
+  .oj-form-cols > .oj-flex > .oj-flex-item,
+  .oj-form-cols-labels-inline > .oj-flex > .oj-flex-item {
+    // -moz-column-break-inside doesn't work on FF 24 on windows
+    // try adding page-break-inside as well
+    -moz-column-break-inside: avoid;
+    -ms-column-break-inside: avoid;
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  // Due to a difference of implementation with Safari and how they deal with
+  // fragmentainers that aren't direct children of the multi-column layout element,
+  // this work around was found to work with Safari and not cause any issues with
+  // other browsers. See JET-42692
+  // I'm limiting this to direction="column" and column="1" to minimize any
+  // potential regression, but I think it is very unlikely to cause any issues.
+  // Due to a change in Chrome 98 (see bug JET-49143), we need to make these specific only to
+  // the affected browsers.  Firefox needs both work arounds, Safari just needs this one.
+  .oj-agent-browser-safari .oj-formlayout-max-cols-1 > .oj-form:not(.oj-formlayout-form-across),
+  .oj-agent-browser-firefox .oj-formlayout-max-cols-1 > .oj-form:not(.oj-formlayout-form-across) {
+    display: inline;
+  }
+  // Unfortunately, the safari work around does nothing to help Firefox and this fix
+  // can't be limited to one column but is limited to direction="column". See JET-42692
+  .oj-agent-browser-firefox .oj-form-layout > .oj-form:not(.oj-formlayout-form-across) > .oj-flex {
+    display: inline;
+  }
+
+  // headers inside a form layout have different margins than regular headers
+  .oj-form > hr,
+  .oj-form > h1,
+  .oj-form > h2,
+  .oj-form > h3,
+  .oj-form > h4 {
+    // the margins above and below are 15px, but there's
+    // already the formlayout margin bottom above, so subtract that
+    // from the top
+
+    margin: calc(15px - var(--oj-form-layout-margin-bottom)) 0 15px 0;
+  }
+
+  //
+  // Stacked (non-responsive) form layout
+  //
+
+  .oj-form > .oj-form-control,
+  .oj-form > .oj-form-non-control {
+    margin-bottom: var(--oj-form-layout-margin-bottom);
+  }
+
+  // when a form is nested reset the text align to start, otherwise the field's
+  // text-align property will be inherited
+  .oj-form > .oj-flex > .oj-flex-item > .oj-form {
+    text-align: left;
+    html[dir='rtl'] & {
+      text-align: right;
+    }
+  }
+
+  // Originally the margin was on .oj-form .oj-flex. However there was a problem.
+  // In the "across" form layout there's 4 grid cells in a row.
+  // On large screens these 4 cells are all on one line.
+  // But on medium screens the first 2 cells stay on the
+  // first line and the second 2 cells wrap to a new line
+  // to create a second "row". However there's no actual row
+  // class in this case, so the margins need to be on the field columns.
+  //
+  // The :last-child is to handle cases where there is a colspan
+  // across all the cells.
+  //
+  // See the form layout demo titled "inline responsive across"
+  // before checking in any changes to where the margin is placed.
+  .oj-form > .oj-flex > .oj-flex-item:not(.oj-formlayout-nested-formlayout):not(.oj-formlayout-nested-labelvalue) {
+    padding: 0 0 calc(var(--oj-form-layout-margin-bottom) - var(--oj-private-core-wrappable-margin-bottom)) 0;
+  }
+
+  // oj-label-value still has an oj-label in its own div, which should never have a margin bottom
+  // For oj-label-value, the first-child is the label and the last-child is the value
+  .oj-form.oj-label-value > .oj-flex > .oj-flex-item:first-child {
+    margin: 0;
+  }
+
+  .oj-form > .oj-flex > .oj-flex-item > .oj-form-non-control {
+    margin-bottom: var(--oj-private-core-wrappable-margin-bottom);
+  }
+
+  // dividers between rows
+
+  .oj-form > .oj-flex {
+    border-style: solid;
+    border-color: var(--oj-core-divider-color);
+    border-width: 0 0 var(--oj-form-layout-divider-width) 0;
+    padding: var(--oj-form-layout-divider-margin) 0 0;
+  }
+
+  .oj-form-layout > .oj-form[class*='oj-form-cols-'] > .oj-flex:last-child {
+    border-width: 0 0 var(--oj-form-layout-divider-width) 0;
+  }
+
+  // no border on the last row
+  .oj-form > .oj-flex:last-child {
+    border-width: 0;
+  }
+
+  // nowrap label support
+  .oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label,
+  .oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label,
+  .oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label-value .oj-label,
+  .oj-formlayout-labels-nowrap
+    > .oj-flex
+    > .oj-flex-item
+    > .oj-formlayout-inline-label
+    > .oj-label-value
+    .oj-label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  // inline label suport
+  .oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label, // oj-label-value needs this
+  .oj-formlayout-inline-label > .oj-label {
+    // we're using width of 100% and so on for the case where
+    // the label-nowrap classes are used.
+    // See the form layout demo titled "label wrapping"
+    // before checking the values in here
+
+    width: 100%;
+    box-sizing: border-box;
+    text-align: var(--oj-form-layout-start-edge-label-text-align);
+  }
+
+  // inline field suport
+  .oj-formlayout-inline-value {
+    text-align: var(--oj-form-layout-start-edge-value-text-align);
+  }
+
+  // without this, the required icon is chopped off at top in Chrome.
+  .oj-formlayout-inline-label .oj-label-required-icon {
+    margin-top: 1px;
+  }
+
+  // when labels are inline we don't float.
+  .oj-formlayout-inline-label .oj-label-required-icon,
+  .oj-formlayout-inline-label .oj-label-help-icon,
+  .oj-formlayout-inline-label label,
+  .oj-formlayout-inline-label .oj-label-help-icon-anchor {
+    float: none;
+  }
+
+  // when labels are inline we don't float so we need to add spacing.
+  .oj-formlayout-inline-label .oj-label-required-icon,
+  .oj-formlayout-inline-label .oj-label-help-icon {
+    html:not([dir='rtl']) & {
+      margin-left: 0;
+      margin-right: 6px;
+    }
+    html[dir='rtl'] & {
+      margin-right: 0;
+      margin-left: 6px;
+    }
+  }
+
+  // TODO: Not certain when this first selector is used.  It seems like it could mess up nested cases.
+  .oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label,
+    .oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label, // oj-label-value needs this
+    .oj-formlayout-inline-label > .oj-label {
+    display: inline-flex;
+    align-items: center;
+
+    html:not([dir='rtl']) & {
+      padding-right: var(--oj-form-layout-start-edge-label-to-value-padding);
+    }
+    html[dir='rtl'] & {
+      padding-left: var(--oj-form-layout-start-edge-label-to-value-padding);
+    }
+  }
+
+  .oj-form-layout
+    > .oj-form.oj-enabled
+    > .oj-flex
+    > .oj-flex-item
+    > .oj-formlayout-inline-label
+    > .oj-label,
+  oj-label-value.oj-formlayout-labels-inline
+    > .oj-flex
+    > .oj-flex-item
+    > .oj-label:not(.oj-read-only) {
+    &.oj-inputtext-label,
+    &.oj-inputpassword-label,
+    &.oj-inputnumber-label,
+    &.oj-inputdate-label,
+    &.oj-inputtime-label,
+    &.oj-inputdatetime-label,
+    &.oj-select-label,
+    &.oj-combobox-label,
+    &.oj-searchselect-label,
+    &.oj-textarea-label {
+      min-height: var(--oj-text-field-height);
+    }
+  }
+
+  // when the label should be top aligned
+  .oj-formlayout-inline-label > .oj-label-inline-top {
+    margin-top: 0;
+  }
+
+  // center a start aligned label with the center of the switch
+  .oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label.oj-switch-label,
+  .oj-formlayout-inline-label > .oj-switch-label:not(.oj-read-only),
+  .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-switch-label:not(.oj-read-only) {
+    min-height: var(--oj-core-touch-target-min-size);
+  }
+
+  // center a start aligned label with the center of the slider,
+  // slider doesn't support readonly so leave off the oj-enabled
+  .oj-formlayout .oj-form.oj-form-cols-labels-inline .oj-label.oj-slider-label,
+  .oj-formlayout-inline-label > .oj-slider-label:not(.oj-read-only),
+  .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-slider-label:not(.oj-read-only) {
+    min-height: var(--oj-core-touch-target-min-size);
+    align-items: center; // needed for all readonly form
+  }
+
+  .oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label.oj-radioset-label,
+  .oj-formlayout .oj-form.oj-enabled.oj-form-cols-labels-inline .oj-label.oj-checkboxset-label,
+  .oj-formlayout-inline-label > .oj-radioset-label:not(.oj-read-only),
+  .oj-formlayout-inline-label > .oj-checkboxset-label:not(.oj-read-only),
+  .oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-radioset-label:not(.oj-read-only),
+  .oj-formlayout-labels-inline
+    > .oj-flex
+    > .oj-flex-item
+    > .oj-checkboxset-label:not(.oj-read-only) {
+    margin-top: calc(
+      (
+          var(--oj-radio-checkbox-row-height) -
+            (
+              var(--oj-typography-body-md-font-size) * var(--oj-typography-body-md-line-height) +
+                1px
+            )
+        ) / 2 + var(--oj-typography-body-md-font-size) - var(--oj-label-font-size)
+    );
+  }
+
+  // This is for cases where there are label modifiers (required, etc), in which case
+  // the properties below need to be inherited by oj-label-group
+  // otherwise the ellipsis doesn't show when the label-nowrap classes are used.
+  // See the form layout demo titled "label wrapping"
+  // before checking the values in here
+  // line-height is needed so that the label has enough height to show borders.
+  // line-height on label itself has no effect.
+  .oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-label > .oj-label-group, // oj-label-value
+    .oj-formlayout-labels-nowrap > .oj-flex > .oj-flex-item > .oj-formlayout-inline-label > .oj-label > .oj-label-group {
+    width: inherit;
+    overflow: inherit;
+    text-overflow: inherit;
+  }
+
+  // This is for cases where there are label modifiers (required, etc), in which case
+  // the properties below need to be inherited by oj-label-group
+  // otherwise the ellipsis doesn't show when the label-nowrap classes are used.
+  // See the form layout demo titled "label wrapping"
+  // before checking the values in here
+  .oj-label-value.oj-formlayout-labels-inline > .oj-flex > .oj-flex-item > .oj-label > .oj-label-group, // This is for oj-label-value
+    .oj-formlayout-inline-label > .oj-label > .oj-label-group {
+    width: inherit;
+    overflow: inherit;
+    text-overflow: inherit;
+  }
+
+  // For the form across, we need to remove the left/right padding from the .oj-flex div as the padding is
+  // on the even/odd .oj-flex-item divs (see above)
+  .oj-form.oj-formlayout-form-across > .oj-flex {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .oj-formlayout-max-cols-1:not(.oj-formlayout-full-width) {
+    max-width: var(--oj-form-layout-column-max-width);
+  }
+
+  .oj-formlayout-max-cols-2:not(.oj-formlayout-full-width) {
+    max-width: calc(2 * var(--oj-form-layout-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-3:not(.oj-formlayout-full-width) {
+    max-width: calc(3 * var(--oj-form-layout-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-4:not(.oj-formlayout-full-width) {
+    max-width: calc(4 * var(--oj-form-layout-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-5:not(.oj-formlayout-full-width) {
+    max-width: calc(5 * var(--oj-form-layout-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-6:not(.oj-formlayout-full-width) {
+    max-width: calc(6 * var(--oj-form-layout-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-1.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
+    max-width: var(--oj-form-layout-start-edge-column-max-width);
+  }
+
+  .oj-formlayout-max-cols-2.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
+    max-width: calc(2 * var(--oj-form-layout-start-edge-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-3.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
+    max-width: calc(3 * var(--oj-form-layout-start-edge-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-4.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
+    max-width: calc(4 * var(--oj-form-layout-start-edge-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-5.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
+    max-width: calc(5 * var(--oj-form-layout-start-edge-column-max-width));
+  }
+
+  .oj-formlayout-max-cols-6.oj-formlayout-labels-inline:not(.oj-formlayout-full-width) {
+    max-width: calc(6 * var(--oj-form-layout-start-edge-column-max-width));
+  }
+
+  .oj-form-layout > .oj-form {
+    padding-left: var(--oj-form-layout-horizontal-margin);
+    padding-right: var(--oj-form-layout-horizontal-margin);
+  }
+  // Nested forms layouts need no horizontal margin
+  .oj-form-layout > .oj-form > .oj-flex > .oj-flex-item > .oj-form-layout > .oj-form {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  // in direction row, things are a little more complex, so we need to apply spacing
+  // to the flex-item divs.
+  .oj-form-layout.oj-formlayout-form-across > .oj-form {
+    padding-left: 0px;
+    padding-right: 0px;
+    column-gap: 0px;
+  }
+
+  // When labels are inline, we shouldn't ever wrap as it produces difficult
+  // to understand layouts.
+  .oj-formlayout-labels-inline > .oj-form > .oj-flex {
+    flex-wrap: nowrap;
+  }
+
+  .oj-formlayout-column-gutter {
+    flex: 0 1 var(--oj-form-layout-column-gutter);
+  }
+
+  // oj-label-value doesn't need the row divider margin, as it isn't a true row, so remove the padding
+  .oj-label-value.oj-form > .oj-flex {
+    padding-top: 0;
+  }
+
+  $formLayoutDefaultOptions: ();
+
+  @if ($privateFormLayoutLabelEdgeDefault != null) {
+    $formLayoutDefaultOptions: map-merge(
+      $formLayoutDefaultOptions,
+      (
+        labelEdge: $privateFormLayoutLabelEdgeDefault
+      )
+    );
+  }
+  $formLayoutDefaultOptions: map-merge(
+    $formLayoutDefaultOptions,
+    (
+      colspanWrap: 'wrap'
+    )
+  );
+
+  $formLayoutDefaultOptions: map-merge(
+    $formLayoutDefaultOptions,
+    (
+      'direction': 'row'
+    )
+  );
+
+  // using the oj-form-layout-option-defaults to pass the column gap even though it's not really a default
+  $formLayoutDefaultOptions: map-merge(
+    $formLayoutDefaultOptions,
+    (
+      'columnGap': var(--oj-form-layout-column-gutter)
+    )
+  );
+
+  .oj-form-layout-option-defaults {
+    font-family: oj-json-from-map($formLayoutDefaultOptions) !important;
+  }
+}
+
+// This is to prevent the flash of unstyled content before the html becomes JET components.
+oj-form-layout:not(.oj-complete) {
+  visibility: hidden;
+}

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/redwood/_oj-form-layout-scoped.cssvars.scss

@@ -0,0 +1,15 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+@import "../../../utilities/_oj.utilities.modules.scss";
+@import "../../../core/themes/redwood/_oj-core-scoped.cssvars.scss";
+
+@include module-include-once("redwood.variables.formLayout.scoped") {
+
+:root.oj-scale-sm {
+
+// forms
+// ------------------------------
+  --oj-form-layout-margin-bottom: 1rem;
+}    
+
+}

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/redwood/_oj-form-layout.cssvars.scss

@@ -0,0 +1,54 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+@import "../../../utilities/_oj.utilities.modules.scss";
+
+@include module-include-once("redwood.variables.formlayout") {
+
+:root {
+  // form layout
+  // ------------------------
+
+  // divider between rows
+  --oj-form-layout-divider-width:                         0;
+  --oj-form-layout-divider-margin:                        0;
+  
+
+  // These variables are used to set the column-width/column-gap properties
+  // in .oj-form-cols and .oj-form-cols-labels-inline.
+  // These classes use css multi column layout, see:
+  // http://dev.w3.org/csswg/css-multicol/
+  --oj-form-layout-start-edge-column-min-width:          22rem;
+  --oj-form-layout-start-edge-column-max-width:          37.5rem;
+  --oj-form-layout-column-min-width:                      18rem;
+  --oj-form-layout-column-max-width:                      28rem;
+  
+  // The left/right margin is the space before the first column and after the last column of an oj-form-layout
+  --oj-form-layout-horizontal-margin:                     0px;
+  // The gutter is the space between columns of an oj-form-layout
+  --oj-form-layout-column-gutter:                         1.5rem;
+
+  // In a form layout this is the space expected between
+  // form controls in different rows
+  // todo: probably need to change this, think we are calculating off this in sass
+  --oj-form-layout-margin-bottom:                         .875rem;
+
+  // in a form layout when the labels are inline what is the
+  // default label alignment
+  --oj-form-layout-start-edge-label-text-align: end;
+
+  // in a form layout when the labels are inline what is the
+  // default field alignment
+  --oj-form-layout-start-edge-value-text-align: start;
+
+  // gutter (padding) between the inline label and the control
+  --oj-form-layout-start-edge-label-to-value-padding: 1.5rem;    
+  
+  // top aligned labels
+  //    by default labels are dislplay: block and therefore
+  //    render on top of the field. This variable controls
+  //    the vertical spacing between labels and fields
+  --oj-form-layout-top-edge-label-to-value-padding: 0.5rem;
+
+}
+
+}

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/redwood/_oj-form-layout.servervars.scss

@@ -0,0 +1,4 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+
+$privateFormLayoutLabelEdgeDefault: inside !default;

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/redwood/oj-form-layout.scss

@@ -0,0 +1,17 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+@import "../../../utilities/_oj.utilities.modules.scss";
+
+
+@import "../../../helpers/themes/redwood/oj-helpers.scss";
+@import "../../../text-field/themes/redwood/_oj-text-field.cssvars.scss";
+@import "../../../typography/themes/redwood/_oj-typography.cssvars.scss";
+@import "../../../label/themes/redwood/_oj-label.cssvars.scss";
+@import "../../../radio-checkbox/themes/redwood/_oj-radiocheckbox.cssvars.scss";
+@import "_oj-form-layout.cssvars.scss";
+@import "_oj-form-layout.servervars.scss";
+@import "_oj-form-layout-scoped.cssvars.scss";
+// implementation currently in common
+@import "../base/_oj-form-layout.scss"; 
+// scoped cssvars override
+@import "../../../text-field/themes/redwood/_oj-text-field-scoped.cssvars.scss";

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/stable/_oj-form-layout.cssvars.scss

@@ -0,0 +1,54 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+@import "../../../utilities/_oj.utilities.modules.scss";
+
+@include module-include-once("stable.variables.formlayout") {
+
+:root {
+  // form layout
+  // ------------------------
+
+  // divider between rows
+  --oj-form-layout-divider-width:                         0;
+  --oj-form-layout-divider-margin:                        0;
+  
+
+  // These variables are used to set the column-width/column-gap properties
+  // in .oj-form-cols and .oj-form-cols-labels-inline.
+  // These classes use css multi column layout, see:
+  // http://dev.w3.org/csswg/css-multicol/
+  --oj-form-layout-start-edge-column-min-width:          22rem;
+  --oj-form-layout-start-edge-column-max-width:          37.5rem;
+  --oj-form-layout-column-min-width:                      18rem;
+  --oj-form-layout-column-max-width:                      28rem;
+  
+  // The left/right margin is the space before the first column and after the last column of an oj-form-layout
+  --oj-form-layout-horizontal-margin:                     0px;
+  // The gutter is the space between columns of an oj-form-layout
+  --oj-form-layout-column-gutter:                         1.5rem;
+
+  // In a form layout this is the space expected between
+  // form controls in different rows
+  // todo: probably need to change this, think we are calculating off this in sass
+  --oj-form-layout-margin-bottom:                         .875rem;
+
+  // in a form layout when the labels are inline what is the
+  // default label alignment
+  --oj-form-layout-start-edge-label-text-align: end;
+
+  // in a form layout when the labels are inline what is the
+  // default field alignment
+  --oj-form-layout-start-edge-value-text-align: start;
+
+  // gutter (padding) between the inline label and the control
+  --oj-form-layout-start-edge-label-to-value-padding: 1.5rem;    
+  
+  // top aligned labels
+  //    by default labels are dislplay: block and therefore
+  //    render on top of the field. This variable controls
+  //    the vertical spacing between labels and fields
+  --oj-form-layout-top-edge-label-to-value-padding: 0.5rem;
+
+}
+
+}

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/stable/_oj-form-layout.servervars.scss

@@ -0,0 +1,4 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+
+$privateFormLayoutLabelEdgeDefault: inside !default;

package/dist/pcss/oj/v12.1.13/oj/form-layout/themes/stable/oj-form-layout.scss

@@ -0,0 +1,14 @@
+// Copyright (c) 2014, 2023, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
+
+@import "../../../utilities/_oj.utilities.modules.scss";
+@import "../../../helpers/themes/stable/oj-helpers.scss";
+@import "../../../text-field/themes/stable/_oj-text-field.cssvars.scss";
+@import "../../../typography/themes/stable/_oj-typography.cssvars.scss";
+@import "../../../label/themes/stable/_oj-label.cssvars.scss";
+@import "../../../radio-checkbox/themes/stable/_oj-radiocheckbox.cssvars.scss";
+@import "_oj-form-layout.cssvars.scss";
+@import "_oj-form-layout.servervars.scss";
+// implementation currently in common
+@import "../base/_oj-form-layout.scss"; 
+// scoped cssvars override
+@import "../../../text-field/themes/stable/_oj-text-field-scoped.cssvars.scss";