Migrated Steps

components/lib/theme/aura/steps/index.js

@@ -1,11 +1,153 @@
 export default {
     variables: {
         colorScheme: {
-            light: {},
+            light: {
-            dark: {},
+                connector: {
+                    borderColor: '{surface.200}'
                 },
+                item: {
+                    textColor: '{surface.700}',
+                    textColorActive: '{primary.color}'
+                },
+                marker: {
+                    background: '{surface.0}',
+                    backgroundActive: '{surface.0}',
+                    borderColor: '{surface.200}',
+                    textColor: '{surface.500}',
+                    textColorActive: '{primary.color}'
+                }
+            },
+            dark: {
+                connector: {
+                    borderColor: '{surface.700}'
+                },
+                item: {
+                    textColor: '{surface.0}',
+                    textColorActive: '{primary.color}'
+                },
+                marker: {
+                    background: '{surface.900}',
+                    backgroundActive: '{surface.900}',
+                    borderColor: '{surface.700}',
+                    textColor: '{surface.400}',
+                    textColorActive: '{primary.color}'
+                }
+            }
+        }
     },
     css: `
+.p-steps {
+    position: relative;
+}
 
-`,
+.p-steps .p-steps-list {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+}
+
+.p-steps-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex: 1 1 auto;
+}
+
+.p-steps-item.p-disabled,
+.p-steps-item.p-disabled * {
+    opacity: 1;
+    pointer-events: auto;
+    user-select: auto;
+    cursor: auto;
+}
+
+.p-steps-item:before {
+    content: " ";
+    border-top: 2px solid var(--p-steps-connector-border-color);
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+    margin-top: calc(-1rem + 1px);
+}
+
+.p-steps-item:first-child::before {
+    width: calc(50% + 1rem);
+    transform: translateX(100%);
+}
+
+.p-steps-item:last-child::before {
+    width: 50%;
+}
+
+.p-steps-item .p-menuitem-link {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    text-decoration: none;
+    transition: outline-color var(--p-transition-duration);
+    border-radius: var(--p-rounded-base);
+    outline-color: transparent;
+}
+
+.p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+.p-steps-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    margin-top: 0.5rem;
+    color: var(--p-steps-item-text-color);
+    display: block;
+    font-weight: 500;
+}
+
+.p-steps-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--p-steps-marker-text-color);
+    border: 2px solid var(--p-steps-marker-border-color);
+    background: var(--p-steps-marker-background);
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+    position: relative;
+    font-weight: 500;
+}
+
+.p-steps-number::after {
+    content: " ";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
+}
+
+.p-steps:not(.p-readonly) .p-steps-item {
+    cursor: pointer;
+}
+
+.p-steps-current .p-steps-number {
+    background: var(--p-steps-marker-background-active);
+    color: var(--p-steps-marker-text-color-active);
+}
+
+.p-steps-current .p-steps-title {
+    font-weight: 500;
+    color: var(--p-steps-item-text-color-active);
+}
+`
 };